Created
February 6, 2013 05:24
-
-
Save lakshman108/4720550 to your computer and use it in GitHub Desktop.
Box Shadows
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Box Shadows | |
| */ | |
| div#box1 { | |
| position: relative; | |
| background: aqua; | |
| width: 200px; | |
| height: 100px; | |
| left: 25px; | |
| box-shadow: 5px 5px 5px #CD5C5C; | |
| text-align: center; | |
| } | |
| div#box2 { | |
| position: relative; | |
| background: aqua; | |
| width: 200px; | |
| height: 100px; | |
| left: 25px; | |
| box-shadow: -5px -5px 10px #CD5C5C; | |
| text-align: center; | |
| } | |
| div#box3 { | |
| position: relative; | |
| background:aqua; | |
| width: 200px; | |
| height: 100px; | |
| left: 25px; | |
| box-shadow: 5px 5px 10px #CD5C5C, -5px -5px 10px #CD5C5C; | |
| text-align: center; | |
| } | |
| div#box4 { | |
| position: relative; | |
| background: aqua; | |
| width: 200px; | |
| height: 100px; | |
| left: 25px; | |
| text-align: center; | |
| box-shadow: inset 0 0 10px #000000; | |
| } | |
| div#box5 { | |
| position: relative; | |
| background: aqua; | |
| width: 200px; | |
| height: 100px; | |
| left: 25px; | |
| text-align: center; | |
| box-shadow: 0 10px 6px -6px #CD5C5C; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <h2>Box Shadows</h2> | |
| <div id="box1">Sharp Shadow</div> | |
| </br> | |
| <div id="box2">Negative and softer shadow</div> | |
| </br> | |
| <div id="box3">Negative and Positive shadow</div> | |
| </br> | |
| <div id="box4">This is an inset Shadow</div> | |
| </br> | |
| <div id="box5">This is bottom shadow only</div> | |
| <h2>Rendering Engines</h2> | |
| <p>Web Browsers use rendering engines to "paint" content to the browser window for viewing. Different browser use different rendering engines, this means that one rendering engine can sometimes display content differently from another rendering engine. It also means that a Rendering Engine may support some HTML and CSS features and not others. To get around this you must use browser specific instructions so as to have the same effects across multiple browsers. Hopefully this will be phased out as all the different browsers and their rendering engines conform to standards in HTML and CSS.</p> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // alert('Hello world!'); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment