html<\/code> and css<\/code> like this:<\/p>\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>CSS Buttons<\/title>\r\n<\/head>\r\n<body>\r\n\r\n\t<!-- STYLE SECTION -->\r\n\r\n\t<style type=\"text\/css\">\r\n\r\n \t<\/style>\r\n\r\n\r\n\t<!-- HTML SECTION -->\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n1.2 Pseudo-Elements :before and :after<\/h3>\n
A pseudo-element creates a phoney element and inserts it before or after the content of the element that you\u2019ve targeted.<\/p>\n
We will use the :before and :after pseudo-elements to add shadows left, right, top, bottom or combinations of these.<\/p>\n
See this simple example of its usage so you have a better clue:<\/p>\n
– HTML<\/p>\n
\r\n<!-- HTML SECTION -->\r\n<h1 class=\"text\">This is the first item<\/h1>\r\n<\/pre>\n– CSS<\/p>\n
\r\n<!-- STYLE SECTION -->\r\n\r\n.text:before {\r\n\tcontent:\"1. \"; \/* what to display before text element *\/\r\n}\r\n\r\n.text:after {\r\n\tcontent: \"!\"; \/* what to display after text element *\/\r\n}\r\n\r\n<\/style>\r\n<\/pre>\nThis would give the number 1.<\/code> before the text and !<\/code> after the text like this:
\n![\":before](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/box1.jpg\")
<\/a>:before and :after pseudo elements<\/figcaption><\/figure><\/p>\n1.3 Extra properties to consider<\/h3>\n
Along with the pseudo-elements, there are also some properties I’d like you to understand:<\/p>\n
z-index<\/code> – specifies the stack order of an element.<\/p>\nposition<\/code> – allows you to position elements within a page.<\/p>\ncontent<\/code> – used when appyling :before and :after pseudo-elements.<\/p>\nleft, right, top, bottom<\/code> – defines the left, right, top, bottom edge of an element.<\/p>\ntransform<\/code> – self-explanatory, transforms an object by degree, scale ect.<\/p>\n2. Basic Box-Shadow Property<\/h2>\n
Application of the box-shadow property is pretty simple. It goes like this:<\/p>\n
\r\nbox-shadow: horizontal-offset vertical-offset blur-radius spread-radius color;\r\n<\/pre>\n2.1 Attribute values explanation<\/h3>\n
But what do these attributes mean?<\/p>\n
1. The horizontal offset (required):<\/strong><\/p>\n – A positive value will make the shadow lie on the right of the box.
\n – A negative offset will make it lie on the left of the box.<\/p>\n
2. The vertical offset (required):<\/strong><\/p>\n – A negative value makes the shadow lie above the box.
\n – A positive value make it lie below the box.<\/p>\n
3. The blur radius (required):<\/strong><\/p>\n – Sharp shadows come with a value of 0, and the higher the number, the more blurred it will be, and the further out the shadow will extend.<\/p>\n
4. The spread radius (optional):<\/strong> <\/p>\n – Positive values increase the size of the shadow.
\n – Negative values decrease the size. <\/p>\n
Default is 0 (the shadow is same size as blur).<\/p>\n
5. Color (required):<\/strong><\/p>\n – Using HEX color: e.g. #ccc, #9895AF ect.
\n – Using RGBA color: e.g. rgba(192,192,192,0.3);<\/p>\n
2.2 Application of the basic property <\/h3>\n
Create a div<\/code> with a class<\/code> of box<\/code>.<\/p>\n\r\n<!-- HTML SECTION -->\r\n<div class=\"box basic\">\r\n\t<h3>WEB CODE GEEKS<\/h3>\r\n<\/div>\r\n<\/pre>\nWe are using multiple classes on an element, in this case two, because the box element will be the same for all examples, while the other class will contain distinctive attributes according to the effect we want to create.<\/p>\n
Now give the body<\/code> a light gray color and box<\/code> element these initial attributes to create a standard now.<\/p>\n\r\n<!-- STYLE SECTION -->\r\nbody {\r\n\tbackground:#E6E6E6;\r\n}\r\n\r\n.box {\r\n width:70%;\r\n height:200px;\r\n background:#FFF;\r\n margin:40px auto;\r\n}\r\n<\/pre>\nAnd the basic application of the box-shadow<\/code> property would be:<\/p>\n\r\n\r\n \/* no horizontal shadow, 10px vertical shadow, 6px blur, -6px spread radius, gray color *\/\r\n \r\n.basic{\r\n -webkit-box-shadow: 0 10px 6px -6px #777;\r\n -moz-box-shadow: 0 10px 6px -6px #777;\r\n box-shadow: 0 10px 6px -6px #777;\t\r\n}\r\n<\/pre>\nA basic shadow applied to a box like above will look like this:
\n![\"Basic](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/box3.jpg\")
<\/a>Basic Box-Shadow Application<\/figcaption><\/figure><\/p>\n3. Advanced 3D Looking Box Shadows <\/h2>\n
Now, let’s look at some popular designs with shadows.<\/p>\n
For the first effect, every line of code is commented so that you know what we are doing.<\/p>\n
3.1 Soft Box Shadow on Both Sides <\/h3>\n\r\n \/* EFFECT 1 *\/\r\n\/* Here shadows are styled as elements to give impressive look *\/\r\n\/* However, the box shadow property is applied at the end to make final touches *\/\r\n\r\n.effect1\r\n{\r\n position: relative;\t\/* relative positioning referring to before and after *\/\r\n}\r\n.effect1:before, .effect1:after \/* apply some mutual properties before and after this element *\/\r\n{\r\n z-index: -1;\t\t\t\/* send this element backward *\/\r\n position: absolute;\t\/* absolute positioning referring to effect2 *\/\r\n content: \"\";\t\t\t\/* just required, no need to put anything inside *\/\r\n bottom: 15px; \t\t\/* bottom shadow alignment, less is closer to bottom *\/\r\n left: 10px;\t\t\t\/* consider this like a margin left *\/\r\n width: 50%;\t\t\t\/* width of the shadow element background *\/\r\n top: 80%;\t\t\t\t\/* consider this as margin top of the shadow element *\/\r\n max-width:300px;\t\t\/* restricts the max width of the shadow element *\/\r\n background: #777;\t\t\/* gives a background color to the shadow element *\/\r\n -webkit-box-shadow: 0 15px 10px #777;\t\/* compatibility case application *\/\r\n -moz-box-shadow: 0 15px 10px #777;\t\/* compatibility case application *\/\r\n box-shadow: 0 15px 10px #777;\t\/* applied the basic box-shadow property *\/\r\n \/* rotation of shadows\/elements gives that 3D look to the box *\/\r\n -webkit-transform: rotate(-3deg);\r\n -moz-transform: rotate(-3deg);\r\n -o-transform: rotate(-3deg);\r\n -ms-transform: rotate(-3deg);\r\n transform: rotate(-3deg);\r\n}\r\n.effect1:after\r\n{\r\n -webkit-transform: rotate(3deg); \t\/* aligns the shadow right *\/\r\n -moz-transform: rotate(3deg);\r\n -o-transform: rotate(3deg);\r\n -ms-transform: rotate(3deg);\r\n transform: rotate(3deg);\r\n right: 10px;\t\t\t\t\t\/* consider this like a margin right *\/\r\n left: auto;\t\t\t\t\t\/* leave this auto to automatically set the left *\/\r\n}\r\n<\/pre>\nView:
\n![\"Soft](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/box6.jpg\")
<\/a>Soft Shadow on Both Sides<\/figcaption><\/figure><\/p>\n3.2 Left and Right Box Shadow <\/h3>\n
In this effect, we take a look at the left and right box-shadows.<\/p>\n
\r\n\r\n\/* LEFT SHADOW *\/\r\n\r\n.effect2\r\n{\r\n position: relative;\r\n}\r\n.effect2:before\r\n{\r\n z-index: -1;\r\n position: absolute;\r\n content: \"\";\r\n bottom: 15px;\r\n left: 10px;\r\n width: 50%;\r\n top: 80%;\r\n max-width:300px;\r\n background: #777;\r\n -webkit-box-shadow: 0 15px 10px #777;\r\n -moz-box-shadow: 0 15px 10px #777;\r\n box-shadow: 0 15px 10px #777;\r\n -webkit-transform: rotate(-3deg);\r\n -moz-transform: rotate(-3deg);\r\n -o-transform: rotate(-3deg);\r\n -ms-transform: rotate(-3deg);\r\n transform: rotate(-3deg);\r\n}\r\n\r\n\/* RIGHT SHADOW *\/\r\n\r\n.effect3\r\n{\r\n position: relative;\r\n}\r\n.effect3:after\r\n{\r\n z-index: -1;\r\n position: absolute;\r\n content: \"\";\r\n bottom: 15px;\r\n right: 10px;\r\n left: auto;\r\n width: 50%;\r\n top: 80%;\r\n max-width:300px;\r\n background: #777;\r\n -webkit-box-shadow: 0 15px 10px #777;\r\n -moz-box-shadow: 0 15px 10px #777;\r\n box-shadow: 0 15px 10px #777;\r\n -webkit-transform: rotate(3deg);\r\n -moz-transform: rotate(3deg);\r\n -o-transform: rotate(3deg);\r\n -ms-transform: rotate(3deg);\r\n transform: rotate(3deg);\r\n}\r\n<\/pre>\nView:
\n![\"Right](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/box4.jpg\")
<\/a>Right and Left Box-Shadow Applied<\/figcaption><\/figure><\/p>\n3.3 Hard Box Shadow on Both Sides <\/h3>\n
In this example, we look at a 3D like effect on both sides box shadow.<\/p>\n
\r\n\r\n\/* EFFECT 4 *\/\r\n\r\n.effect4\r\n{\r\n position: relative;\r\n}\r\n.effect4:before, .effect4:after\r\n{\r\n z-index: -1;\r\n position: absolute;\r\n content: \"\";\r\n bottom: 25px;\r\n left: 10px;\r\n width: 50%;\r\n top: 80%;\r\n max-width:300px;\r\n background: #777;\r\n -webkit-box-shadow: 0 35px 20px #777;\r\n -moz-box-shadow: 0 35px 20px #777;\r\n box-shadow: 0 35px 20px #777;\r\n -webkit-transform: rotate(-8deg);\r\n -moz-transform: rotate(-8deg);\r\n -o-transform: rotate(-8deg);\r\n -ms-transform: rotate(-8deg);\r\n transform: rotate(-8deg);\r\n}\r\n.effect4:after\r\n{\r\n -webkit-transform: rotate(8deg);\r\n -moz-transform: rotate(8deg);\r\n -o-transform: rotate(8deg);\r\n -ms-transform: rotate(8deg);\r\n transform: rotate(8deg);\r\n right: 10px;\r\n left: auto;\r\n}\r\n<\/pre>\nView:
\n![\"Both](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/box5.jpg\")
<\/a>Both Sides Box Shadow<\/figcaption><\/figure><\/p>\n3.4 Soft Inset Shadow <\/h3>\n
You can also set inset shadows in a box element.<\/p>\n
\r\n\/* EFFECT 5 *\/\r\n\r\n.effect5\r\n{\r\n position:relative;\r\n -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;\r\n -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;\r\n box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;\r\n}\r\n.effect5:before, .effect5:after\r\n{\r\n content:\"\";\r\n position:absolute;\r\n z-index:-1;\r\n -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);\r\n -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);\r\n box-shadow:0 0 20px rgba(0,0,0,0.8);\r\n top:50%;\r\n bottom:0;\r\n left:10px;\r\n right:10px;\r\n -moz-border-radius:100px \/ 10px;\r\n border-radius:100px \/ 10px;\r\n}\r\n.effect5:after\r\n{\r\n right:10px;\r\n left:auto;\r\n -webkit-transform:skew(8deg) rotate(3deg);\r\n -moz-transform:skew(8deg) rotate(3deg);\r\n -ms-transform:skew(8deg) rotate(3deg);\r\n -o-transform:skew(8deg) rotate(3deg);\r\n transform:skew(8deg) rotate(3deg);\r\n}\r\n<\/pre>\n