![\"\"](\"http:\/\/codetheory.in\/wp-content\/uploads\/2012\/10\/shadow.jpg\" "\\"\\"")
<\/p>\n<\/p>\n
You might have used CSS3 box shadows several times to create some pretty looking drop shadows like you do in Photoshop. That’s great! But do you even know how it can be used for some other mind boggling purposes ? If not, then you are definitely going to like what I am about to show you. Super! So basically, now we know that the syntax is:<\/p>\n Now you must be thinking, “I already know this, where’s the real beauty man?”. Fine, Let me continue step by step and explain each of the parameters further and you’ll slowly grasp the real beauty!<\/p>\n In this step, we will just use the two required properties and see what we get. Try using negative values and see the result.<\/p>\n Nice, so we got what we wanted. A simple 8-bit kind-of drop shadow that looks good in some cases.\u00a0The shadow is 10px to the right and 10px to the bottom. Now, lets try the inset parameter.<\/p>\n Great! That’s a nice looking inset shadow with, again, no blur and Lets blur the shadow a bit to make it smooth. Play with the blur radius yourself to get a better understanding of it.<\/p>\n Looks pretty good on both the normal and inset shadows.<\/p>\n Adding some colors on the previous example.<\/p>\n As you can see, I used both the color name and the rgba value. You can also try hex color codes, rgb values, hsla values etc.<\/p>\n Now we’ll talk about the spread of the shadow. It basically means how much you want to spread the shadow. It can be negative or positive making the shadow smaller \/ bigger respectively.<\/p>\n You must know that box-shadows take the shape of their parent<\/strong>, so spread will only make the shadow bigger or smaller but the height \/ width will remain in constant proportions. This means, a rectangle can only have a rectangular shadow and a circle can only have a circular shadow. Now lets see this example:<\/p>\n As you can see, we changed the size of the shadow by using spread but also note that the proportions of the box are same for the shadow too.<\/p>\n Now, the real beauty is here<\/strong>. We can use multiple box-shadows to replicate an element multiple times having different positions (offsets) and different sizes (spread). How ?<\/p>\n Now, what’s the use of this knowledge? You can use this to create, like I described earlier, multiple copies of a single element without having to mess up with your markup and keep it clean. This can also be used to produce some quality pixel art or other things using just one element. You can combine this knowledge with pseudo elements so that you get 3 elements (2 pseudo and 1 main) and hence ship more Check out these examples below and see how you can use the The whole iPhone 4 created with just one element using box-shadows and pseudo elements by me. It is a codecast so its worth checking out \ud83d\ude09<\/p>\n A great experiment by Joshua Hibbert. It is also a codecast so check it out!<\/p>\n A very interesting experiment with box-shadows to create a whole portrait of Mona Lisa! It has 7.5k lines of css code but its not hand crafted. Its pointless, but fun \ud83d\ude42<\/p>\n Apart from these, I also found<\/a>\u00a0these\u00a0interesting<\/a>\u00a0by Hugo Giraudel.<\/p>\n I hope you understood the very basic concepts of CSS3 box-shadows and realized how powerful and flexible it is in reality. Although the aforementioned examples\/demos are definitely pointless but its fun. Check out the codecasts I mentioned earlier and you will see the magic of box-shadows from even closer. Feel free to share your thoughts in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":" You might have used CSS3 box shadows several times to create some pretty looking drop shadows like you do in Photoshop. That’s great! But do you even know how it can be used for some other mind boggling purposes ? If not, then you are definitely going to like what I am about to show … Continue reading “The Real Beauty of CSS3 Box Shadows”<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[53,52,15],"_links":{"self":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/398"}],"collection":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/comments?post=398"}],"version-history":[{"count":64,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/398\/revisions"}],"predecessor-version":[{"id":184655,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/398\/revisions\/184655"}],"wp:attachment":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/media?parent=398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/categories?post=398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/tags?post=398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n
\nFirst, lets talk about the box-shadow<\/code> property. It is a property introduced in CSS3 which accepts a maximum of 6 parameters in which 4 are optional!<\/p>\n\n
This one is optional with the default being black<\/del>. Update<\/strong>: This one is not optional but some browsers may use black as default if no color is specified (example is Chrome on Windows and Ubuntu) while others will interpret it as a transparent shadow (examples are Chrome on Android and Safari).<\/li>\n<\/ul>\nbox-shadow: inset x-offset y-offset blur-radius spread color<\/pre>\n
X and Y Offsets<\/h2>\n
<\/pre>\n
Also note that the default color of the shadow is black<\/del> and it has no blur.<\/p>\nInset<\/h2>\n
<\/pre>\n
default black color<\/del>.<\/p>\nBlur Radius<\/h2>\n
<\/pre>\n
Colors<\/h2>\n
<\/pre>\n
Spread<\/h2>\n
<\/pre>\n
<\/pre>\n
box-shadow<\/code> awesomeness. Oh, and you can have different shapes\/sizes for your pseudo-elements, whoa!<\/p>\nExamples<\/h2>\n
box-shadow<\/code> to do some extra cool things.<\/p>\nSingle Element Things<\/h3>\n
![\"\"](\"http:\/\/codetheory.in\/wp-content\/uploads\/2012\/10\/shot_121023_011102.png\")
<\/a><\/p>\n![\"\"](\"http:\/\/codetheory.in\/wp-content\/uploads\/2012\/10\/fgh.png\")
<\/a><\/h3>\nArtistic Things<\/h3>\n
![\"\"](\"http:\/\/codetheory.in\/wp-content\/uploads\/2012\/10\/shot_121023_011757.png\")
<\/a><\/p>\nPixel Characters<\/h3>\n
![\"\"](\"http:\/\/codetheory.in\/wp-content\/uploads\/2012\/10\/shot_121023_012515.png\" "\\"\\"")
<\/a>
\nThis one is created by Kushagra Gour. This is also a very nice example, make sure you mess up with the code. \ud83d\ude09
\n![\"\"](\"http:\/\/codetheory.in\/wp-content\/uploads\/2012\/10\/Capture4.png\" "\\"\\"")
<\/a>
\nIts a codecast created by me in which you’ll learn how to create a pixel character step by step using box shadows.<\/p>\nConclusion<\/h2>\n