- - Agregue efecto de sombra a las imágenes con CSS3 Auto Code Generator

Agregue efecto de sombra a las imágenes con CSS3 Auto Code Generator

CSS te permite diseñar tus páginas web fácilmente, muyfácilmente. Puede definir más de cien estilos de texto en una página (por supuesto, su página se verá como una carpa de circo), pero se trata de la facilidad y flexibilidad que conlleva el uso de CSS en las páginas web.ThemeShock tiene un generador de codificador CSS que te ayudará a agregardiferentes efectos de sombra paralela a sus imágenes en unos pocos clics. Eliges el efecto y escribe el código; los efectos se pueden agregar a la parte inferior, laterales, superior e inferior, inferior izquierda, inferior derecha, superior derecha e inferior izquierda o en esquinas diagonales.

css-shadow-generator_HQ

Antes de que empieces; verifica la dimensión de tuimagen (a la que desea agregar el efecto). El generador de código tiene un límite superior e inferior predefinido de 130 a 347 px para el ancho y la altura de la imagen. Si las dimensiones de su imagen exceden esto, siempre puede editar el ancho y la altura más adelante. El código también le permite determinar la opacidad y el desenfoque de la sombra. No puede cargar su imagen en el generador de código, se usará una imagen predeterminada para que pueda obtener una vista previa del efecto.

En el menú desplegable, elige qué sombraefecto que desee, cada vez que cambie alguno de los selectores, se generará un nuevo código, así que asegúrese de usar el último. Una vez que hayas elegido el efecto que te gusta, establece el ancho y la altura de tu imagen con la barra de desplazamiento horizontal. Use las teclas de flecha derecha e izquierda cuando quiera empujar el botón un poco. Establezca el desenfoque y la opacidad y se generará el código. Aumentar o disminuir cualquiera de estos parámetros creará un nuevo código.

Css3 Drop Shadow

Una vez que todo esté configurado, copie el código CSS en unCSS y asígnele un nombre a su página web (o tema). El código HTML que va en su página web también se genera (es único para cada efecto que elija en el menú desplegable), cópielo y coloque el código de la imagen (img src = "") donde dice "su código aquí".

Lo mejor de este generador de código es quefunciona y es gratis. Tiene restricciones de dimensión para las imágenes, pero se pueden editar desde el código. Si usa una imagen transparente (como la de arriba), le dará un fondo gris opaco. Puede editar el color de fondo más tarde desde el código. (Editar fondo de línea de código: #ccc). El código también le da un marco de 5px a todas las imágenes, también puede editar el marco, pero aumentar y disminuir el ancho ocultará o revelará la sombra más de lo necesario, por lo que es mejor dejarlo solo.

Visite ThemeShock CSS Drop Shadow Generator

Comentarios