5 efectos CSS3 geniales que verás más de

CSS3 (combinado con la potencia de HTML5) está siendo soportado rápidamente por todos los principales navegadores (lea - cualquier cosa excepto Internet Explorer), así que pensé que ahora sería un buen momento para ver algunos de los geniales efectos CSS que podemos lograr usando el poder De tu navegador y un pequeño código CSS. Debería poder ver todos los efectos demostrados en este artículo si usa el navegador Chrome, Safari o Firefox más reciente.

Primero - Qué es CSS?

Si estás leyendo este artículo porque estás intrigado pero no tienes idea de lo que significa CSS, déjame explicarte rápidamente. CSS es el lenguaje de codificación utilizado para decorar páginas web. Lo que representa doascendiendo Style SHeet, y básicamente solo agrega estilo y estilo a un sitio. Los sitios web son ciertamente legibles sin su CSS, pero son horribles al igual que todos los sitios web en 1995. Mientras que los archivos HTML describen la estructura y el contenido textual de una página, el CSS hace que se muestren en la forma en que el diseñador lo hizo, y determinan todo desde diseño de página, tamaño y colores del texto, y ahora una serie de efectos sofisticados con la introducción de CSS3.

En el pasado, lograr el mismo tipo de efectos que los descritos en este artículo habría significado descargar CSS voluminosos o incluso gráficos más grandes. Ahora, CSS solo puede describir a su navegador cómo le gustaría que se vea la página, y el navegador manejará el procesamiento. Es como si te diera los planes para construir tu propia casa en lugar de venderte toda la casa; es significativamente más barato!

Esquinas redondeadas

Internet se ha ido volviendo cada vez más 'redondo', pero ahora esto se ha solidificado en CSS3. Eche un vistazo a la caja que rodea este párrafo. No es una imagen, haz clic derecho para verla. CSS puro!

El código para esquinas redondeadas es muy sencillo:

.box_round -moz-border-radius: 20px; / * FF1 + * / -webkit-border-radius: 20px; / * Saf3-4, iOS 1+, Android 1.5+ * / border-radius: 20px; / * Opera 10.5, IE9, Saf5, Chrome, FF4 * /

Sombra de texto

El texto a veces puede parecer realmente duro por sí solo, pero una pequeña sombra realmente ayuda a las cosas. Echa un vistazo a la sombra que he aplicado a este párrafo.

Aquí está el código para algunas sombras de texto:

.box_textshadow text-shadow: 1px 1px 3px # 888; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * /

Gradientes

No más colores planos o imágenes de fondo degradado, ahora puede crear un degradado genial solo con CSS. Desafortunadamente, necesita algunas líneas debido a problemas de incompatibilidad actuales entre los navegadores, pero puede usar la herramienta que describiré más adelante para generarlos automáticamente..

Aquí está el código para gradientes CSS:

.box_gradient background-color: # 3f9fe3; imagen de fondo: -moz-linear-gradient (arriba, # 3f9fe3, #white); / * FF3.6 * / background: -moz-linear-gradient (top, # 1E5799 0%, # 207cca 26%, # 2989D8 39%, #FFFFFF 100%); / * firefox * / background-image: -ms-linear-gradient (top, # 3f9fe3, #white); / * IE10 * / background-image: -o-linear-gradient (top, # 3f9fe3, #white); / * Opera 11.10+ * / background-image: -webkit-gradient (linear, left superior, left inferior, de (# 3f9fe3), a (#white)); / * Saf4 +, Chrome * / background-image: -webkit-linear-gradient (arriba, # 3f9fe3, #white); / * Chrome 10+, Saf5.1 + * / background-image: gradiente lineal (arriba, # 3f9fe3, #white); filter: progid: DXImageTransform.Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = "# white"); / * IE6-IE9 * /

Rotación

Es difícil imaginar un uso para esto en términos de texto, pero puede agregar algunos elementos de diseño agradables al usar imágenes, por ejemplo. Nuevamente, observe que aunque este párrafo ha sido girado, aún puede seleccionarlo e interactuar con él, ya que sigue siendo texto regular..

Aquí el código para rotar algo:

 .box_rotate -moz-transform: rotate (7.5deg); / * FF3.5 + * / -o-transform: rotate (7.5deg); / * Opera 10.5 * / -webkit-transform: rotate (7.5deg); / * Saf3.1 +, Chrome * / -ms-transform: rotate (7.5deg); / * IE9 * / transform: rotate (7.5deg); filtro: progid: DXImageTransform.Microsoft.Matrix (/ * IE6-IE9 * / M11 = 0.9914448613738104, M12 = -0.13052619222005157410pc) zoom: 1;  

Animación

Oh sí, guardé lo mejor hasta el final. CSS3 introduce varias formas de animación para cualquier número de los efectos de CSS descritos. En este párrafo, he definido la propiedad de transición como se indica a continuación, así como un color de fondo y rotación simples cuando se coloca sobre ella. Si aún no lo ha hecho, pase el mouse sobre este párrafo del texto para ver el efecto en acción. Puedes animar casi cualquier cosa!

Necesitará el código de transición como este para cualquier elemento que desee cambiar. También deberá usar algunas clases de pseudo CSS (como: desplazarse para cambiar las propiedades que desee animar, como el color, el tamaño o la rotación)

 .caja_transición -moz-transición: todos los 0,5s se eliminan fácilmente; / * FF4 + * / -o-transición: todos los 0,5s se eliminan fácilmente; / * Opera 10.5+ * / -webkit-transition: todos los 0,5 segundos se reducen; / * Saf3.2 +, Chrome * / -ms-transition: todos los 0,5 segundos se reducen; / * IE10? * / transición: todos los 0,5s se alivian;  

Incompatibilidades entre navegadores

Aunque la mayoría de los navegadores modernos admiten CSS3 de alguna manera, algunos aún requieren códigos o trucos ligeramente diferentes para que funcione con su implementación particular del estándar. En el código anterior, por ejemplo, verá muchas instancias de -moz- o -webkit- que preceden algunas de las propiedades de CSS, que se relacionan con los navegadores basados ​​en Mozilla o Webkit. Sin embargo, escribir estas líneas adicionales puede ser una molestia, así que echa un vistazo al generador css3 para escribirlas por ti.

Conclusión

La web se volverá mucho más emocionante con las nuevas extensiones CSS3 y HTML5. Por supuesto, vamos a ver otro arrebato de texto destellante y una alta proporción de contenido real (como lo hicimos cuando los GIF animados fueron los primeros). “descubierto”) pero a largo plazo aprenderemos a usar las herramientas de CSS3 para hacer interfaces web más interesantes. Y oye, siempre puedes apagarlo todo.!

Si usted es diseñador o desarrollador web, recuerde que CSS3 nunca debería ser la única opción. Si su sitio no funciona sin CSS3, no lo ha utilizado correctamente. CSS debe utilizarse para mejorar la experiencia, no la funcionalidad del programa.

Explore más acerca de: HTML, HTML5, programación, desarrollo web.