Categorías
CSS

¿Cómo ordenar los OL con decimales?

La forma mas rapida y comoda de hacerlo es con contadores de css

  1. li element
  2. sub li element
    1. sub li element
    2. sub li element
      1. sub li element
    1. sub li element
    2. sub li element
    3. sub li element
  3. li element
  4. li element
    1. sub li element
    2. sub li element
    3. sub li element
ol { counter-reset: item }
li{ display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }
<ol>
<li>li element</li>
<li>sub li element
<ol>
<li>sub li element</li>
<li>sub li element
<ol>
<li>sub li element</li>
</ol>
</li>
</ol>
<ol>
<li>sub li element</li>
<li>sub li element</li>
<li>sub li element</li>
</ol>
</li>
<li>li element</li>
<li>li element
<ol>
<li>sub li element</li>
<li>sub li element</li>
<li>sub li element</li>
</ol>
</li>
</ol>
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}