Categoría: CSS

Categorías
CSS

Como convertir una img SVG a un color HEX con CSS

Nos vamos a esta web, he introducimos nuestro color HEX

Luego ponemos ese filtro generado en nuestro CSS, ejemplo

img{filter:invert(65%) sepia(71%) saturate(5198%) hue-rotate(161deg) brightness(94%) contrast(101%);}
img:hover{filter:invert(65%) sepia(80%) saturate(586%) hue-rotate(2deg) brightness(107%) contrast(107%)}

Recomendable que la imagen en svg, sea con fill negro o currentColor

Categorías
CSS

Solución al problema de los enlaces de ancla con un header fijo

a[name] {
    display: block;
    padding-top:70px;
    margin-top:-70px;
}
Categorías
CSS

Como utilizar valores negativos en variables CSS

Desde Marzo de 2018, la única forma de usar variables personalizadas negativas es multiplicándolas por -1 con la función calc.

:root{--Variable: 60px}
.class {margin-bottom: calc(var(--Variable) * -1)}
Categorías
CSS

Que se puede hacer con CSS en 2021

Checkbox personalizado usando HTML y CSS.

Categorías
CSS

Recortar una imagen en forma de corazón con css

.corazon{
width:250px;
height:250px;
object-fit:cover;
clip-path: path('M213.1,6.7c-32.4-14.4-73.7,0-88.1,30.6C110.6,4.9,67.5-9.5,36.9,6.7C2.8,22.9-13.4,62.4,13.5,110.9 C33.3,145.1,67.5,170.3,125,217c59.3-46.7,93.5-71.9,111.5-106.1C263.4,64.2,247.2,22.9,213.1,6.7z');
margin:0 
}
Categorías
CSS

Botones Animados

BOTON 1
<style>
  #boton1{background:#cd2653;height:50px;width:150px;border:none;color:#eee;position:relative;transition:1s;display:flex;align-items:center;justify-content:center;cursor:pointer}
  #boton1 #circle{width:5px;height:5px;background:transparent;border-radius:50%;position:absolute;top:0;left:50%;overflow:hidden;transition:500ms}
  #boton1:hover{background:#000}
  #boton1:hover #circle{height:50px;width:150px;left:0;border-radius:0;border-bottom:2px solid #cd2653}
</style>
<div id="boton1">BOTON 1<div id="circle"></div></div>
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