10 Propiedades de CSS3 con las que Necesitas estar Familizarizado

Spanish (Español) translation by Óscar Salas Fernández (you can also view the original English article)

Ya cubrimos los treinta selectores de CSS que todos deberíamos memorizar; pero qué hay con las nuevas propiedades de CSS3? A pesar de que la mayoría de ellas necesitan un prefijo específico del vendor, ya las puedes empezar a utilizar en tus proyectos. De hecho, es alentado!

La clave es determinar primero si estás de acuerdo con una pequeña diferencia de presentación de browser a browser. Estás de acuerdo, digamos, con IE mostrando las esquinas a 90 grados en lugar de redondeadas? Es tu decisión. De todas maneras, siempre recuerda que los sitios web no necesitan verse igual en cada navegador. En la conclusión de este artículo, vamos a trabajar en un proyecto final divertido.

border-radius

Fácilmente la propiedad CSS3 más popular en el grupo, border-radius fue una especie de propiedad insignia de CSS3. Mientras que muchos diseñadores seguían aterrorizados con la idea de que una interfase podría ser mostrada de diferente manera de browser a browser, un pequeño paso, como esquinas redondeadas, fue una manera fácil de atraerlos!

La ironía es que estamos perfectamente bien con la idea de proveer una visualización alternativa para los browsers móviles. Extrañamente, sin embargo, algunos no sienten lo mismo cuando se trata de browsers de escritorio.

1	-webkit-border-radius: 4px;
2	-moz-border-radius: 4px;
3	border-radius: 4px;

Nota que tanto Safari 5 como IE9 implementan la sintaxis oficial de 'border-radius'.

Círculos

Algunos lectores quizás no estén al tanto de que pueden crear círculos con esta propiedad.

1	-moz-border-radius: 50px;
2	-webkit-border-radius: 50px;
3	border-radius: 50px;

...Y, si queremos pasarlo bien, también podemos aprovechar el Modelo de Caja Flexible (detallado en #8) para centrar el texto dentro del círculo tanto vertical como horizontalmente. Requiere un poco de código, pero sólo debido a la necesidad de compensar a varios proveedores.

display: -moz-box;
display: -webkit-box;
display: box;

-moz-box-orient: horizontal; /* the default, so not really necessary here */
-webkit-box-orient: horizontal;
box-orient: horizontal;

-moz-box-pack: center;
-moz-box-align: center;

-webkit-box-pack: center;
-webkit-box-align: center;

box-pack: center;
box-align: center;

2. Box-Shadow

A continuación, tenemos al ubicuo box-shadow, el cual te permite aplicar profundidad a tus elementos inmediatamente. ¡No seas demasiado insufrible con los valores que establezcas!

1	-webkit-box-shadow: 1px 1px 3px #292929;
2	-moz-box-shadow: 1px 1px 3px #292929;
3	box-shadow: 1px 1px 3px #292929;

box-shadow reconoce cuatro parámetros:

desplazar-x
desplazar-y
difuminado
color de la sombra

Ahora, de lo que muchos no se dan cuenta es de que puedes aplicar varios box-shadows a la vez. Esto puede llevar a algunos efectos realmente interesantes. En la siguiente captura de pantalla, uso una sombra azul y verde para magnificar cada sombra.

1	-webkit-box-shadow: 1px 1px 3px green, -1px -1px blue;
2	-moz-box-shadow: 1px 1px 3px green,-1px -1px blue;
3	box-shadow: 1px 1px 3px green, -1px -1px blue;

Sombras Inteligentes

Aplicando sombras a las pseudo-clases ::before y ::after, podemos crear algunas perspectivas realmente interesantes. Aquí hay una para que comiences:

El HTML

1	<div class="box">
2	<img src="tuts.jpg" alt="Tuts" />
3	</div>

El CSS

.box:after {
   content: '';
   position: absolute;

   z-index: -1; /* hide shadow behind image */

   /* The Shadow */
   -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
   -box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);                

   width: 70%; 
   left: 15%; /* one half of the remaining 30% (see width above) */

   height: 100px;
   bottom:  0;
}

¿Quieres más efectos geniales? Consulta este tutorial en Nettuts+.

3. text-shadow

text-shadow es una de las pocas propiedades de CSS3 en la que podemos omitir el uso del prefijo del proveedor. Bastante similar a box-shadow, debe ser aplicado al texto, y admite los mismos cuatro parámetros:

offset-x
offset-y
difuminado
color de la sombra

1	h1 {
2	text-shadow: 0 1px 0 white;
3	color: #292929;
4	}

Text-Outline

De nuevo, al igual que su hermano, box-shadow, podemos aplicar múltiples sombras, utilizando una coma como separador. Por ejemplo, digamos que queremos crear un efecto de borrador para el texto. Aunque webkit ofrece un efecto stroke, podemos llegar a más navegadores utilizando el siguiente método (aunque no tan bonito):

body { background: white; }

h1 {
   text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;
   color: white;
}

4. Text-Stroke

Ten cuidado con este método. Sólo webkit, durante los últimos años, lo admite (Safari, Chrome, iPhone). De hecho, aunque podría estar equivocado, `text-stroke` aún no es parte de la especificación CSS3. En este caso, con texto en blanco, Firefox mostrará una página aparentemente en blanco. Puedes o utilizar la detección de funciones JavaScript para evitar esto o asegurarte de que el color del texto base no es el mismo que el del fondo del cuerpo.

1	h1 {
2	-webkit-text-stroke: 3px black;
3	color: white;
4	}

Detectar Funcionalidades

¿Cómo podemos proporcionar un lote de estilo para, por ejemplo, Firefox, y otro lote para Safari o Chrome? Una solución es usar detectar funcionalidades.

Con detectar funcionalidades, podemos usar JavaScript para comprobar si cierta propiedad está disponible. Si no lo está, preparamos un fallback.

Vamos a consultar atrás en el punto de text-stroke. Vamos a establecer un fallback de color negro para los navegadores que no admiten esta propiedad (todos menos webkit de momento).

var h1 = document.createElement('h1');
if ( !( 'webkitTextStroke' in h1.style ) ) {
   var heading = document.getElementsByTagName('h1')[0];
   heading.style.color = 'black';
}

Primero, creamos un elemento h1 simulado . Después, realizamos una búsqueda completa para determinar si la propiedad -webkit-text-stroke está disponible para ese elemento, a través del atributo style. Si no lo está, cogeremos el encabezado Hello Readers, y establecemos su color de blanco a negro.

Por favor date cuenta de que estamos siendo genéricos aquí. Si necesitas reemplazar varias etiquetas h1 en la página, necesitarás usar una sentencia while para filtar a través de cada encabezado, y actualizar el estilo o el nombre de la clase, debidamente.

Además estamos probando sólo para webkit, cuando es posible que otros navegadores con el tiempo admitan la propiedad text-stroke también. Recuerda eso.

Si quieres una solución detectar-funcionalidad más completa, consulta Modernizr.

5. Múltiples Fondos

La propiedad background ha sido ajustada para permitir múltiples fondos en CSS3.

Vamos a crear un ejemplo tonto, simplemente como una prueba de concepto. Debido a la falta de imágenes adecuadas cerca, voy a utilizar dos imágenes tutoriales como nuestros fondos. Por supuesto, en una aplicación del mundo real, puede que utilices una textura y, tal vez, un degradado para tus fondos.

1	.box {
2	background: url(image/path.jpg) 0 0 no-repeat,
3	url(image2/path.jpg) 100% 0 no-repeat;
4	}

Arriba, usando una coma como separador, estamos haciendo referencia a dos imágenes de fondo distintas. Observa cómo, en el primer caso, se coloca en la posición superior izquierda (0 0), y, en el segundo, en la posición superior derecha (100% 0).

Asegúrate de proporcionar un fallback a los navegadores que no ofrecen soporte para varios fondos. Se saltarán la propiedad por completo, dejando tu fondo en blanco.

Compensación para Navegadores Antiguos

Para agregar una sola imagen de fondo para los navegadores antiguos, como IE7, declarar la propiedad de background dos veces: primero para los navegadores antiguos, y segundo como una anulación. Alternativamente, podrías, de nuevo, usar Modernizr.

.box {
/* fallback */
background: url(image/path.jpg) no-repeat;

/* modern browsers */
background: url(image/path.jpg) 0 0 no-repeat,
 url(image2/path.jpg) 100% 0 no-repeat;
}

6. background-size

Hasta hace poco tiempo, nos vimos obligados a usar técnicas solapadas para permitir imágenes de fondo redimensionables.

1	background: url(path/to/image.jpg) no-repeat;
2	background-size: 100% 100%;

El código anterior dirigirá la imagen de fondo para ocupar todo el espacio disponible. Como ejemplo, ¿y si queremos que una imagen en particular ocupe todo el fondo del elemento del cuerpo, independientemente del ancho de la ventana del navegador?

body, html { height: 100%; }

body {
 background: url(path/to/image.jpg) no-repeat;
 background-size: 100% 100%;
}

Eso es todo al respecto. La propiedad background-size admitirá dos parámetros: las anchuras x e y, respectivamente.

Aunque las versiones más recientes de Chrome y Safari admiten background-size de forma nativa, todavía necesitamos usar prefijos de proveedor para los navegadores antiguos.

body {
 background: url(path/to/image.jpg) no-repeat;
 -moz-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
 background-size: 100% 100%;
}

Ver Demo

7. text-overflow

Originalmente desarrollada por Internet Explorer, la propiedad text-overflow puede aceptar dos valores:

abreviar
elipsis

Esta propiedad se puede utilizar para cortar el texto que exceda su contenedor, mientras que todavía proporciona un poco de retroinformación para el usuario, como una elipsis.

¿Sabías? ¿Internet Explorer ha proporcionado soporte para esta propiedad desde IE6? ¡Ellos lo crearon!

.box {
   -o-text-overflow: ellipsis;
   text-overflow:ellipsis;

   overflow:hidden;
   white-space:nowrap;

   border: 1px solid black;
   width: 400px;
   padding: 20px;

   cursor: pointer;
}

En este punto, puedes considerar mostrar la totalidad del texto cuando un usuario se sitúa sobre el cuadro.

#box:hover {
  white-space: normal;
  color: rgba(0,0,0,1);
  background: #e3e3e3;
  border: 1px solid #666;
}

Un poco extraño (a menos que me equivoque), no parece ser una manera de restablecer la propiedad text-overflow, o de "apagarla". Para imitar esta funcionalidad "off", en :hover, podemos configurar la propiedad white-space de nuevo a normal. Esto funciona, porque text-overflow depende de esto para funcionar correctamente.

¿Sabías? También puedes especificar tu propia cadena, que debería usarse en lugar de la elipsis. Haciendo eso se renderizará la cadena para representar el texto recortado.

8. Modelo de Caja Flexible

El Modelo de Caja Flexible, nos permitirá finalmente alejarnos de esos desagradables flotadores. Aunque se necesita un poco de trabajo para hacerte en tu cabeza con las nuevas propiedades, una vez que lo hagas, todo debería tener sentido.

Vamos a construir una rápida demo, y a crear un sencillo formato a dos columnas.

<div id="container">

 <div id="main"> Main content here </div>
 <aside> Aside content here </aside>

</div>

Ahora para el CSS: primero necesitamos dar instrucciones al contenedor para ser tratado como una caja. Además aplicaré una anchura y altura genérica, puesto que no tenemos ningún contenido real en juego.

 #container {
    width: 960px;
    height: 500px; /* just for demo */

    background: #e3e3e3;
    margin: auto;

    display: -moz-box;
    display: -webkit-box;
    display: box;

A continuación, vamos a aplicar, para la demo, colores de fondo únicos al #main div, y al aside.

#main { 
   background: yellow;
}   

aside {
   background: red;
}

En este punto, no hay mucho que ver.

Una cosa que vale la pena notar, sin embargo, es que, cuando se establece para mostrar: modo de cuadro, los elementos secundarios ocuparán todo el espacio vertical; Este es el valor predeterminado de alineación de cuadro: estiramiento.

Observa lo que ocurre cuando establecemos específicamente una anchura en el área de contenido #main.

1	#main {
2	background: yellow;
3	width: 800px;
4	}

Bueno, eso está un poco mejor, pero todavía tenemos este problema donde el aside no está ocupando todo el espacio restante. Podemos arreglar esto usando la nueva propiedad box-flex.

box-flex da instrucciones al elemento para que ocupe todo el espacio disponible.

 aside { 
    display: block; /* cause is HTML5 element */
    background: red;

   /* take up all available space */
    -moz-box-flex: 1; 
    -webkit-box-flex: 1;
    box-flex: 1; 
 }

Con esta propiedad en su lugar, independientemente del ancho del área de contenido #main, el aside consumirá todas las especificaciones de espacio disponible. Incluso mejor, no tienes que preocuparte de los problemas de esos fastidiosos flotadores, como los elementos que caen por debajo del área de contenido principal.

Aquí sólo hemos rascado la superficie. Consulta el excelente artículo de Paul Irish para más información. Además, ten cuidado cuando uses este método, ya que no está totalmente admitido, por supuesto, en los navegadores antiguos. En esos casos, puedes usar detección de funcionalidades o Modernizr para detectar soporte, y proporcionar los fallbacks necesarios.

9. Resize

Sólo disponible, a partir de Firefox 4 y Safari 3, la propiedad resize -- parte del módulo CSS3 UI -- te permite especificar cómo redimensionar una zona de texto.

1	<textarea name="elem" id="elem" rows="5" cols="50"></textarea>

Observa que, por defecto, los navegadores webkit y Firefox 4 permiten a las zonas de texto ser redimensionadas, tanto vertical como horizontalmente.

textarea {
   -moz-resize: vertical;
   -webkit-resize: vertical;
   resize: vertical;
}

Valores Posibles

ambos: Redimensionar vertical y horizontalmente.
horizontal: Limita el redimensionado horizontalmente.
vertical: Limita el redimensionado verticalmente.
ninguno: Deshabilita el redimensionado

10. Transición

Quizás la incorporación más excitante de CSS3 es la capacidad de aplicar animaciones a elementos, sin el uso de JavaScript.

Aunque parece que el condenado IE9 no admitirá transiciones CSS, eso sin duda no significa que no deberías usarlas. La clave es mejorar.

Vamos a imitar el efecto común, donde, una vez que coloques un enlace en una barra lateral, el texto se deslizará hacia la derecha siempre tan ligeramente.

El HTML

1	<ul>
2	<li>
3	<a href="#"> Hover Over Me </a>
4	</li>
5	<li>
6	<a href="#"> Hover Over Me </a>
7	</li>
8	<li>
9	<a href="#"> Hover Over Me </a>
10	</li>
11	<li>
12	<a href="#"> Hover Over Me </a>
13	</li>
14	</ul>

El CSS

 ul a {
    -webkit-transition: padding .4s; 
    -moz-transition: padding .4s;
    -o-transition: padding .4s;
    transition: padding .4s;
 }

 a:hover { 
    padding-left: 6px;  
 }

transición reconocerá tres parámetros:

La propiedad de transición (Establece este valor en todo si fuera necesario)
La duración
El tipo de flexibilización

La razón por la que no aplicamos directamente la transición al estado hover de la etiqueta de anclaje es porque, si lo hicieramos, la animación sólo tendría efecto al pasar el ratón por encima. Al quitar el ratón, el elemento volvería inmediatamente a su estado inical.

Ver Demo

Puesto que sólo hemos mejorado el efecto, no hemos hecho absolutamente ningún daño a los navegadores más antiguos.

Proyecto Final

Vamos a combinar la mayor parte de las técnicas que hemos aprendido en este artículo, y a crear un efecto nítido. Primero revisa el efecto final (se ve mejor en navegadores Webkit).

Paso 1. El Marcado

Lo haremos simple; Dentro de nuestro contenedor .box, vamos a añadir dos divs: uno para el tamaño frontal, y el otro para atrás.

<body>

   <div class="box">
      <div>Hello</div>
      <div> World </div>
   </div>

</body>

Paso 2. Centrado Horizontal y Verticalmente

A continuación, necesito que nuestra tarjeta esté perfectamente centrada en la pantalla. Para hacer eso, aprovecharemos el Modelo de Caja Flexible. Sólo asegúrate de, más tarde, usar Modernizr para proporcionar un fallback para IE.

Como nuestra página sólo contendra esta tarjeta, podemos usar eficazmente el elemento del cuerpo como nuestro envoltorio.

body, html { height: 100%; width: 100%; } 

body {
  display: -moz-box;
	display: -webkit-box;
	display: box;
	
	-moz-box-orient: horizontal; 
	-webkit-box-orient: horizontal;
	box-orient: horizontal;
	
	-moz-box-pack: center;
	-moz-box-align: center;
	
	-webkit-box-pack: center;
	-webkit-box-align: center;
	
	box-pack: center;
	box-align: center;
}

Paso 3. Diseñar la Caja

Ahora diseñaremos nuestra "tarjeta".

 .box {
    background: #e3e3e3;
    border: 1px dashed #666;
    margin: auto;
    width: 400px;
    height: 200px;
    cursor: pointer;
    position: relative;

    -webkit-transition: all 1s;	
    -moz-transition: all 1s;
    transition: all 1s;	
 }

Observa que además hemos dado instrucciones a este elemento para que preste atención a cualquier cambio en el estado del elemento. Cuando sucedan, convertiremos los cambios (si es posible) en el transcurso de un segundo (transition: all 1s).

Paso 4 Una sombra eficiente

A continuación, como aprendimos anteriormente en este artículo, aplicaremos una sombra genial utilizando la pseudo clase :: after.

 .box::after {
    content: '';
    position: absolute;

    width: 70%;
    height: 10px;
    bottom: 0;
    left: 15%;

    z-index: -1;

    -webkit-box-shadow: 0 9px 20px rgba(0,0,0,.4);
    -moz-box-shadow: 0 9px 20px rgba(0,0,0,.4);
    box-shadow: 0 9px 20px rgba(0,0,0,.4);
}

Paso 5. Diseñar los Divs Secundarios

En este momento, los divs secundarios están todavía justo encima de cada uno. Vamos a posicionarlos totalmente, y a darles instrucciones de que ocupen todo el espacio disponible.

 .box > div {
    background: #e3e3e3;
     
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
    

    font: 45px/200px bold helvetica, arial, sans-serif;
    text-align: center;
    
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
 }

Paso 6. Arreglar el "Frente"

Consulta la imagen de arriba; ¿te das cuenta de como la parte trasera de nuestra tarjeta se está mostrando por defecto? Esto se debe a que, debido al hecho de que el elemento se produce más bajo en el marcado, en consecuencia, recibe un índice-z más alto. Vamos a arreglar eso.

 /* Make sure we see the front side first */
 .box > div:first-child {
    position: relative;
    z-index: 2;
 }

Paso 7. Girar la Tarjeta

Ahora viene la parte divertida; Cuando volvemos sobre la tarjeta, debe dar la vuelta, y mostrar la "parte trasera" de la tarjeta (al menos la ilusión de la "parte trasera"). Para lograr este efecto, utilizamos transformaciones y la función rotateY.

 .box:hover {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);   	   	
 }

Paso 8. Texto reflejado

¿No parece increíble? Pero, ahora, el texto parece estar reflejado. Esto, por supuesto, es porque transformamos el contenedor. Vamos a desplazar esto girando el div secundario 180º también.

/* Hide the front-side when hovered */
 .box:hover > div:first-child {
    opacity: 0;
 }

 .box:hover div:last-child {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
 }

¡Y con ese último fragmento de código, hemos logrado nuestro efecto nítido!

Conclusión

¡Muchísimas gracias por leerlo y espero que aprendieras un poco!