CSS
HTML
COMPONENTS
CODE HUB
Generador de Sepia CSS BETA
Configuración
Sepia
Clase
Vista previa
Código
Generador de Sepia CSS
En CSS, puedes aplicar el efecto de sepia a los elementos utilizando la propiedad filter. El efecto de sepia da a un elemento una apariencia marrón, vintage o anticuada al transformar sus colores en tonos de marrón.
Aquí te mostramos cómo usar el efecto de sepia en CSS:
.sepia-element {
filter: sepia(100%);
}
En este ejemplo:
- La clase .sepia-element aplica el efecto de sepia al elemento que tiene como objetivo.
- sepia(100%) especifica un efecto de sepia del 100%, lo que significa que el elemento aparecerá completamente en tonos de marrón.
Puedes ajustar el valor porcentual para controlar la intensidad del efecto de sepia. Por ejemplo, sepia(50%) resultaría en una apariencia parcialmente sepia, con algunos colores originales preservados.
Aquí tienes otro ejemplo con sepia parcial:
.partial-sepia-element {
filter: sepia(30%);
}
En este caso, la clase .partial-sepia-element aplica un efecto de sepia del 30%, resultando en una transformación parcial a tonos de marrón.
El efecto de sepia se usa a menudo para crear un aspecto vintage o nostálgico para imágenes o elementos, evocando fotografías antiguas. Es una herramienta creativa para lograr estilos visuales específicos y agregar carácter a tus diseños web.
Herramientas destacadas
Hub de CódigoSeleccionar idioma
Establecer tema
© 2024 ReadyTools. Todos los derechos reservados.