Sombras a Imágenes - Oxygenados La comunidad
Oxygenados La comunidad hispana
Recoda White Full Logo
Patrocinador
Menu
post oxygen builder
img-4
CSS Entrada
Sombras a Imágenes
Listado Tips CSS
BigBang2BigBang

Color

Reset
Desplaza los sliders para modificar los valores del filter.
Click en reset para volver al estado inicial.
Al hacer click una imagen también cambian los valores de esa imagen.
Donde Hpx es el offset horizonta, Vpx el offset vertical, Bpx el blur o ampliación, estos tres valores en pixesl y Color el color de la sombra que queremos aplicar. Notar que no hay comas entre los diferentes parámetros, solo espacios.
Hay una propideda en CSS que se utliza muy poco pero tiene una gran potencial para dar a nuestras webs un toque especial, esa propiedad es "filter".
Esta función es algo similar a la propiedad box-shadow. La propiedad box-shadow crea una sombra rectangular detrás de toda la caja de un elemento. En cambio, la función de filtro drop-shadow() crea una sombra que se ajusta a la forma de la imagen.
Esta propiedad se puede aplicar a  imágenes  y textos, (ejemplo de texto), para que destaque debe ser una imagen en formato png, puesto que la sombra se aplica al contorno de la imagen.
filter: drop-shadow(Hpx Vpx Bpx Color);
Click para Copiar
img-9
Copiado
5 2 votos
Puntuación
Suscribir
Notificar de
guest
0 Comentarios
Viejos
Nuevos Más votados
Comentarios en línea
Ver todos los comentarios
El diseño web responsivo está muerto

El diseño fluido se refiere a un enfoque de diseño web en el que las dimensiones de los elementos son flexibles, escalando proporcionalmente al tamaño de la pantalla del usuario.
En lugar de medidas fijas de píxeles, utiliza unidades relativas como porcentajes o ems para garantizar que el diseño se ajuste sin problemas, independientemente del dispositivo.

Leer más
Mas Iconos con Vainilla Font

Mostramos como añadir más iconos sin la necesidad de añadir más sets de SVGs, usando la fuente denominada "vanilla" y con la particularidad de que vamos a poder usarlos de manera global en todo nuestro sitio o solo en aquellas páginas o entradas en las que sea necesario.
La diferencia entre usarlos de manera global en todo el sitio o solo en aquellas páginas está en que en la primera manera cargaremos los kb de la fuente, en este caso 79Kb de manera innecesaria en aquellas páginas o entradas donde no requiramos el uso de estos iconos.

Leer más
Subrayado Animado

Un pequeño tip para lograr un efecto de subrayado animado con css y Oxygen

Leer más