10 Propiedades de CSS3 con las que Necesitas estar Familizarizado
Spanish (Español) translation by Óscar Salas Ferná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.
-webkit-border-radius: 4px; -moz-border-radius: 4px; 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.
-moz-border-radius: 50px; -webkit-border-radius: 50px; 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!
-webkit-box-shadow: 1px 1px 3px #292929; -moz-box-shadow: 1px 1px 3px #292929; 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.



-webkit-box-shadow: 1px 1px 3px green, -1px -1px blue; -moz-box-shadow: 1px 1px 3px green,-1px -1px blue; 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
<div class="box"> <img src="tuts.jpg" alt="Tuts" /> </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
h1 { text-shadow: 0 1px 0 white; color: #292929; }
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; }



Ver Demo
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.
h1 { -webkit-text-stroke: 3px black; color: white; }
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 sentenciawhile
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 propiedadtext-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.
.box { background: url(image/path.jpg) 0 0 no-repeat, url(image2/path.jpg) 100% 0 no-repeat; }
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.
background: url(path/to/image.jpg) no-repeat; 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%; }
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 dealineación de cuadro
:estiramiento
.
Observa lo que ocurre cuando establecemos específicamente una anchura en el área de contenido #main
.
#main { background: yellow; width: 800px; }



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
.
<textarea name="elem" id="elem" rows="5" cols="50"></textarea>
Observa que, por defecto, los navegadores
webkit
y Firefox 4 permiten a laszonas 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
<ul> <li> <a href="#"> Hover Over Me </a> </li> <li> <a href="#"> Hover Over Me </a> </li> <li> <a href="#"> Hover Over Me </a> </li> <li> <a href="#"> Hover Over Me </a> </li> </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 estadohover
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.
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!
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weekly