WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1CSS3 Box Shadow Empty CSS3 Box Shadow Thu Dec 16, 2010 12:24 am

RockerMan

RockerMan
Technician
Technician
CSS3 Box Shadow
Box shadow property for beginners



OK so today we are going to learn about Box Shadow!

The box-shadow property allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset.

Browser support is growing of late with Mozilla (Firefox), Webkit (Safari/Chrome/Konqueror), Opera and the IE9 Platform Preview all offering a decent implementation of the spec, although Mozilla and Webkit still require their respective -moz- and -webkit- prefixes (note Mozilla Firefox 4.0+ no longer requires the -moz- prefix).

OK so lets take a look at the code Smile
Code:

#Example{
-moz-box-shadow: 5px 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px 5px #888;
box-shadow: 5px 5px 5px 5px #888;
}

-moz-box-shadow: 5px 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px 5px #888;
box-shadow: 5px 5px 5px 5px #888;

This part is just refrencing the browser and what you want to do

OK now for the numbers Smile

In order:

  • OK so first number is the left/right ofset. To get it to go to the left you must use the minus(-) symbol.
  • The next is up/down ofset same princible as above, must use the minus(-) symbol if you would like to go up.
  • The next one is the blur, just increase the number and the blur increases. Simple as that Smile
  • This is the HEX color of the shadow, use any color you like. A light color is best for looks Wink


Thanks For Reading,
Rob Smile


Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.







Last edited by RockerMan on Wed Jan 05, 2011 10:32 pm; edited 1 time in total

http://www.graphics-post.com/

2CSS3 Box Shadow Empty Re: CSS3 Box Shadow Sat Dec 18, 2010 10:09 pm

ankillien

ankillien
Administrator
Administrator
Tutorial Accepted

View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum