¿Cómo el estilo de una imagen de Polaroid Con CSS3

Cascading Style Sheet nivel 3 código agrega muchas características nuevas que permiten a los desarrolladores web crear efectos visuales interesantes sin necesidad de abrir un programa de edición de gráficos. La alegría de algunos desarrolladores ha dado lugar a una variedad de trucos y tutoriales que muestran el poder de código CSS3, tales como gradientes que se convierten en cuadros y presentaciones de diapositivas que no requieren Javascript. El estilo de una imagen para que parezca una Polaroid es uno de estos efectos.

Instrucciones

1 Abra el archivo que contiene el código de la página Web y localizar los "<link>" etiquetas en la cabeza del código HTML. Encuentra el nombre de su archivo CSS en el "<link>" etiqueta si existe:

<Rel = "stylesheet" href = "ruta / a / style.css" enlace type = "text / css" />

En el código anterior, "style.css" es el archivo que necesita abrir para editar el código CSS. Añadir "<style>" etiquetas a la cabeza de su código HTML si no existe ningún vínculo a un archivo CSS externo:

<Style type = "text / css">

</ Style>

2 Busque el "<img>" etiqueta que contiene la imagen que desea el estilo como una Polaroid. Este es un ejemplo del código:

<Img alt = "My Pic" />

Añadir un atributo "clase" a la etiqueta, dando la imagen de un nombre de clase, tales como "polaroid" que se puede trabajar con más adelante:

<Img alt = "My Pic" class = "polaroid" />

3 Escribir el código CSS en la parte inferior de su archivo CSS o entre los "<style>" etiquetas que ha añadido a su página Web. Comience con el selector que "seleccionar" su imagen:

.polaroid {

}

Colocar todo el código CSS su imagen Polaroid entre las llaves para.

4 Añadir relleno alrededor de la imagen utilizando la propiedad rápida "relleno", que dará a la imagen de un acolchado uniforme por todas partes. Establecer el relleno de fondo usando "padding-bottom" con un valor más alto:

padding: 10px;

padding-bottom: 40px;

5 Establecer la propiedad "background-color" a blanco. Utilice el nombre del color "blanco" o la abreviatura código hexadecimal "#fff" sobre la base de su preferencia:

background-color: #fff;

6 Dar a la imagen una gota de sombra mediante la propiedad "caja-sombra" de CSS. Dar la sombra de la gota un desplazamiento de alrededor de tres a cinco píxeles desde la parte superior e izquierda, un radio de desenfoque de aproximadamente 10 píxeles y un RGBA - Rojo, Verde, Azul y Alfa - valor del color negro con un bajo valor de opacidad tales como 40 por ciento:

box-shadow: 3px 3px 10px RGBA (0,0,0,0.4);

7 Añadir una ligera pendiente para el fondo blanco para que la imagen se sienta más tridimensional. Use un color gris claro para la parte inferior del gradiente y mantener la tapa blanca. Es necesario declarar la "imagen de fondo" propiedad tres veces para dar cuenta de las variaciones del navegador:

Imagen de fondo: -webkit-lineal de gradiente (arriba, #fff 85%, #eee);

Imagen de fondo: -moz-linear-gradiente (arriba, #fff 85%, #eee);

Imagen de fondo: gradiente lineal (arriba, #fff 85%, #eee);

8 Girar la fotografía Polaroid sólo un poco para darle ese "acaba de caer sobre la mesa" mirada. Utilizar varias versiones de la propiedad "transformar", como lo hizo con el gradiente lineal:

-webkit-transform: rotate (-3deg);

-moz-transform: rotar (-3deg);

transform: rotar (-3deg);

Consejos y advertencias

• Efectos que requieren CSS3 no funcionarán de la misma manera exacta en todos los navegadores, y algunos navegadores todavía no son compatibles con CSS3. En el caso de este último, la imagen fija se mostrará el fondo blanco y el relleno, pero no la caída de la sombra, inclinación de la imagen o fondo del gradiente.
• Imágenes de estilo para parecerse a Polaroids se ven mejor cuando se coloca en los fondos que no sean blanco llano, debido a problemas con el contraste.