[Pro] CSS3 Lifted Shadow - attaching code to a box

Man, do I hate fiddling around with code. Getting the code to work in the first place is always a challenge, and then making numerous graphic tweaks here at there is always slow going. I much prefer the graphical UI ecstasy of an Action, but being a rather impatient man I find it faster to accomplish my aims by posting a query here on FreewayTalk…

I’ve been toying with Mr. Davis’ CSS3 Shadow Action here:
http://actionsforge.com/actions/view/150-css3-shadow

But I want to tinker with the popular “lifted” shadow effects shown here:
http://www.paulund.co.uk/creating-different-css3-box-shadows-effects

I just don’t understand how to implement it in Freeway.

For example, I drew an HTML box and named it “TestBox”. I then dumped the code below into HTML Markup BEFORE , but nothing happens on Preview:

<style type="text/css">
<!--
#TestBox 
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}
-->
</style>

I look forward to hearing your thoughts and advice.

Thank you!

James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Good news and Bad. The good news is that I found the following thread which presents much “potential” for a solution:

http://freewaytalk.net/thread/view/118197

The Bad news is that it’s a fiddly mess to tweak styling. I would say a fair comparison between that CSS styling solution and a GUI Action solution is the same as the difference between an early 1980’s DOS text editor and MacWrite. It’s night and day, folks.

So whoever may come after reading this may wish to put in a feature request comment on the existing CSS3 Shadow Action here:

http://actionsforge.com/actions/view/150-css3-shadow

Add a set of “lifted” (curved) shadow effects to that Action, and problem solved!

–James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

More about…CSS Shadows…

http://www.corelangs.com/css/box/shadow.html

Naimer


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Naimer,

The link you provided shows some pretty standard shadow effects. But as I wrote in my opening post, I seek to produce “LIFTED” shadow effects as shown here:

http://www.paulund.co.uk/creating-different-css3-box-shadows-effects

And although it probably can be accomplished in Freeway, there really needs to be an easy-to-use Action to allow the average Freeway user to implement it.

–James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ernie did some great work a while ago …
http://cssway.thebigerns.com/projects/fancy_css_boxshadows/

Richard


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for the excellent link, Richard!

Do you know what the browser compatibility is for that code?
(Ernie’s web pages don’t mention compatibility.)

–James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Do you know what the browser compatibility is for that code?
(Ernie’s web pages don’t mention compatibility.)

Why not just run that page through your testing browser/OS of choice and
see for yourself? Should be easy and quickly answered that way.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 6 Jan 2015, 8:21 am, JDW wrote:

Thanks for the excellent link, Richard!

Do you know what the browser compatibility is for that code?
(Ernie’s web pages don’t mention compatibility.)

–James Wages

is this of help?

http://caniuse.com/#search=box-shadow

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for the browser overview. As I suspected IE8 is out, but all newer browsers appear to be OK.

However…

I tested the following shadows in Safari 8 today:

.curlLEFT
.dropSHADOW
.oppositesA
.oppositesB
.originalSHADOW
.pullDOWN

And I found problems with all except dropSHADOW…

Here is a screen shot in Safari showing what I see (all bizarre except .dropSHADOW):
CloudApp — Not Found

Here’s the actual web page on my server so you can test it in Safari (and other browsers):
http://kiramek.com/21test95/css3tests/

And here’s my Freeway Pro 7.0.1 document:
CloudApp — Not Found

I’m seeing pretty much the same thing (see my screenshot) in FireFox 34 on my Mac, and in FireFox 34 on WinXP, and IE11 on Win8.1.

Thanks.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ahem.

Try filling the divs that you’ve applied the style to… something simple and
easy, like WHITE.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I did add a White fill color to a set of samples. Have a look again and this time note the text description under each sample (specifically, the second column of HTML boxes, second from the left)…

http://kiramek.com/21test95/css3tests/

–James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If by “set of samples” you mean the INSANELY SMALL boxes at the left of
your file, then I question why you would not expect them to break under
conditions that no sane person would employ.

As for the sanely sized boxes on the right with NO FILL… thusly rendered
transparent… therefore revealing the shadowing objects behind them… again,
raising concerns about your expectations. Fill them and size them sanely
and they work fine in Safari, Firefox, and Chrome.

Quit making problems where there are none.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Quit getting upset for no reason. All I did is a quick test.

Sheesh.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Here’s a revised pair of test pages that may be helpful for some of you contemplating use of the box shadows:

http://kiramek.com/21test95/css3tests/new/

Best wishes,

James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi all,

I’m trying to apply one of the lifted shadows on a floating html item within a div. Is this possible? It looks like the shadow appears on the wrapping div. I tried messing with z-indexes but can’t get it to work.

I used ernies css file ‘original shadow’
http://cssway.thebigerns.com/projects/fancy_css_boxshadows/

thanks in advance.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I tried messing with z-indexes but can’t get it to work.

Can you post a link to your example - without seeing the underlying code we can only guess.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Without an online example to dissect, it’s hard to know what the problem
is… but-- if you are using Freeway 7-- then I should chime in here and say
that Thomas and I have both noted a change in how Freeway 7 applies
positioning to inflow items… which has direct implications on custom user
styles and pseudo elements such as used by these shadow styles.

If this is the case, then short answer is there’s an easy fix. Although, it
comes at the expense of a deep dive into how the position property
interacts with document flow, and where pseudo elements fit into all that.
Freeway 7 users of these shadow styles will want to read this:

http://cssway.thebigerns.com/workbench/freeway7-positioning/


Ernie Simpson

On Sun, Feb 15, 2015 at 4:44 PM, Gert DP email@hidden wrote:

Hi all,

I’m trying to apply one of the lifted shadows on a floating html item
within a div. Is this possible? It looks like the shadow appears on the
wrapping div. I tried messing with z-indexes but can’t get it to work.

I used ernies css file ‘original shadow’
http://cssway.thebigerns.com/projects/fancy_css_boxshadows/

thanks in advance.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you Ernie,

this was doing my head in as a designer.
I read up on z-index stacking orders & context because of this so it wasn’t all time wasted though.

My div looked exactly like in the post on your workbench.

At one point i did use the extended dialog box and put in position: relative but not for the parent div. That has fixed it now.

Thanks again for your css styles and follow up on the issue, this is a great community.

G.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options