5 efectos CSS3 geniales que verás más

Anuncio

CSS3 (combinado con el poder de HTML5) está siendo rápidamente soportado por todos los principales navegadores (leer, 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 la potencia de su 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 Cen ascenso 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 previsto, y determine todo, desde el diseño de la página, el tamaño del texto y los colores, y ahora una serie de 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

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

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

Aquí está el código para los 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: gradiente lineal (arriba, # 3f9fe3, #white); filter: progid: DXImageTransform. Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = '# white'); / * IE6 – IE9 * / }

Rotación

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); filter: progid: DXImageTransform. Microsoft Matriz (/ * IE6 – IE9 * / M11 = 0.9914448613738104, M12 = -0.13052619222005157, M21 = 0.13052619222005157, M22 = 0.9914448613738104, sizingMethod = 'auto expand'); zoom: 1; }

Animación

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 CSS3 de alguna manera, algunos aún 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 a generador css3 para escribirlos para ti.

Conclusión

La web se volverá mucho más emocionante con las nuevas extensiones CSS3 y HTML5. Por supuesto, vamos a ver otro chorro de texto intermitente y una alta proporción de whiz-bang a contenido real (tal como lo hicimos cuando Los GIF animados se "descubrieron" por primera vez), pero a la larga aprenderemos cómo usar las herramientas de CSS3 para crear sitios web más interesantes. interfaces 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 funcionará sin CSS3, no lo ha utilizado correctamente. CSS debe usarse para mejorar la experiencia, no la funcionalidad del programa.