5 efectos CSS3 geniales que verás más

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

Primero: ¿Qué es CSS??

Si está leyendo este artículo porque está intrigado pero no tiene idea de lo que significa CSS, permítame explicarlo rápidamente. CSS es el lenguaje de codificación utilizado para decorar páginas web. Lo que representa dosubiendo Style Sheet, y básicamente solo agrega estilo y estilo a un sitio. Ciertamente, los sitios web son legibles sin su CSS, pero son horribles al igual que todos los sitios web en 1995. Si bien los archivos HTML describen la estructura y el contenido textual de una página, el CSS hace que se muestren de la manera prevista por el diseñador y determinan todo desde diseño de página, tamaño y colores del texto, y ahora varios efectos elegantes 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 gráficos aún más grandes. Ahora, CSS puede describir a su navegador cómo le gustaría que se viera la página, y el navegador manejará el procesamiento. Es como si te entregara los planes para construir tu propia casa en lugar de venderte toda la casa: es significativamente más barato!

Esquinas redondeadas

Internet se ha vuelto gradualmente 'más redondo', pero ahora esto se ha solidificado en CSS3. Echa un vistazo a la casilla que rodea este párrafo. No es una imagen, intente hacer clic derecho sobre ella para verla. CSS puro!

El código para las esquinas redondeadas es realmente fácil:

.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 muy duro por sí solo, pero una pequeña sombra simple realmente ayuda a las cosas. Mira 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 degradado de fondo, 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, #blanco); / * FF3.6 * / background: -moz-linear-gradient (arriba, # 1E5799 0%, # 207cca 26%, # 2989D8 39%, #FFFFFF 100%); / * firefox * / background-image: -ms-linear-gradient (arriba, # 3f9fe3, #blanco); / * IE10 * / background-image: -o-linear-gradient (arriba, # 3f9fe3, #blanco); / * Opera 11.10+ * / background-image: -webkit-gradient (lineal, superior izquierda, inferior izquierda, desde (# 3f9fe3), hasta (#white)); / * Saf4 +, Chrome * / background-image: -webkit-linear-gradient (arriba, # 3f9fe3, #blanco); / * Chrome 10+, Saf5.1 + * / background-image: linear-gradient (arriba, # 3f9fe3, #blanco); filtro: 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 cuando se usan imágenes, por ejemplo. Nuevamente, observe que aunque este párrafo ha sido rotado, aún puede seleccionarlo e interactuar con él, ya que sigue siendo texto normal.

Aquí el código para rotar algo:

 .box_rotate -moz-transform: rotate (7.5deg); / * FF3.5 + * / -o-transform: rotar (7.5deg); / * Opera 10.5 * / -webkit-transform: rotar (7.5deg); / * Saf3.1 +, Chrome * / -ms-transform: rotar (7.5deg); / * IE9 * / transform: rotar (7.5deg); filtro: progid: DXImageTransform.Microsoft.Matrix (/ * IE6-IE9 * / M11 = 0.9914448613738104, M12 = -0.13052619222005157, M21 = 0.13052619222005157, M22 = 0.9914448613738104, expandiendo Método; zoom: 1;  

Animación

Oh sí, guardé lo mejor hasta el final. CSS3 presenta varias formas de animación para cualquier cantidad de efectos CSS geniales descritos. En este párrafo, he definido la propiedad de transición como se detalla a continuación, así como un simple color de fondo y rotación cuando pasa el cursor sobre él. Si aún no lo ha hecho, pase el cursor sobre este párrafo de texto ahora 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: pasar el mouse para cambiar las propiedades que desea animar, como el color, el tamaño o la rotación)

 .box_transition -moz-transition: todos 0.5s facilidad de salida; / * FF4 + * / -o-transition: todos 0.5s facilidad de salida; / * Opera 10.5+ * / -webkit-transition: todos 0.5s facilidad de salida; / * Saf3.2 +, Chrome * / -ms-transition: todos 0.5s facilidad de salida; / * IE10? * / transición: todos los 0.5s facilitan;  

Incompatibilidades cruzadas del navegador

Aunque la mayoría de los navegadores modernos admiten todo el CSS3 de alguna manera, algunos todavía requieren un código o pirateo ligeramente diferente 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- anteriores a algunas de las propiedades 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 brote de texto intermitente y una alta proporción de whiz-bang a contenido real (tal como lo hicimos cuando los GIF animados fueron los primeros “descubierto”) pero a la larga aprenderemos cómo usar las herramientas de CSS3 para crear interfaces web más interesantes. Y oye, siempre puedes apagarlo todo!

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