Text Shadow works and is written just like Box Shadow:
X-Offset, Y-Offset, Blur, and Color
Some creations from midwinter-dg.com
.simple h2 {
text-shadow: 2px 3px 3px #333;
font-size: 80px;
color: #333;
}
.letterpress h2 {
text-shadow: 0px 1px 1px #4d4d4d;
color: #222;
font-size: 80px;
font-family: 'league_gothicregular';
}
.cloud9 h2 {
color: rgba(255,255,255,0);
font: 70px 'chunkfiveregular';
text-shadow:
0px 0px 10px rgba(255,255,255,0.6),
0px 0px 30px rgba(255,255,255,0.4),
0px 0px 50px rgba(255,255,255,0.3),
0px 0px 180px rgba(255,255,255,0.3);
}
.embossed h2 {
text-shadow:
-1px -1px 1px #fff,
1px 1px 1px #000;
color: #cdb06b; opacity: 0.3;
font: 80px 'museo_700regular';
}
.citylights h2 {
vcolor: #fff;
letter-spacing: 5px;
font: 80px 'misoregular';
text-shadow:
0 0 5px #fff, 0 0 10px #fff,
0 0 15px #fff, 0 0 20px #ff2d95,
0 0 30px #ff2d95, 0 0 40px #ff2d95,
0 0 50px #ff2d95, 0 0 75px #ff2d95;
}
.burning h2 {
color: #fff;
font: 80px 'blackjackregular';
text-shadow:
0px -1px 4px white,
0px -2px 10px yellow,
0px -10px 20px #ff8000,
0px -18px 40px red;
}
.retro h2 {
color: #d7ceb2;
text-shadow:
3px 3px 0px #2c2e38,
5px 5px 0px #5c5f72;
font: 80px 'bazarmedium';
letter-spacing: 10px;
}
.three-d h2 {
color: #fff;
font: 80px 'chunkfiveregular';
text-shadow:
0px 1px 0px #999, 0px 2px 0px #888,
0px 3px 0px #777, 0px 4px 0px #666,
0px 5px 0px #555, 0px 6px 0px #444,
0px 7px 0px #333, 0px 8px 7px #013;
}
Below is the code for the CSS3 Transitions a that reveal the code on roll-over.
.text_shadow div:hover h2 {font-size: 0; opacity: 0;}
.text_shadow div:hover pre {height: 100%; opacity: 1;}
.text_shadow h2, .text_shadow div:hover h2,
.text_shadow pre, .text_shadow div:hover pre {
transition:
height 2.5s ease-out 0.4s,
opacity .9s ease-out 0.7s,
font-size 0.8s ease-out 0.4s;
}
The best way to create an opaque colors is
rgba (Red, Green, Blue, Alpha).
Hover over one of the colors on the swatch to the reveal it' code
.opacity_10 {
background: rgba(255,0,0,0.1);
color: rgba(0,0,255,0.1);
}
.opacity_20 {
background: rgba(255,0,0,0.2);
color: rgba(0,0,255,0.2);
}
.opacity_30 {
background: rgba(255,0,0,0.3);
color: rgba(0,0,255,0.3);
}
.opacity_40 {
background: rgba(255,0,0,0.4);
color: rgba(0,0,255,0.4);
}
.opacity_50 {
background: rgba(255,0,0,0.5);
color: rgba(0,0,255,0.5);
}
.opacity_60 {
background: rgba(255,0,0,0.6);
color: rgba(0,0,255,0.6);
}
.opacity_70 {
background: rgba(255,0,0,0.7);
color: rgba(0,0,255,0.7);
}
.opacity_80 {
background: rgba(255,0,0,0.8);
color: rgba(0,0,255,0.8);
}
.opacity_90 {
background: rgba(255,0,0,0.9);
color: rgba(0,0,255,0.9);
}
.opacity_100 {
background: rgba(255,0,0,1);
color: rgba(0,0,255,1);
}
The accordion effect is created purely with CSS3
.colors {width: 100%;}
.color_wrapper {
font-size: 1.4em;
width: 80%;
margin: 5%;
}
.color_swatch div {
width: 10%;
padding: 5% 0;
float: left;
}
.color_swatch pre {
width: 0;
overflow: hidden;
padding-left: 20%;
}
.color_swatch:hover div {width: 5%;}
.color_swatch div:hover {width: 55%;}
.color_swatch div:hover pre {width: 100%;}
.color_swatch div, .color_swatch pre {
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
<div class="color_wrapper group">
<div class="color_swatch rgba">
<div class="opacity_10"><pre>…</pre></div>
<div class="opacity_20"><pre>…</pre></div>
<div class="opacity_30"><pre>…</pre></div>
<div class="opacity_40"><pre>…</pre></div>
<div class="opacity_50"><pre>…</pre></div>
<div class="opacity_60"><pre>…</pre></div>
<div class="opacity_70"><pre>…</pre></div>
<div class="opacity_80"><pre>…</pre></div>
<div class="opacity_90"><pre>…</pre></div>
<div class="opacity_100"><pre>…</pre></div>
</div> <!-- .color_swatch -->
</div> <!-- .color_wrapper -->
Transitions can smooth out what would otherwise be abrupt changes. The code can take 4 parameters:
A great demonstration of the various easing speeds available in CSS3 from http://css3.bradshawenterprises.com/transitions/.
Hover over the box to see the transition events, click on a ball or square to see the code the makes it work.
.ease {
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;
background: #f00;
}
.ease-in {
-webkit-transition: all 4s ease-in;
-moz-transition: all 4s ease-in;
-o-transition: all 4s ease-in;
transition: all 4s ease-in;
background: #0f0;
}
.ease-out {
-webkit-transition: all 4s ease-out;
-moz-transition: all 4s ease-out;
-o-transition: all 4s ease-out;
transition: all 4s ease-out;
background: #00f;
}
.ease-in-out {
-webkit-transition: all 4s ease-in-out;
-moz-transition: all 4s ease-in-out;
-o-transition: all 4s ease-in-out;
transition: all 4s ease-in-out;
background: #ff0;
}
.linear {
-webkit-transition: all 4s linear;
-moz-transition: all 4s linear;
-o-transition: all 4s linear;
transition: all 4s linear;
background: #f0f;
}
.custom {
-webkit-transition: all 4s
cubic-bezier(1.000, 0.835, 0.000, 0.945);
-moz-transition: all 4s
cubic-bezier(1.000, 0.835, 0.000, 0.945);
-o-transition: all 4s
cubic-bezier(1.000, 0.835, 0.000, 0.945);
transition: all 4s
cubic-bezier(1.000, 0.835, 0.000, 0.945);
background: #0ff;
}
.negative {
-webkit-transition: all 4s
cubic-bezier(1.000, -0.530, 0.405, 1.425);
-moz-transition: all 4s
cubic-bezier(1.000, -0.530, 0.405, 1.425);
-o-transition: all 4s
cubic-bezier(1.000, -0.530, 0.405, 1.425);
transition: all 4s
cubic-bezier(1.000, -0.530, 0.405, 1.425);
background: #000;
color: white;
}
A simple implementation with images using the same code and concepts.
Hover over the pool table to for the balls to move
Animations allow specific changes to happen and specific times. In the example below I've manually guided the balls around the table to mimic an a pool shot.
Hover over the pool table to for the balls to move
Below is my code, I've omitted the vendor prefixes for the sake of brevity but remember to include all of them in your code.
.animations .pool_table:hover .cue.ani_ball {
animation: ballcue 5s linear;
}
.animations .pool_table:hover .ani_ball:nth-child(1) {
animation: ball1 5s linear;
}
.animations .pool_table:hover .ani_ball:nth-child(2) {
animation: ball2 5s linear;
}
@keyframes ball1 {
0% {top: 70px; left: 225px; transform: rotate(0deg);}
9% {top: 70px; left: 225px; transform: rotate(0deg);}
15% {top: -8px; left: 140px; transform: rotate(80deg);}
25% {top: 140px; left: -9px; transform: rotate(180deg);}
40% {top: 430px; left: 200px; transform: rotate(480deg);}
80% {top: -10px; left: 475px; transform: rotate(1280deg);}
100% {top: -10px; left: 475px; transform: rotate(1280deg);}
}
@keyframes ball2 {
0% {top: 110px; left: 270px; transform: rotate(0deg);}
9% {top: 110px; left: 270px; transform: rotate(0deg);}
15% {top: -8px; left: 320px; transform: rotate(80deg);}
50% {top: 440px; left: 475px; transform: rotate(880deg);}
100% {top: 440px; left: 475px; transform: rotate(880deg);}
}
@keyframes ballcue {
0% {top: 400px; left: 240px; transform: rotate(0deg);}
10% {top: 145px; left: 250px; transform: rotate(180deg);}
60% {top: 320px; left: 405px; transform: rotate(300deg);}
65% {top: 330px; left: 415px; transform: rotate(310deg);}
70% {top: 340px; left: 425px; transform: rotate(320deg);}
100% {top: 340px; left: 425px; transform: rotate(320deg);}
}
CSS3 allows both 2D and 3D transformations and making things as unique as a 3D rather simple and straight forward. I learned to create the box below from reading a blog post at http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/
Use your mouse or the arrow keys to manipulate the cube.
#experiment {
width: 800px;
margin: 100px auto;
-webkit-perspective: 800;
-webkit-perspective-origin:
50% 200px;
}
#cube {
position: relative;
margin: 0 auto;
height: 400px;
width: 400px;
-webkit-transition:
-webkit-transform 2s linear;
-webkit-transform-style:
preserve-3d;
}
#cube > div {
position: absolute;
height: 360px;
width: 360px;
padding: 20px;
border:
1px solid #555;
background-color:
rgba(50, 50, 50, 0.7);
}
#cube > div:first-child {
-webkit-transform:
rotateX(90deg)
translateZ(200px);
-moz-transform:
rotateX(90deg)
translateZ(200px);
}
#cube > div:nth-child(2) {
-webkit-transform:
translateZ(200px);
-moz-transform:
translateZ(200px);
}
#cube > div:nth-child(3) {
-webkit-transform:
rotateY(90deg)
translateZ(200px);
-moz-transform:
rotateY(90deg)
translateZ(200px);
}
#cube > div:nth-child(4) {
-webkit-transform:
rotateY(180deg)
translateZ(200px);
-moz-transform:
rotateY(180deg)
translateZ(200px);
}
#cube > div:nth-child(5) {
-webkit-transform:
rotateY(-90deg)
translateZ(200px);
-moz-transform:
rotateY(-90deg)
translateZ(200px);
}
#cube > div:nth-child(6) {
-webkit-transform:
rotateX(-90deg)
rotate(180deg)
translateZ(200px);
-moz-transform:
rotateX(-90deg)
rotate(180deg)
translateZ(200px);
}