CSS in Web Studio
Web Studio 5 Tutorials and Add On's - supporting you take your website that next step

CSS3 box shadows in Web Studio

 Remember to donate if you use a tutorial - Thank-you for help with maintaining the website and for understanding my time

Applying the CSS3 box shadow to a web studio division

BOX SHADOWS & WEB STUDIO
Box shadows use CSS3, there is a lot we can do with it but with web studio a few things to mention
We'll apply them to the division instead of the image since that is easier in web studio and use internal css
The problem as always is the IE browsers IE9 is fixed and all normal browsers are fine I use them all the time
Web studio preview uses IE in "quirks mode" so you need to
preview in a normal browser

You put your image on the page like you always do, select the shadow you want to use from the examples below then...

Copy/paste the class to "Inside Div" like this

Select your image and on the
HTML tab in "Insert Object HTML"
copy/paste the class in
"Inside DIV"

In "Insert Page HTML" Copy/Paste
the code in the
HEAD

Copy/paste the code to "Inside HEAD" like this

Preview in a normal browser (or up to date IE9+) to see it working

class=BoxShadow1

<style type="text/css">
.BoxShadow1 {box-shadow:5px 5px Black;}
</style>

DIV

HEAD

The 1st number is the horizontal offset the 2nd is vertical offset
so box-shadow: 8px 10px; would be farther down and more to the right

5px 5px

8px 10px

A solid shadow down and right

class=BoxShadow2

<style type="text/css">
.BoxShadow2 {box-shadow:-5px -5px Black;}
</style>

DIV

HEAD

You can also use negative numbers to go up and left
or 0 for no shadow box-shadow: 0px 10px

-5px -5px

0px 10px

< A solid shadow up and left
no shadow solid down >

class=BoxShadow3

<style type="text/css">
.BoxShadow3 {box-shadow:5px 5px 5px Black;}
</style>

DIV

HEAD

Next we can add another number for blur
higher the number more blurry it gets box-shadow:5px 5px 20px;

5px 5px 5px

5px 5px 20px

< A blur shadow 
more blur >

class=BoxShadow4

<style type="text/css">
.BoxShadow4 {box-shadow:0px 0px 20px 5px Black;}
</style>

DIV

HEAD

Next we can add yet another number for spread
thats how big the shadow gets right is bigger box-shadow:0px 0px 20px 20px;

0px 0px 20px 5px

0px 0px 20px 20px

< A blur shadow with spread
more spread >

class=BoxShadow5

<style type="text/css">
.BoxShadow5 {box-shadow:0px 0px 10px 5px silver;}
</style>

DIV

HEAD

We could use inset but I'll let you look that one up
so finally we can also change the color
you can use color names or hex numbers box-shadow:0px 0px 20px 5px #ffbf28;

0px 0px 10px 5px silver

0px 0px 10px 5px #ffbf28

< A color name
a color hex number >

How the CSS3 box shadow code works

My favorite box shadows

class=BoxShadowUnder

<style type="text/css">
.BoxShadowUnder {box-shadow:0px 10px 8px -4px black;}
</style>

DIV

HEAD

0 10px 8px -4px black

You can play around with the code but my two favorites are the shadow
under the image like I use below the bar at the top
and down / right on images and paragraphs

class=BoxShadow

<style type="text/css">
.BoxShadow {box-shadow:5px 5px 5px 0px black;}
</style>

DIV

HEAD

5px 5px 5px 0px black

A final note for older chrome and safari browser box shadows

You can add a line for those -webkit-box-shadow like below but I think people that use
those browsers like firefox -moz-box-shadow pretty well keep up to date
Those browsers were ahead of the CSS3 coding adaption so used the prefix

<style type="text/css">
.BoxShadow {
-webkit-box-shadow:5px 5px 5px 0px black;
box-shadow:5px 5px 5px 0px black;}
</style>

Applying a box shadow to a radius corner "Draw" shape

class=DrawShadow

<style type="text/css">
.DrawShadow {box-shadow: 4px 4px 6px black;
border-radius:22px;}
</style>

DIV

HEAD

Draw shape "border-radius" is a default
22px radius, if you change the radius
you'll need to match it with the code

This Draw shape is using
a 10px radius for example
border-radius:10px;

Thank-you

CSS in Web Studio 5 - CSS3 box shadows in web studio - by Web Studio Next

aaaaaaaaaaaaiii