CSS3 permite aplicar algunos efectos especiales interesantes a sus páginas HTML5. Estos efectos se pueden aplicar a cualquier elemento, pero por lo general se aplican a las imágenes y titulares. Tenga en cuenta que estos todavía se consideran experimentales, por lo que las implementaciones de navegador varían.

Transparencia

CSS3 tiene soporte completo para la opacidad ajustable. Esto se refleja en un par de maneras. En primer lugar, cualquier elemento tiene un atributo que se puede establecer a partir 0 (Completamente transparente) a1 (Totalmente opaco).

Aquí hay una div con transparencia parcial superpuesta sobre una imagen.

El código completo de esta página es fácil de seguir:

opacidad de demostración

Todo el código HTML es común y cosas CSS2, excepto el último atributo. los opacidad atributo toma un único valor de punto flotante entre 0 y 1. cero (0) Es completamente transparente y una (1) Es completamente opaco.

Tenga en cuenta que el ejemplo se utiliza la otra forma principal de la transparencia con el apoyo de CSS - el titular utiliza el modelo de RGBA añadir transparencia alfa a un color. En general, utilice alfa cuando desea agregar transparencia parcial a un color individual. La opacidad se puede utilizar para un elemento completo, incluso compleja algo así como una imagen o un vídeo.

Todas las versiones recientes de navegadores soportan la opacidad sin necesidad de prefijos específicos del proveedor. Los navegadores más antiguos simplemente mostrar el elemento como totalmente opaco, por lo que cualquier cosa bajo un elemento parcialmente transparente pueden ser invisibles para los navegadores antiguos.

Video: css3 - Efecto en Imágenes

reflexiones

La reflexión es otro de los elementos visuales que añade un poco a una página cuando se hace bien. Aunque no es una parte formal de la especificación CSS3, es una tecnología prometedora. Actualmente sólo los navegadores basados ​​en WebKit (es decir, Safari, iPhone / iPad, y Chrome) apoyan esta capacidad. Sin embargo, se muestra como promesa de que es probable que aparezca en los otros navegadores en algún momento alguna forma de esta capacidad.

Aplicar el siguiente CSS para hacer cualquier elemento con el reflejar clase tiene un reflejo de aspecto agradable en los navegadores compatibles:

-webkit-box-reflejar: por debajo de 2px;

reflexiones básicas son muy simples:

1. Aplica el webkit-box-reflejar atributo.

   Desafortunadamente, no hay una versión genérica, ni ha sido el atributo duplicado por otros navegadores.

2. Especifica que la reflexión se va a colocar.

   Normalmente, la reflexión va por debajo del elemento principal, pero también puede ser encima, izquierda, o derecho.

3. Indican una anchura de intersticio.

   La reflexión puede ser colocado justo al lado del elemento original, pero a menudo se ve mejor con un pequeño espacio. La brecha se mide normalmente en píxeles.

Esto producirá una muy buena reflexión.

Video: Botón 3d con efecto Toggle con HTML y CSS

Sin embargo, los reflejos no son por lo general las duplicaciones píxeles perfectos. Ellos tienden a desaparecer en la distancia. WebKit permite agregar un degradado a una reflexión. En este caso, el gradiente va desde completamente opaco (blanco) a completamente transparente (transparente).

.reflejar {
 -webkit-box-reflejar: por debajo de 2px
 -webkit-lineal-gradiente (fondo, blanco, transparente 40%, transparente) -}

La parte estándar de la reflexión es igual que el ejemplo anterior, pero incluye un gradiente que se desvanece el reflejo de la transparencia.

1. Construir un gradiente lineal.

   El gradiente de una reflexión es casi lineal. Tenga en cuenta que el gradiente no es una nueva regla CSS, sino simplemente un parámetro en la regla reflexión existente.

2. Hacer el movimiento de gradiente de abajo hacia arriba.

   Se utiliza para indicar el gradiente comienza en la parte superior, y para indicar el gradiente comienza en la parte inferior. Estos valores representan la parte superior e inferior de la original imagen, no la reflexión (que, por supuesto, ser revertido). Normalmente, su gradiente empieza en la parte inferior de la imagen original (que es en la parte superior de la imagen reflejada).

3. Comience con la opacidad completa.

   La parte inferior de la imagen original es la parte superior de la imagen reflejada, y la parte superior de la imagen reflejada debe ser completamente opaca. Este gradiente no es realmente sobre el color, sino sobre qué partes de la reflexión son visibles. Ajuste del color inicial a blanco hace que la parte superior de la reflexión completamente opaco.

4. Terminar a la opacidad completa.

   La parte superior de la imagen original (la parte inferior de la reflexión) debe ser completamente transparente, por lo que terminar el gradiente con la palabra clave de color especial transparente (Que es equivalente a RGBA 255, 255, 255, 0).

5. Añadir un color de ventanilla única para ajustar el fundido.

   Añadir una parada de color para indicar el lugar en el reflejo desea que la imagen para iniciar la decoloración.

Tenga en cuenta que la imagen reflejada no se calcula como un elemento separado para fines de diseño de página, por lo que el texto y otros contenidos fluirán a la derecha en la parte superior de su reflexión.

Reflexiones se aplican normalmente a las imágenes, sino que se pueden aplicar a cualquier elemento, incluso vídeo!

Es posible conseguir un efecto de reflejo en otros navegadores con un uso inteligente de los atributos de transformación y de gradiente. Por ahora, sin embargo, es probable que sea más seguro para reservar este efecto para situaciones donde se sabe que el usuario va a utilizar un navegador compatible o cuando el efecto se refleja no es absolutamente necesario.