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

CSS3, la última edición de Hojas de Estilo en Cascada, presenta los avances en el manejo de diseño. De ellas, algunas nuevas capacidades que definen gradientes de color, grados de transparencia, e incluso los reflejos 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 degradados 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 cómo 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 incorporen la transparencia de canal alfa. Al definir 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 - usted puede hacer que el elemento se desvanecen poco a poco en el aspecto, revelando cualquier fondo había sido escondido debajo. Esta capacidad permite algunos efectos en capas interesantes en el diseño de su sitio web.

Para crear un reflejo (donde aparece la imagen que se refleja en la superficie más abajo) 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 crea dos contenedores - uno para la imagen principal y otro para la reflexión. Mediante la aplicación de la transformada efectos al recipiente reflexión que primero convertir la imagen al revés 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, usted tiene uno gráfico 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.

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 imagen de mapa de bits con, específicamente con el formato PNG que soporta transparencia.

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

Esquinas redondas

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 cuán grande aparece la curva de esquina. Antes de la introducción de la propiedad border-radius, efectos de esquinas redondeadas eran posibles sólo mediante el uso de gráficos de mapa de bits.

Los efectos de animación

El uso de CSS3, 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 puede definir y combinar para afectar la animación de varias maneras. Usted puede incluso definir efectos de transición al 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 usted rueda sobre un enlace para ver un punto culminante, destaca a la vez. Usando las propiedades denominadas de transición de la propiedad y de transición de duración, se puede hacer el fundido destacado 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 para iPhone El tiempo que parece " voltear " 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 las diferentes funciones de transformación, tales como perspectiva, rotación, inclinación, y la escala, puede ser muy creativo con la presentación de su interfaz de usuario.