a href='http://www.sitepoint.com/mastering-css3-7-cool-text-shadow-samples-you-can’t-miss/' @via Mastering CSS3: 7 cool text shadow samples you can't miss
p (whithout spread-distance)
.arcade-love Arcade love ♥
.color-happiness Color happiness
.chocolate Chocolate
.yeah Yeah! :)
.take-it Take it!
.draw Draw
.up-down Up and down
View Compiled
@import url(https://fonts.googleapis.com/css?family=Titan+One);
@import url(https://fonts.googleapis.com/css?family=Miniver);
@import url(https://fonts.googleapis.com/css?family=Henny+Penny);
@import url(https://fonts.googleapis.com/css?family=Frijole);
@import url(https://fonts.googleapis.com/css?family=Caesar+Dressing);
@import url(https://fonts.googleapis.com/css?family=Chewy);
body {
font-family: sans-serif;
}
div {
font-size: 52px;
margin: 10px;
}
.arcade-love {
font-family: "Titan One";
color: hsl(80, 70%, 55%);
text-shadow: 0 0 2px #fff,
/* embossed text */
-1px -1px 0 hsl(80, 70%, 35%),
-2px -2px 1px hsl(80, 70%, 35%),
/* transition to substrate */
-2px -2px 2px hsl(80, 10%, 15%),
/* substrate */
-2px -2px 0 hsl(60, 80%, 95%),
-3px -3px 0 hsl(60, 10%, 65%),
-4px -4px 0 hsl(60, 10%, 65%),
-5px -5px 0 hsl(60, 10%, 65%),
-6px -6px 0 hsl(60, 10%, 65%),
/* shadow for substrate */
-7px -7px 4px hsl(60, 10%, 40%),
-8px -8px 6px hsl(60, 10%, 55%);
}
.color-happiness {
font-family: "Titan One";
color: hsl(330, 100%, 50%);
text-shadow: 0 2px 0 hsl(330, 100%, 25%),
0 3px 2px hsla(330, 100%, 15%, 0.5),
/* next */
0 3px 0 hsl(350, 100%, 50%),
0 5px 0 hsl(350, 100%, 25%),
0 6px 2px hsla(350, 100%, 15%, 0.5),
/* next */
0 6px 0 hsl(20, 100%, 50%),
0 8px 0 hsl(20, 100%, 25%),
0 9px 2px hsla(20, 100%, 15%, 0.5),
/* next */
0 9px 0 hsl(50, 100%, 50%),
0 11px 0 hsl(50, 100%, 25%),
0 12px 2px hsla(50, 100%, 15%, 0.5),
/* next */
0 12px 0 hsl(70, 100%, 50%),
0 14px 0 hsl(70, 100%, 25%),
0 15px 2px hsla(70, 100%, 15%, 0.5),
/* next */
0 15px 0 hsl(90, 100%, 50%),
0 17px 0 hsl(90, 100%, 25%),
0 17px 2px hsla(90, 100%, 15%, 0.5);
}
.chocolate {
font-family: "Miniver";
color: hsl(20, 100%, 20%);
text-shadow: 0 0 1px hsl(20, 100%, 18%),
-1px 1px 0 hsl(20, 100%, 16%),
-2px 2px 2px hsl(20, 100%, 14%),
-4px 4px 2px hsl(20, 100%, 12%),
-6px 6px 3px hsl(20, 100%, 10%),
-8px 8px 2px hsl(20, 100%, 9%),
-10px 10px 3px hsl(20, 100%, 8%),
-12px 12px 2px hsl(20, 100%, 7%),
-14px 14px 2px hsl(20, 100%, 6%),
-15px 15px 2px hsl(20, 100%, 5%),
-15px 15px 0 hsla(20, 50%, 10%, 0.25);
}
.yeah {
font-family: "Henny Penny";
color: hsl(35, 100%, 30%);
background: hsl(35, 60%, 80%);
text-shadow: 0 0 2px hsl(35, 70%, 30%),
/* transition to substrate */
0 0 4px hsla(30, 100%, 55%, 0.5),
/* substrate */
-1px 1px 2px hsl(45, 60%, 95%),
/* adding volume */
-3px 3px 1px hsl(35, 70%, 30%),
/* transition to background */
-3px 3px 4px hsla(30, 90%, 55%, 0.5);
}
.take-it {
font-family: "Frijole";
color: hsl(65, 60%, 20%);
background: hsl(65, 60%,95%);
text-shadow: 0 0 3px hsl(65, 60%,75%),
/* light substrate */
0 0 1px hsl(65, 60%,95%),
/* blurring */
0 0 4px hsla(65, 100%, 30%, 0.4),
/* cutting substrate pieces */
6px 6px 4px hsl(65, 60%,95%),
-4px -6px 4px hsl(65, 60%,95%),
/* dark outlining */
0 0 1px hsl(65, 60%, 20%);
}
.draw {
font-family: "Caesar Dressing";
color: transparent;
background: hsl(0, 75%,45%);
text-shadow: 3px 3px 1px hsla(0, 60%, 100%, 0.75),
-1px -1px 1px hsla(0, 60%, 100%, 0.65),
1px 1px 1px hsla(0, 60%, 100%, 0.65),
/* background */
0 0 1px hsla(0, 60%, 100%, 0.65),
/* additional details */
-3px -3px 1px hsla(0, 60%, 100%, 0.25),
3px 3px 1px hsla(0, 60%, 100%, 0.25);
}
.up-down {
font-family: "Chewy";
color: transparent;
text-shadow: -4px 4px hsla(0, 0%, 70%, .4),
-3px 3px hsla(0, 0%, 60%, .2),
-2px 2px hsla(0, 0%, 70%, .2),
-1px 1px hsla(0, 0%, 70%, .2),
0px 0px hsla(0, 0%, 50%, .5),
1px -1px hsla(0, 0%, 30%, .6),
2px -2px hsla(0, 0%, 30%, .7),
3px -3px hsla(0, 0%, 32%, .8),
4px -4px hsla(0, 0%, 30%, .9),
5px -5px hsla(0, 0%, 30%, 1.0);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.