Created
September 18, 2013 13:11
-
-
Save mildsunrise/6608944 to your computer and use it in GitHub Desktop.
Shadow effects
This file contains 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
/** | |
Shadow effects | |
============== | |
Multiple text-shadows can be stacked to | |
create wonderful, realistic effects. | |
Oh, and CSS allows for expressiveness too. | |
Try zooming in and disabling some shadows! | |
Background was adapted from | |
Rebel @ SubtlePatterns.com. | |
**/ | |
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic); | |
body { | |
background: url(http://i.imgur.com/BGEARlg.png); | |
} | |
h1 { | |
font: bold 6em 'Open Sans Condensed'; | |
text-align: center; | |
/** | |
No color; everything's done with the | |
shadows below (top ones go first). | |
**/ | |
color: transparent; | |
text-shadow: | |
/* THREE super-blurred glows */ | |
0 0 80px rgba(87,200,255,.2) | |
, 0 0 150px rgba(87,200,255,1) | |
, 0 0 220px rgba(87,200,255,1) | |
/* TWO bases (color & glow) */ | |
, 0px 2px 8px rgba(87,250,255,.8) | |
, 0 0 rgb(0,96,204) | |
/* ONE-pixel highlights */ | |
/* shadows */ | |
, -1px -2px 0 rgba(0,0,0,.5) | |
, 0px -1px 0 rgba(0,0,0,.7) | |
/* lights */ | |
, +1px +1px 0 rgba(255,255,255,.3) | |
, 0px +1px 0 rgba(255,255,255,.7) | |
, 0px 0px 0 rgba(255,255,255,.5) | |
; | |
} |
This file contains 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
<h1>Get your own</h1> |
This file contains 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 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":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment