Categoría: CSS

Categorías
CSS

Animación degradado background CSS

BODY{
--BotonBackgroundInicio: #FF466A;
--BotonBackgroundFin: #FFAA41;
--BotonBackground:#FF466A;
}
.boton{background:var(--BotonBackground);transition:all 300ms linear 0ms;background:linear-gradient(90deg, var(--BotonBackgroundInicio), var(--BotonBackgroundFin) 51%, var(--BotonBackgroundInicio)) var(--x, 0)/ 200%;padding:1rem 2rem}
.boton:hover{--x: 100%;transition:all 300ms linear 0ms}

Ejemplos

Prueba
Prueba
Categorías
CSS

Convertir una imagen a escala de grises mediante css

Copiar y pegar el siguiente código ccs, la clase a utilizar es escaladegrises.

.escaladegrises {filter:url('#grayscale');-webkit-filter:grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter:grayscale(100%);filter: grayscale(100%);filter:Gray()}
.escaladegrises:hover {-webkit-filter: grayscale(0%);-moz-filter:grayscale(0%);-ms-filter:grayscale(0%);-o-filter: grayscale(0%);filter:none}