Este código permite resaltar aquellos vínculos que se van a abrir en ventana nueva. Se utilizan pseudo-selectores para personalizar el aspecto de este tipo de links.
a[target="_blank"]:before,
a[target="new"]:before {
margin:0 5px 0 0;
padding:1px;
color:#666;
background:#EEE;
font:13px "Zapf Dingbats";
content: "\279C";
}
Las nuevas características de CSS nos permiten añadir efectos de animación a la mayoría de elementos HTML, sin necesidad de Javascript o Flash. Por el momento, es compatible con los navegadores WebKit -incluyendo Safari, Safari para iOS y Chrome- y Firefox. Está previsto que Internet Explorer, a partir de su versión 10, también tenga soporte para este tipo de animaciones. Debido a que la tecnología es relativamente nueva, se debe añadir un prefijo con el motor del navegador. En nuestro caso, los ejemplos los realizaremos con los prefijos webkit y moz.
Las animaciones se apoyan en el uso de fotogramas clave -al igual que ocurre con Flash- para crear estados y realizar una transición entre ellos. Así para una animación de una única iteración crearíamos un punto de inicio y un punto final. La animación transcurriría entre estos dos puntos o estados.
PROPIEDADES
Existe una versión corta, denominada "Shorthand Property" que combina 6 de las propiedades en una sóla. Su sintaxis es:
[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]
Para lograr una animación debemos conectar una animación a un elemento en la CSS. Aunque hasta el momento parezca que es un proceso complejo, vamos a realizar un primer ejemplo con una caja, y veremos que en realidad es bastante sencillo:
<div class="caja1"></div>
Ahora le asignamos el siguiente CSS:
.caja1{
width:100px;
height:100px;
background:#FF0000;
position:absolute;
top:0;
}
Ahora establecemos una animación que denominaremos "mover_caja":
/* Para navegadores webkit */
@-webkit-keyframes mover_caja{
0%{left:90%;}
50%{left:10%;}
100%{left:90%;}
}
/* Para Firefox */
@-moz-keyframes mover_caja{
0%{left:90%;}
50%{left:10%;}
100%{left:90%;}
}
Los fotogramas clave que hemos establecido en la animación están en el 0% (inicio), el 50% (la mitad) y el 100% (al final). Las propiedades que hemos establecido en estos fotogramas clave son las diferentes posiciones. Nuestro último paso es "enganchar" la animación con el objeto que queramos. Vamos a aplicarlo a "caja1".
.caja1{
-webkit-animation:mover_caja 5s infinite;
-moz-animation:mover_caja 5s infinite;
}
Ver ejemplo en funcionamiento » »
En el siguiente ejemplo vamos a realizar una animación rotando una capa y escalándola. El ejemplo completo sería:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 Animation 2</title>
<style type="text/css">
#contenido{
width:700px;
margin:0 auto;
padding:50px;
position:relative;
background:#FFF;
}
.circulo {
display:table-cell;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
height:100px;
width:100px;
background:#dedede;
text-align:center;
vertical-align:middle;
}
.circulo span{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
/* Para navegadores webkit */
@-webkit-keyframes rotar
{
0% {-webkit-transform:scale(1) rotate(0deg);}
50% {-webkit-transform:scale(1.5) rotate(180deg);}
100% {-webkit-transform:scale(1) rotate(360deg);}
}
/* Para firefox */
@-moz-keyframes rotar
{
0% {-moz-transform:scale(1) rotate(0deg);}
50% {-moz-transform:scale(1.5) rotate(180deg);}
100% {-moz-transform:scale(1) rotate(360deg);}
}
.circulo
{
-webkit-animation:rotar 4s infinite;
-moz-animation:rotar 4s infinite;
}
</style>
</head>
<body>
<div id="contenido">
<div class="circulo"><span>webintenta</span></div>
</div>
</body>
</html>
Ver ejemplo en funcionamiento » »
El siguiente ejemplo muestra cómo realizar una transición entre colores.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 Animation 3</title>
<style type="text/css">
#contenido{
width:700px;
margin:0 auto;
padding:50px;
position:relative;
background:#FFF;
}
.circulo {
display:table-cell;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
height:100px;
width:100px;
background:#dedede;
text-align:center;
vertical-align:middle;
}
/* Para navegadores webkit */
@-webkit-keyframes cambiar_color
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
/* Para firefox */
@-moz-keyframes cambiar_color
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
.circulo
{
-webkit-animation:cambiar_color 8s linear 1;
-moz-animation:cambiar_color 8s linear 1;
}
</style>
</head>
<body>
<div id="contenido">
<div class="circulo"></div>
</div>
</body>
</html>
Stitches permite generar sprites con su respectiva hoja de estilos simplemente arrastrando dentro de un espacio reservado para ello las distintas imágenes o iconos que queremos que formen parte de dicho sprite. Una forma muy sencilla de minimizar las peticiones HTTP de nuestro sitio web.
Clase aplicada al contenedor de los elementos flotantes:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
El siguiente código sirve para comprimir varios archivos CSS en único fichero. Se toman los distintos archivos css y se eliminan comentarios, espacios, tabulaciones, saltos de línea, etc, sirviendo un único fichero. De este modo, además de reducir el tamaño, reducimos el número de peticiones HTTP al servidor, lo que nos ayudará a optimizar la carga de nuestro sitio web.
header('Content-type: text/css');
ob_start("compress");
function compress($buffer) {
/* remove comments */
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
/* remove tabs, spaces, newlines, etc. */
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer);
return $buffer;
}
/* your css files */
include('master.css');
include('typography.css');
include('grid.css');
include('print.css');
include('handheld.css');
ob_end_flush();