Efectos que se pueden hacer con las hojas de estilo en cascada

CSS 3, la última edición de Cascading Style Sheets, presenta los avances en el manejo de diseño. De ellas, unas nuevas capacidades que definen gradientes de color, grados de transparencia, e incluso reflexiones son definitivamente vale la pena ver!

En el pasado, si quería un degradado de color, había que diseñar imágenes de mapa de bits para el propósito. Ahora CSS le permite llenar recipientes con gradientes lineales y radiales que hacen una transición incluso de un color a otro, o de un color en varios colores. También puede controlar la forma en que el gradiente llena el recipiente.

Lo más interesante es el hecho de que ahora se puede utilizar gradientes CSS como máscaras de imagen que incorporan la transparencia de canal alfa. Mediante la definición de la imagen que está utilizando como una máscara - y asociar esa imagen con un elemento u otra imagen como parte de la definición - puede hacer que ese elemento se desvanecen poco a poco en apariencia, revelando cualquier fondo se había escondido debajo. Esta capacidad permite algunos efectos interesantes en capas en el diseño de su sitio web.

Para crear un reflejo (donde la imagen parece estar reflejada en la superficie más adelante) usando sólo CSS, es necesario utilizar una combinación de ajustes de transformación y contenedores, pero el efecto neto es no obstante un efecto de reflexión. En esencia, se crean dos contenedores - uno para la imagen principal y otra para la reflexión. Mediante la aplicación de la transformada efectos al recipiente reflexión que se dirige, ante la imagen de arriba a abajo y luego aplastar su altura y luego añadir una máscara de transparencia, se termina con una reflexión convincente como se muestra en la siguiente figura. La belleza es que, con esta técnica, tiene una gráfica normal con la opción de incluir una reflexión - una reflexión que es dinámicamente configurable - todo ello sin el uso de Photoshop.

Video: Transiciones con CSS

efectos de sombra CSS

Ahora es posible utilizar CSS para añadir sombras paralelas a los elementos - otro efecto muy fresco. Antes de CSS3, sombras semitransparentes sólo fueron posibles con la imagen de mapa de bits, específicamente con el formato PNG que soporta la transparencia.

Simplemente ajustando los colores y la cantidad de desplazamiento y el desenfoque, puede crear efectos muy diferentes. Nótese que en el caso de la caja-sombra (la tercera imagen en la siguiente figura) es necesario tener dos líneas de código inmediatamente después - una para WebKit y uno para Moz. Estos son para apoyar los navegadores Safari y Firefox, respectivamente.

Video: [Video Guía] Dos efectos que se pueden realizar con CSS3

Esquinas redondeadas

La siguiente figura muestra un ejemplo de la nueva propiedad border-radius CSS3 en acción. Al definir un valor para esta propiedad - echa un vistazo a las dos últimas líneas del código CSS, donde el valor se establece en 10 píxeles - controlar cómo grande aparece la curva de esquina. Antes de la introducción de la propiedad border-radius, efectos de esquinas redondeadas sólo eran posibles mediante el uso de gráficos de mapa de bits.

Video: Publicaciones con HTML5 y CSS3 para tablets: Efectos adicionales

Los efectos de animación

El uso de CSS 3, ahora se puede aplicar varias 2D fresco y efectos de animación en 3D mediante el uso de la propiedad transform. Esta propiedad contiene una serie de funciones como la escala, rotar, sesgar, y la perspectiva que se puede definir y combinar para afectar a la animación de varios modos. Incluso se puede definir a efectos de transición de control cómo el objeto se transforma, y ​​cuánto tiempo dura.

Los efectos de transición también se pueden aplicar a los enlaces normales. Por ejemplo, si normalmente uno se voltea un enlace para ver un punto culminante, que pone de relieve al mismo tiempo. Usando las propiedades denominadas de transición de la propiedad y de transición de duración, se puede hacer el fundido destacado en lentamente - y especificar el número de segundos que se tarda en hacerlo.

En cuanto a los efectos 3D, si alguna vez has visto la aplicación iPhone El tiempo que aparece a “darle la vuelta” que le permite configurar sus ciudades, que está presenciando efectos CSS3 en acción. Mediante el uso de la propiedad perspectiva y especificar valores para diferentes funciones de transformación, tales como perspectiva, rotación, inclinación y escala, puede ser muy creativo con la presentación de su interfaz de usuario.