Portafolio del ilustrador y director de arte brasileño, aunque afincado en Madrid, Gabriel Da Silva.
Selección de fotografías en blanco y negro de uno de los fotógrafos más conocidos de las últimas décadas, Helmut Newton.
Fotógrafa afincada en Londres con un estilo que combina la moda, el humor y la estética retro.
Nacida en Inglaterra y criada en Canadá, Jody Rogac en la actualidad vive y trabaja en Brooklyn. Sus trabajo ha obtenido diversos galardones.
CSS3 nos permite rotar letras, pero es bastante complicado organizar cada letra a lo largo de un trazado curvo. Arctext.js es un plugin de jQuery que nos permite hacer exactamente eso de un modo sencillo. Basado en Lettering.js, calcula la rotación correcta de cada letra y distribuye los caracteresm de un modo equidistante en el arco.
CSSrefresh es un pequeño archivo de javascript que controla los archivos CSS incluidos en una página Web. En el momento en que se guarda un archivo CSS, es capaz de implementar los cambios sobre la web, sin tener que actualizar el navegador.
Su uso es muy sencillo, basta con incluir la librería después de los ficheros CSS que deseemos controlar. Por ejemplo:
<head>
<link rel="stylesheet" type="text/css" href="css/estilos.css" />
<script type="text/javascript" src="js/cssrefresh.js"></script>
</head>
Con el siguiente fragmento de código en CSS podemos voltear una imagen. Imagina el caso de que necesites una flecha hacia la derecha y otra hacia la izquierda. Con este sencillo truco podríamos tener la solución con una sola imagen y por tanto una única petición HTTP al servidor.
img.volt_hoz{
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
Del mismo modo puede hacerse para voltear verticalmente la imagen:
img.volt_ver {
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
}
Completa lista de hacks para poder actuar específicamente sobre los navegadores que deseemos.
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
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.
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();
Interesante aplicación de CSS3 para, mediante el uso de sucesivas sombras de texto, obtener un texto en 3D.
h1 {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
ImgToCSS es una aplicación web que permite convertir una imagen a HTML/CSS. Puede ser útil en algún caso, como en el diseño de un newsletter para evitar el bloqueo de las imágenes.
