juanbrujo

/**
 * Diego's Parallax - Test 1
 */

body {
	background: #222;
}
#container {
	position: absolute; 
	top: 50%; 

juanbrujo

/**
 * Diego's Parallax - Test 1
 */

body {
	background: #222;
}
#container {
	position: absolute; 
	top: 50%; 

juanbrujo

/*
CSS3 oblique rotation
© CSSLab.cl
*/
html {min-height: 100%;}
body {
	background-image: linear-gradient(bottom, rgb(48,48,48) 30%, rgb(5,5,5) 47%);
}

@-webkit-keyframes girando {				

juanbrujo

/**
 * Heart beat - test 1
 */
body 		{background: #222;}
@-webkit-keyframes girando {
	0% 	{-webkit-transform: scale(0.8);}
	50% 	{-webkit-transform: scale(1.2);}
	100% 	{-webkit-transform: scale(0.8);}
}
img {

juanbrujo

/**
 * Heart beat - test 1
 */
body 		{background: #222;}
@-webkit-keyframes girando {
	0% 	{-webkit-transform: scale(0.8);}
	50% 	{-webkit-transform: scale(1.2);}
	100% 	{-webkit-transform: scale(0.8);}
}
img {

juanbrujo

/**
 * Boton y Flecha con CSS3
 */
html {min-height:100%;}
body {background:#ccc; background: linear-gradient(90deg, #ccc, #999); font-family:Tahoma, sans-serif; text-shadow: #000 0 0 5px}
.boton {
	display: block;
	margin: 150px auto;
	width: 190px;
	line-height: 35px;

juanbrujo

/**
* Flecha roja sobre cuadrado gris con alpha
*/
body {background: url('http://a0.twimg.com/profile_background_images/410163542/tinas2.jpg') no-repeat;}
#cuadrado {
	background: rgba(0,0,0,0.3);
	width: 240px;
	height: 240px;
	padding-top: 30px;
	margin: 50px auto;

juanbrujo

/*
CSS3 oblique rotation
© CSSLab.cl
http://www.csslab.cl/2012/04/17/experimento-rotacion-oblicua-con-css3/
*/
html {min-height: 100%;}
body {
	background-image: linear-gradient(bottom, rgb(48,48,48) 30%, rgb(5,5,5) 47%);
}

juanbrujo

/**
 * CSS3 Vertical Rotation
 */
html {min-height: 100%;}
body {
	background-image: linear-gradient(bottom, rgb(48,48,48) 30%, rgb(5,5,5) 47%);
}
@-webkit-keyframes girando {
	from,20%	{transform: rotateX(0deg);}
	30%,40%		{transform: rotateX(90deg);}

juanbrujo

/**
 * The first commented line is your dabblet’s title
 */


body 	{font-family: georgia, serif; background: #ccc;}

@-webkit-keyframes girando {
	from,20% 	{ -webkit-transform: rotateY(0deg);   }			
	30%,40%  	{ -webkit-transform: rotateY(90deg);  }