Viewing Drop Shadow

Drop Shadow



User: Steve 12 years ago
The drop shadow applied looks totally different when previewed in a browser.
And you can get the drop to offset toward 11 oclock but it will not work in the 4 oclock position..

Is there some special way to make this work?


S

Last edit 12 years ago

-------------------------------
MacBook Pro 15in Retina 10.14.6
Nevada, U.S.A
Apple since OS 7.1 LE II (pizza box)
User: Steve 12 years ago
sorry it wouldn't take the attachments...

-------------------------------
MacBook Pro 15in Retina 10.14.6
Nevada, U.S.A
Apple since OS 7.1 LE II (pizza box)
User: Roddy 12 years ago
You don't say what element you are applying the shadow to.

Here's an example of an image where the shadow is set to an angle of 330º (your 4 o'clock position)…

EverWeb…



Browser…



When a shadow is applied to an image in EverWeb, a PNG image is positioned behind the actual image. Because of this I wouldn't recommend using it - or at least use it sparingly - since it's another server request and another image for the browser to download.

Strictly speaking, there's no such thing as a drop shadow in web design. CSS uses "box shadow" since the shadow is applied to the box model. It's worth learning how to do this and there are plenty of online generators if you don't want to get into the math.

Here's an example in EverWeb…

http://everwebcodebox.com/image/box-shadow.html

If you are applying the shadow to text then that's a different matter. Text shadow should be avoided in the main since it interferes with clarity and causes problems for those with reading difficulties. Using a shadow on the h1 heading in the header is probably OK if you want an arty look but I would not recommend using a shadow on text that you want visitors to actually read.

Last edit 12 years ago

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Steve 12 years ago
I'm working with text.

S


Quote: Roddy - 14/03/2014 6:15:27
You don't say what element you are applying the shadow to.

Here's an example of an image where the shadow is set to an angle of 330º (your 4 o'clock position)…

EverWeb…



Browser…



When a shadow is applied to an image in EverWeb, a PNG image is positioned behind the actual image. Because of this I wouldn't recommend using it - or at least use it sparingly - since it's another server request and another image for the browser to download.

Strictly speaking, there's no such thing as a drop shadow in web design. CSS uses "box shadow" since the shadow is applied to the box model. It's worth learning how to do this and there are plenty of online generators if you don't want to get into the math.

Here's an example in EverWeb…

http://everwebcodebox.com/image/box-shadow.html

If you are applying the shadow to text then that's a different matter. Text shadow should be avoided in the main since it interferes with clarity and causes problems for those with reading difficulties. Using a shadow on the h1 heading in the header is probably OK if you want an arty look but I would not recommend using a shadow on text that you want visitors to actually read.


-------------------------------
MacBook Pro 15in Retina 10.14.6
Nevada, U.S.A
Apple since OS 7.1 LE II (pizza box)
User: Roddy 12 years ago
I seem to remember that this was raised as an issue a while back but don't know if it was ever fixed since I don't use text shadow for the reasons I gave above.

EW seems to be able to convert the info from the angle wheel to negative values for X and Y but not to positive.

I don't know who comes up with these things like angle wheels - I suppose it was Apple trying to dumb things down to save people actually learning anything! In CSS there is no such thing as shadow angle. The CSS box-shadow property has 5 elements - horizontal offset, vertical offset, blur radius, spread radius and color so the angle is expressed as a combination of plus and minus values of X and Y.

I can't even imagine how the developers manage to convert the rotation of that stupid little wheel into real data. At least they are trying to create these shadows with CSS rather than cop out the way Apple did with iWeb and convert the text to an image.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Steve 12 years ago
Thanks Roddy

I totally agree that drop shadow on text should be used carefully and sparingly on a page.
At least you've helped confirm that it is not working properly.. I like the wheel to rough it in then use the actual number to apply it to any other relevant text.

On a side note...
Do you ever think they'll enable the use of the function key and pg up pg dn keys I am a user that tries to use the track pad as little as possible?
Also "spell check as you type" as (default) would be really nice!


Cheers
S

-------------------------------
MacBook Pro 15in Retina 10.14.6
Nevada, U.S.A
Apple since OS 7.1 LE II (pizza box)
User: Roddy 12 years ago
Even the number is not reality since it is giving a shadow angle expressed in degrees.

What do you want to use the arrow keys for? I use them to fine tune the position of an object if I can't be bothered opening the Metrics inspector.

You can turn on "Check Spelling While Typing" in the Edit drop down menu. I leave it off to challenge myself to learn to concentrate on what I'm writing instead of thinking about the next thing I'm going to do.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Steve 12 years ago
I know you can turn it on. But I've been typing away and not notice that I had a miss-spelling till I posted... I would rather have it on, like most Apple type products.
I use the arrow keys to scroll.. It's the most efficient way to get to the top or bottom of your page especially if it's a long one, give it a try!

S

-------------------------------
MacBook Pro 15in Retina 10.14.6
Nevada, U.S.A
Apple since OS 7.1 LE II (pizza box)
User: Roddy 12 years ago
Are you referring to using spell check and arrow keys in this forum or in EverWeb?

I use an iMac with a magic mouse for web design stuff so going from the top to bottom of a long page only needs a quick swipe.

I detest track pads and use another magic mouse with my laptop. When the mouse switched on, the trackpad is set to disable so that I can use it as a place to put my coffee cup.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Steve 12 years ago
I'm talking about EW.. Spell check and scrolling via keyboard work fine in Safari/this forum...
Whether you like track pads or not should not be cause for the developers to disable a function/s that Apple users have had at their disposal for years...


S

-------------------------------
MacBook Pro 15in Retina 10.14.6
Nevada, U.S.A
Apple since OS 7.1 LE II (pizza box)
User: Paul-RAGESW 12 years ago
Quote:
Whether you like track pads or not should not be cause for the developers to disable a function/s that Apple users have had at their disposal for years...


We don't disable any functionality, rather it js something we just haven't implemented.

Can you describe in more detail what it is you want? An example would be very helpful as well.

-------------------------------
Paul
EverWeb Developer


Post Reply
You must login or signup to post.