Skip to content

Instantly share code, notes, and snippets.

@davidyeiser

davidyeiser/css3-text-explosion.css

Created March 8, 2011 05:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save davidyeiser/859906 to your computer and use it in GitHub Desktop.
Save davidyeiser/859906 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
css3-text-explosion.css
/*
STUFF'S GONNA 'SPLODE
---------------------
The following CSS enables the exploding effect on the input label.
(Only seen on modern browsers.)
Context: http://gopotluck.com/
Related tutorial: http://designintellection.com/lab/exploding-text/
*/
#email-signup-label .char1,
#email-signup-label .char2,
#email-signup-label .char3,
#email-signup-label .char4,
#email-signup-label .char5,
#email-signup-label .char6,
#email-signup-label .char7,
#email-signup-label .char8,
#email-signup-label .char9,
#email-signup-label .char10,
#email-signup-label .char11,
#email-signup-label .char12,
#email-signup-label .char13,
#email-signup-label .char14,
#email-signup-label .char15,
#email-signup-label .char16,
#email-signup-label .char17,
#email-signup-label .char18,
#email-signup-label .char19,
#email-signup-label .char20,
#email-signup-label .char21,
#email-signup-label .char22,
#email-signup-label .char23,
#email-signup-label .char24,
#email-signup-label .char25,
#email-signup-label .char26,
#email-signup-label .char27,
#email-signup-label .char28,
#email-signup-label .char29,
#email-signup-label .char30,
#email-signup-label .char31,
#email-signup-label .char32,
#email-signup-label .char33,
#email-signup-label .char34,
#email-signup-label .char35,
#email-signup-label .char36,
#email-signup-label .char37,
#email-signup-label .char38,
#email-signup-label .char39,
#email-signup-label .char40,
#email-signup-label .char41,
#email-signup-label .char42,
#email-signup-label .char43,
#email-signup-label .char44,
#email-signup-label .char45,
#email-signup-label .char46,
#email-signup-label .char47,
#email-signup-label .char48
{
/* We need a non-inline display for the translation to work. */
display:inline-block;
/* Prepare opacity for reduction. */
opacity:1;
/* Prepare static state for translation.
(translate3d enables hardware acceleration for webkit. Or something like that.) */
-webkit-transform: translate3d( 0, 0, 0 );
-moz-transform: translate( 0, 0 );
transform: translate( 0, 0 );
/* Add transition animations on all. Though it's only working on webkit.
(I didn't spend much time investigating why.) */
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;
}
#email-signup-label .char8,
#email-signup-label .char12,
#email-signup-label .char18,
#email-signup-label .char26,
#email-signup-label .char33,
#email-signup-label .char35,
#email-signup-label .char40
{
/* Because we set the individual characters as display:inline-block
we need to manually create our spaces. */
width:5px;
}
#email-signup-label:hover .char1,
#email-signup-label:hover .char2,
#email-signup-label:hover .char3,
#email-signup-label:hover .char4,
#email-signup-label:hover .char5,
#email-signup-label:hover .char6,
#email-signup-label:hover .char7,
#email-signup-label:hover .char8,
#email-signup-label:hover .char9,
#email-signup-label:hover .char10,
#email-signup-label:hover .char11,
#email-signup-label:hover .char12,
#email-signup-label:hover .char13,
#email-signup-label:hover .char14,
#email-signup-label:hover .char15,
#email-signup-label:hover .char16,
#email-signup-label:hover .char17,
#email-signup-label:hover .char19,
#email-signup-label:hover .char20,
#email-signup-label:hover .char21,
#email-signup-label:hover .char22,
#email-signup-label:hover .char23,
#email-signup-label:hover .char24,
#email-signup-label:hover .char25,
#email-signup-label:hover .char26,
#email-signup-label:hover .char27,
#email-signup-label:hover .char28,
#email-signup-label:hover .char29,
#email-signup-label:hover .char30,
#email-signup-label:hover .char31,
#email-signup-label:hover .char32,
#email-signup-label:hover .char33,
#email-signup-label:hover .char34,
#email-signup-label:hover .char35,
#email-signup-label:hover .char36,
#email-signup-label:hover .char37,
#email-signup-label:hover .char38,
#email-signup-label:hover .char39,
#email-signup-label:hover .char40,
#email-signup-label:hover .char41,
#email-signup-label:hover .char42,
#email-signup-label:hover .char43,
#email-signup-label:hover .char44,
#email-signup-label:hover .char45,
#email-signup-label:hover .char46,
#email-signup-label:hover .char47,
#email-signup-label:hover .char48
{
/* Shared properties. */
opacity:0.5;
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;
}
/* The .char__ classes below are the specific
coordinates for each character. On hover
they are activated and each letter is
transitioned to its new coordinates. They
return to their default coordinates when
the :hover pseudo-class is deactivated. Do
you know how long it took me to format it
like this?*
You're welcome.
Hat tip: http://dropshado.ws/post/2054719546/css-formatting
*/
#email-signup-label:hover .char1
{
-webkit-transform: translate3d( -100px, -100px, 0 );
-moz-transform: translate( -100px, -100px );
transform: translate( -100px, -100px );
}
#email-signup-label:hover .char2
{
-webkit-transform: translate3d( -60px, -100px, 0 );
-moz-transform: translate( -60px, -100px );
transform: translate( -60px, -100px );
}
#email-signup-label:hover .char3
{
-webkit-transform: translate3d( 100px, -80px, 0 );
-moz-transform: translate( 100px, -80px );
transform: translate( 100px, -80px );
}
#email-signup-label:hover .char4
{
-webkit-transform: translate3d( -100px, 100px, 0 );
-moz-transform: translate( -100px, 100px );
transform: translate( -100px, 100px );
}
#email-signup-label:hover .char5
{
-webkit-transform: translate3d( -130px, 70px, 0 );
-moz-transform: translate( -130px, 70px );
transform: translate( -130px, 70px );
}
#email-signup-label:hover .char6
{
-webkit-transform: translate3d( -30px, -100px, 0 );
-moz-transform: translate( -30px, -100px );
transform: translate( -30px, -100px );
}
#email-signup-label:hover .char7
{
-webkit-transform: translate3d( 140px, -100px, 0 );
-moz-transform: translate( 140px, -100px );
transform: translate( 140px, -100px );
}
#email-signup-label:hover .char8
{
-webkit-transform: translate3d( -20px, -160px, 0 );
-moz-transform: translate( -20px, -160px );
transform: translate( -20px, -160px );
}
#email-signup-label:hover .char9
{
-webkit-transform: translate3d( -100px, 120px, 0 );
-moz-transform: translate( -100px, 120px );
transform: translate( -100px, 120px );
}
#email-signup-label:hover .char10
{
-webkit-transform: translate3d( 10px, 150px, 0 );
-moz-transform: translate( 10px, 150px );
transform: translate( 10px, 150px );
}
#email-signup-label:hover .char11
{
-webkit-transform: translate3d( 30px, 120px, 0 );
-moz-transform: translate( 30px, 120px );
transform: translate( 30px, 120px );
}
#email-signup-label:hover .char12
{
-webkit-transform: translate3d( 20px, -80px, 0 );
-moz-transform: translate( 20px, -80px );
transform: translate( 20px, -80px );
}
#email-signup-label:hover .char13
{
-webkit-transform: translate3d( -50px, -150px, 0 );
-moz-transform: translate( -50px, -150px );
transform: translate( -50px, -150px );
}
#email-signup-label:hover .char14
{
-webkit-transform: translate3d( -130px, 70px, 0 );
-moz-transform: translate( -130px, 70px );
transform: translate( -130px, 70px );
}
#email-signup-label:hover .char15
{
-webkit-transform: translate3d( 10px, -125px, 0 );
-moz-transform: translate( 10px, -125px );
transform: translate( 10px, -125px );
}
#email-signup-label:hover .char16
{
-webkit-transform: translate3d( -140px, -100px, 0 );
-moz-transform: translate( -140px, -100px );
transform: translate( -140px, -100px );
}
#email-signup-label:hover .char17
{
-webkit-transform: translate3d( 20px, -70px, 0 );
-moz-transform: translate( 20px, -70px );
transform: translate( 20px, -70px );
}
#email-signup-label:hover .char18
{
-webkit-transform: translate3d( -100px, 120px, 0 );
-moz-transform: translate( -100px, 120px );
transform: translate( -100px, 120px );
}
#email-signup-label:hover .char19
{
-webkit-transform: translate3d( -50px, -200px, 0 );
-moz-transform: translate( -50px, -200px );
transform: translate( -50px, -200px );
}
#email-signup-label:hover .char20
{
-webkit-transform: translate3d( 35px, -160px, 0 );
-moz-transform: translate( 35px, -160px );
transform: translate( 35px, -160px );
}
#email-signup-label:hover .char21
{
-webkit-transform: translate3d( -35px, 175px, 0 );
-moz-transform: translate( -35px, 175px );
transform: translate( -35px, 175px );
}
#email-signup-label:hover .char22
{
-webkit-transform: translate3d( -70px, -50px, 0 );
-moz-transform: translate( -70px, -50px );
transform: translate( -70px, -50px );
}
#email-signup-label:hover .char23
{
-webkit-transform: translate3d( -35px, -100px, 0 );
-moz-transform: translate( -35px, -100px );
transform: translate( -35px, -100px );
}
#email-signup-label:hover .char24
{
-webkit-transform: translate3d( 20px, 140px, 0 );
-moz-transform: translate( 20px, 140px );
transform: translate( 20px, 140px );
}
#email-signup-label:hover .char25
{
-webkit-transform: translate3d( 30px, -240px, 0 );
-moz-transform: translate( 30px, -240px );
transform: translate( 30px, -240px );
}
#email-signup-label:hover .char26
{
-webkit-transform: translate3d( -90px, -30px, 0 );
-moz-transform: translate( -90px, -30px );
transform: translate( -90px, -30px );
}
#email-signup-label:hover .char27
{
-webkit-transform: translate3d( 15px, -125px, 0 );
-moz-transform: translate( 15px, -125px );
transform: translate( 15px, -125px );
}
#email-signup-label:hover .char28
{
-webkit-transform: translate3d( 40px, 210px, 0 );
-moz-transform: translate( 40px, 210px );
transform: translate( 40px, 210px );
}
#email-signup-label:hover .char29
{
-webkit-transform: translate3d( -140px, 70px, 0 );
-moz-transform: translate( -140px, 70px );
transform: translate( -140px, 70px );
}
#email-signup-label:hover .char30
{
-webkit-transform: translate3d( -18px, 230px, 0 );
-moz-transform: translate( -18px, 230px );
transform: translate( -18px, 230px );
}
#email-signup-label:hover .char31
{
-webkit-transform: translate3d( 20px, -100px, 0 );
-moz-transform: translate( 20px, -100px );
transform: translate( 20px, -100px );
}
#email-signup-label:hover .char32
{
-webkit-transform: translate3d( -40px, -70px, 0 );
-moz-transform: translate( -40px, -70px );
transform: translate( -40px, -70px );
}
#email-signup-label:hover .char33
{
-webkit-transform: translate3d( -20px, -140px, 0 );
-moz-transform: translate( -20px, -140px );
transform: translate( -20px, -140px );
}
#email-signup-label:hover .char34
{
-webkit-transform: translate3d( 70px, 140px, 0 );
-moz-transform: translate( 70px, 140px );
transform: translate( 70px, 140px );
}
#email-signup-label:hover .char35
{
-webkit-transform: translate3d( -20px, 90px, 0 );
-moz-transform: translate( -20px, 90px );
transform: translate( -20px, 90px );
}
#email-signup-label:hover .char36
{
-webkit-transform: translate3d( 120px, 100px, 0 );
-moz-transform: translate( 120px, 100px );
transform: translate( 120px, 100px );
}
#email-signup-label:hover .char37
{
-webkit-transform: translate3d( -100px, -120px, 0 );
-moz-transform: translate( -100px, -120px );
transform: translate( -100px, -120px );
}
#email-signup-label:hover .char38
{
-webkit-transform: translate3d( 50px, -80px, 0 );
-moz-transform: translate( 50px, -80px );
transform: translate( 50px, -80px );
}
#email-signup-label:hover .char39
{
-webkit-transform: translate3d( 50px, -180px, 0 );
-moz-transform: translate( 50px, -180px );
transform: translate( 50px, -180px );
}
#email-signup-label:hover .char40
{
-webkit-transform: translate3d( -90px, 120px, 0 );
-moz-transform: translate( -90px, 120px );
transform: translate( -90px, 120px );
}
#email-signup-label:hover .char41
{
-webkit-transform: translate3d( 10px, -80px, 0 );
-moz-transform: translate( 10px, -80px );
transform: translate( 10px, -80px );
}
#email-signup-label:hover .char42
{
-webkit-transform: translate3d( -100px, -100px, 0 );
-moz-transform: translate( -100px, -100px );
transform: translate( -100px, -100px );
}
#email-signup-label:hover .char43
{
-webkit-transform: translate3d( -140px, 100px, 0 );
-moz-transform: translate( -140px, 100px );
transform: translate( -140px, 100px );
}
#email-signup-label:hover .char44
{
-webkit-transform: translate3d( -30px, 110px, 0 );
-moz-transform: translate( -30px, 110px );
transform: translate( -30px, 110px );
}
#email-signup-label:hover .char45
{
-webkit-transform: translate3d( 120px, 160px, 0 );
-moz-transform: translate( 120px, 160px );
transform: translate( 120px, 160px );
}
#email-signup-label:hover .char46
{
-webkit-transform: translate3d( 30px, -210px, 0 );
-moz-transform: translate( 30px, -210px );
transform: translate( 30px, -210px );
}
#email-signup-label:hover .char47
{
-webkit-transform: translate3d( -90px, -170px, 0 );
-moz-transform: translate( -90px, -170px );
transform: translate( -90px, -170px );
}
#email-signup-label:hover .char48
{
-webkit-transform: translate3d( -10px, 90px, 0 );
-moz-transform: translate( -10px, 90px );
transform: translate( -10px, 90px );
}
/* *Actually it wasn't that long. */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment