1. Transiciones Básicas
1. Cambio de Color
Color
Cambia el color de fondo.
.trans-color:hover {
background-color: #e74c3c;
}
<div class="caja-demo
trans-color">Color</div>
2. Redondeado
Radio
Cuadrado a círculo.
.trans-radius:hover {
border-radius: 50%;
}
<div class="caja-demo
trans-radius">Radio</div>
3. Sombra
Sombra
Añade profundidad.
.trans-shadow:hover {
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}
<div class="caja-demo
trans-shadow">Sombra</div>
4. Expansión
Ancho
Aumenta el ancho.
.trans-width:hover {
width: 100%;
}
<div class="caja-demo trans-width">Ancho</div>
5. Opacidad
Opacidad
Efecto fantasma.
.trans-opacity:hover {
opacity: 0.2;
}
<div class="caja-demo
trans-opacity">Opacidad</div>
6. Rotación
Giro
Gira 45 grados.
.trans-rotate:hover {
transform: rotate(45deg);
}
<div class="caja-demo
trans-rotate">Giro</div>
7. Escala
Zoom
Aumenta tamaño.
.trans-scale:hover {
transform: scale(1.5);
}
<div class="caja-demo
trans-scale">Zoom</div>
8. Mover
Mover
Desplaza a la derecha.
.trans-move:hover {
transform: translateX(20px);
}
<div class="caja-demo
trans-move">Mover</div>
9. Borde
Borde
Borde grueso.
.trans-border:hover {
border: 5px solid #2ecc71;
}
<div class="caja-demo
trans-border">Borde</div>
10. Texto
Texto
Separa letras.
.trans-text:hover {
letter-spacing: 5px;
}
<div class="caja-demo
trans-text">Texto</div>
2. Transformaciones Básicas
11. Rotar 90º
90º
Cuarto de vuelta.
.transf-rotate-90:hover {
transform: rotate(90deg);
}
<div class="caja-demo
transf-rotate-90">90º</div>
12. Rotar 180º
180º
Boca abajo.
.transf-rotate-180:hover {
transform: rotate(180deg);
}
<div class="caja-demo
transf-rotate-180">180º</div>
13. Reducir
Mini
Mitad de tamaño.
.transf-scale-down:hover {
transform: scale(0.5);
}
<div class="caja-demo
transf-scale-down">Mini</div>
14. Sesgar X
SkewX
Inclina horiz.
.transf-skew-x:hover {
transform: skewX(20deg);
}
<div class="caja-demo
transf-skew-x">SkewX</div>
15. Sesgar Y
SkewY
Inclina vert.
.transf-skew-y:hover {
transform: skewY(20deg);
}
<div class="caja-demo
transf-skew-y">SkewY</div>
16. Subir
Subir
Mueve arriba.
.transf-translate-y:hover {
transform: translateY(-20px);
}
<div class="caja-demo
transf-translate-y">Subir</div>
17. Origen
Eje
Pivote esq. sup.
.transf-origin:hover {
transform-origin: top left;
transform: rotate(45deg);
}
<div class="caja-demo
transf-origin">Eje</div>
18. Combo
Combo
Rota y escala.
.transf-multi:hover {
transform: rotate(45deg) scale(1.2);
}
<div class="caja-demo
transf-multi">Combo</div>
19. Giro 3D
3D
Perspectiva Y.
.transf-3d:hover {
transform: perspective(500px) rotateY(180deg);
}
<div class="caja-demo transf-3d">3D</div>
20. Espejo
Flip
Invierte horiz.
.transf-flip:hover {
transform: scaleX(-1);
}
<div class="caja-demo
transf-flip">Flip</div>
3. Filtros Básicos
21. Blur
Blur
Desenfoque.
.filt-blur:hover {
filter: blur(5px);
}
<div class="caja-demo
filt-blur">Blur</div>
22. Grayscale
Gris
Blanco y negro.
.filt-gray:hover {
filter: grayscale(100%);
}
<div class="caja-demo
filt-gray">Gris</div>
23. Sepia
Sepia
Tono antiguo.
.filt-sepia:hover {
filter: sepia(100%);
}
<div class="caja-demo
filt-sepia">Sepia</div>
24. Brillo
Brillo
Más luz.
.filt-bright:hover {
filter: brightness(150%);
}
<div class="caja-demo
filt-bright">Brillo</div>
25. Contraste
Contraste
Más contraste.
.filt-contrast:hover {
filter: contrast(200%);
}
<div class="caja-demo
filt-contrast">Contraste</div>
26. Invertir
Invert
Negativo.
.filt-invert:hover {
filter: invert(100%);
}
<div class="caja-demo
filt-invert">Invert</div>
27. Saturar
Color
Color intenso.
.filt-saturate:hover {
filter: saturate(300%);
}
<div class="caja-demo
filt-saturate">Color</div>
28. Matiz
Matiz
Rota color.
.filt-hue:hover {
filter: hue-rotate(90deg);
}
<div class="caja-demo
filt-hue">Matiz</div>
29. Sombra
Sombra
Sombra real.
.filt-drop:hover {
filter: drop-shadow(0 0 10px red);
}
<div class="caja-demo
filt-drop">Sombra</div>
4. Animaciones (Keyframes)
30. Giro
Giro
Infinito.
.anim-spin:hover {
animation: spin 1s linear infinite;
}
<div class="caja-demo
anim-spin">Giro</div>
31. Rebote
Boing
Salta.
.anim-bounce:hover {
animation: bounce 0.5s infinite;
}
<div class="caja-demo
anim-bounce">Boing</div>
32. Latido
Pum
Corazón.
.anim-pulse:hover {
animation: pulse 1s infinite;
}
<div class="caja-demo
anim-pulse">Pum</div>
33. Temblor
Shake
Vibra.
.anim-shake:hover {
animation: shake 0.3s infinite;
}
<div class="caja-demo
anim-shake">Shake</div>
34. Flash
Flash
Parpadea.
.anim-fade:hover {
animation: fade 1s infinite;
}
<div class="caja-demo
anim-fade">Flash</div>
35. Color
Color
Ciclo color.
.anim-color:hover {
animation: color-change 2s infinite;
}
<div class="caja-demo
anim-color">Color</div>
36. Morfosis
Forma
Cuadrado a círculo.
.anim-border:hover {
animation: border-run 2s infinite;
}
<div class="caja-demo
anim-border">Forma</div>
37. Balanceo
Swing
Péndulo.
.anim-swing:hover {
animation: swing 1s ease;
}
<div class="caja-demo
anim-swing">Swing</div>
5. Efectos Complejos y UI
38. Loader
Spinner.
.complex-loader {
animation: spin 1s linear infinite;
}
<div class="complex-loader"></div>
39. Btn Gradiente
Fondo animado.
.complex-btn {
background-size: 200% 200%;
animation: gradient 3s ease infinite;
}
<button class="complex-btn">Hover</button>
40. Typing
Escribiendo
Mecanografía.
.anim-type {
animation: typing 2s steps(9), blink .5s step-end infinite alternate;
}
<div class="anim-type">Escribiendo</div>
41. Pulse Btn
Onda expansiva.
.btn-pulse {
animation: pulse-shadow 2s infinite;
}
<button class="btn-pulse">Click</button>
42. Accordion
Details
Expande contenido.
.ui-accordion:hover {
height: 100px;
}
<div class='ui-accordion'>Details</div>
43. Modal
Popup
Aparece centro.
.ui-modal:hover {
transform: scale(1); opacity: 1;
}
<div class='ui-modal'>Popup</div>
44. Sidebar
Desliza lateral.
.ui-sidebar:hover {
transform: translateX(0);
}
<div class='ui-sidebar'>Menu</div>
45. Dropdown
List
Despliega lista.
.ui-dropdown:hover {
display: block;
}
<div class='ui-dropdown'>List</div>
46. Progress
Barra carga.
.ui-progress:hover {
width: 100%;
}
<div class='ui-progress'></div>
47. Range
Deslizador.
.ui-range:hover {
left: 100%;
}
<div class='ui-range'></div>
48. Switch 3D
ON
Interruptor 3D.
.ui-switch-3d:hover {
transform: rotateX(0);
}
<div class='ui-switch-3d'>ON</div>
49. Notify
Alert
Notificación.
.ui-notify:hover {
right: 20px;
}
<div class='ui-notify'>Alert</div>
50. Search
Expande input.
.ui-search:hover {
width: 200px;
}
<input class='ui-search'>
51. FAB
Botón flotante.
.ui-fab:hover {
transform: scale(1.1) rotate(90deg);
}
<button class='ui-fab'>+</button>
6. Variaciones Avanzadas
52. Posición Fondo
Fondo
Mueve degradado.
.trans-bg-pos:hover {
background-position: 100% 100%;
}
<div class="caja-demo
trans-bg-pos">Fondo</div>
53. Glow Texto
Glow
Sombra texto.
.trans-text-shadow:hover {
text-shadow: 0 0 10px white;
}
<div class="caja-demo
trans-text-shadow">Glow</div>
54. Outline
Aro
Borde exterior.
.trans-outline:hover {
outline-offset: 5px;
}
<div class="caja-demo
trans-outline">Aro</div>
55. Blur Hover
Blur
Desenfoca.
.trans-filter-blur:hover {
filter: blur(2px);
}
<div class="caja-demo
trans-filter-blur">Blur</div>
56. Fuente
Texto
Crece texto.
.trans-font-size:hover {
font-size: 1.2em;
}
<div class="caja-demo
trans-font-size">Texto</div>
57. Condensar
Juntar
Junta letras.
.trans-spacing-condense:hover {
letter-spacing: -2px;
}
<div class="caja-demo
trans-spacing-condense">Juntar</div>
58. Color Borde
Borde
Solo color.
.trans-border-color:hover {
border-color: #e74c3c;
}
<div class="caja-demo
trans-border-color">Borde</div>
59. Padding
Gordo
Más relleno.
.trans-padding:hover {
padding: 20px;
}
<div class="caja-demo
trans-padding">Gordo</div>
60. Margin
Huir
Se empuja.
.trans-margin:hover {
margin-left: 20px;
}
<div class="caja-demo
trans-margin">Huir</div>
61. Alejar
Lejos
Pequeño y transp.
.trans-opacity-scale:hover {
opacity: 0.5; transform: scale(0.8);
}
<div class="caja-demo
trans-opacity-scale">Lejos</div>
62. Skew+Rot
Combo
Sesga y rota.
.transf-skew-rotate:hover {
transform: skew(20deg) rotate(20deg);
}
<div class="caja-demo
transf-skew-rotate">Combo</div>
63. Zoom 3D
Z-Axis
Acerca en Z.
.transf-translate-z:hover {
transform: translateZ(50px);
}
<div class="caja-demo
transf-translate-z">Z-Axis</div>
64. Giro X
Eje X
Giro vertical.
.transf-rotate-x:hover {
transform: rotateX(45deg);
}
<div class="caja-demo transf-rotate-x">Eje
X</div>
65. Puerta
Puerta
Gira y mueve.
.transf-rotate-y-move:hover {
transform: rotateY(45deg) translateX(10px);
}
<div class="caja-demo
transf-rotate-y-move">Puerta</div>
66. Estirar
Chicle
Escala desigual.
.transf-stretch:hover {
transform: scale(1.5, 0.5);
}
<div class="caja-demo
transf-stretch">Chicle</div>
67. Wobble
Wobble
Tambaleo.
.transf-wobble:hover {
animation: wobble;
}
<div class="caja-demo
transf-wobble">Wobble</div>
68. Pivote BR
Pivote
Desde abajo der.
.transf-origin-br:hover {
transform-origin: bottom right;
}
<div class="caja-demo
transf-origin-br">Pivote</div>
69. Persp. Low
Cerca
Muy exagerada.
.transf-perspective-low:hover {
transform: perspective(100px);
}
<div class="caja-demo
transf-perspective-low">Cerca</div>
70. Persp. High
Lejos
Más natural.
.transf-perspective-high:hover {
transform: perspective(1000px);
}
<div class="caja-demo
transf-perspective-high">Lejos</div>
71. Matrix
Matrix
Matriz 2D.
.transf-matrix:hover {
transform: matrix(1, 0.5, -0.5, 1, 0, 0);
}
<div class="caja-demo
transf-matrix">Matrix</div>
72. Blur+Gray
Sad
Borroso y gris.
.filt-blur-gray:hover {
filter: blur(2px) grayscale(100%);
}
<div class="caja-demo
filt-blur-gray">Sad</div>
73. Oscuro
Dark
Menos brillo.
.filt-bright-low:hover {
filter: brightness(50%);
}
<div class="caja-demo
filt-bright-low">Dark</div>
74. Lavado
Wash
Poco contraste.
.filt-contrast-low:hover {
filter: contrast(50%);
}
<div class="caja-demo
filt-contrast-low">Wash</div>
75. Opuesto
Opuesto
Color complementario.
.filt-hue-180:hover {
filter: hue-rotate(180deg);
}
<div class="caja-demo
filt-hue-180">Opuesto</div>
76. Grisáceo
Gris
Invertir 50%.
.filt-invert-50:hover {
filter: invert(50%);
}
<div class="caja-demo
filt-invert-50">Gris</div>
77. Apagado
Muted
Casi gris.
.filt-saturate-low:hover {
filter: saturate(0.2);
}
<div class="caja-demo
filt-saturate-low">Muted</div>
78. Vintage
Old
Sepia suave.
.filt-sepia-low:hover {
filter: sepia(50%);
}
<div class="caja-demo
filt-sepia-low">Old</div>
79. Sombra Azul
Blue
Sombra color.
.filt-drop-blue:hover {
filter: drop-shadow(blue);
}
<div class="caja-demo
filt-drop-blue">Blue</div>
80. Opacidad
Ghost
Filtro opacidad.
.filt-opacity:hover {
filter: opacity(50%);
}
<div class="caja-demo
filt-opacity">Ghost</div>
81. Multi Sombra
Multi
Sombras dobles.
.filt-shadows:hover {
filter: drop-shadow(0 0 5px rgba(0,0,0,0.5)) drop-shadow(0 0 5px rgba(0,0,0,0.5));
}
<div class="caja-demo
filt-shadows">Multi</div>
82. Slide In L
Entra izq.
.anim-slide-left:hover {
animation: slide-left 0.5s;
}
<div class="caja-demo
anim-slide-left">Entra</div>
83. Slide In R
Entra der.
.anim-slide-right:hover {
animation: slide-right 0.5s;
}
<div class="caja-demo
anim-slide-right">Entra</div>
84. Zoom In
Zoom
Aparece creciendo.
.anim-zoom-in:hover {
animation: zoom-in 0.5s;
}
<div class="caja-demo
anim-zoom-in">Zoom</div>
85. Zoom Out
Bye
Desaparece.
.anim-zoom-out:hover {
animation: zoom-out 0.5s;
}
<div class="caja-demo
anim-zoom-out">Bye</div>
86. Flip Card
Flip
Vuelta completa.
.anim-flip-card:hover {
animation: flip-card 1s;
}
<div class="caja-demo
anim-flip-card">Flip</div>
87. Wiggle
Wiggle
Meneo rápido.
.anim-wiggle:hover {
animation: wiggle 0.2s infinite;
}
<div class="caja-demo
anim-wiggle">Wiggle</div>
88. Heartbeat
Beat
Latido rápido.
.anim-heartbeat:hover {
animation: heartbeat 1s infinite;
}
<div class="caja-demo
anim-heartbeat">Beat</div>
89. Rubber
Goma
Efecto elástico.
.anim-rubber:hover {
animation: rubberBand 1s;
}
<div class="caja-demo
anim-rubber">Goma</div>
90. Flash
Flash
Flash foto.
.anim-flash:hover {
animation: flash 1s;
}
<div class="caja-demo
anim-flash">Flash</div>
91. Caída
Caída
Cae colgado.
.anim-hinge:hover {
animation: hinge 2s;
}
<div class="caja-demo
anim-hinge">Caída</div>
7. Efectos de Texto e Imagen
92. Neón
NEON
Brillo neón.
.text-neon {
text-shadow: 0 0 5px #fff, 0 0 20px #ff00de;
}
<div class="text-neon">NEON</div>
93. Gradiente
TEXTO
Texto degradado.
.text-gradient {
background: linear-gradient(to right, red, orange);
background-clip: text;
color: transparent;
}
<div class="text-gradient">TEXTO</div>
94. Stroke
STROKE
Solo borde.
.text-stroke {
-webkit-text-stroke: 1px white;
color: transparent;
}
<div class="text-stroke">STROKE</div>
95. Subrayado
Expande línea.
.text-underline-exp:hover::after {
width: 100%;
}
<a class="text-underline-exp">Hover Me</a>
96. Reveal
Texto Revelado
Aparece escribiendo.
.text-reveal {
animation: typing 2s steps(40, end);
}
<div class="text-reveal">Texto
Revelado</div>
97. Zoom Img
...
Zoom interno.
.img-zoom-cont:hover .img-zoom {
transform: scale(1.2);
}
<div class="img-zoom-cont">...</div>
98. B&W a Color
Color al hover.
.img-gray-col:hover {
filter: grayscale(0);
}
<div class="img-gray-col"></div>
99. Overlay
Capa oscura.
.img-overlay-cont:hover .img-overlay {
opacity: 1;
}
<div class="img-overlay">Hola</div>
100. Círculo
Cuadrado a círculo.
.img-circle {
border-radius: 50%;
}
<div class="img-circle"></div>
101. Blur Focus
Enfoca al hover.
.img-blur-focus:hover {
filter: blur(0);
}
<div class="img-blur-focus"></div>
102. Toggle
Interruptor iOS.
.ui-toggle:hover {
background: #2196F3;
}
<div class="ui-toggle"></div>
103. Checkbox
Check animado.
.ui-checkbox:hover {
transform: rotate(45deg);
}
<div class="ui-checkbox"></div>
104. Input
Expande al foco.
.ui-input:focus {
width: 100%;
}
<input class="ui-input">
105. Ripple
Click
Onda material.
.ui-ripple:active::after {
width: 200px; height: 200px;
}
<div class="caja-demo
ui-ripple">Click</div>
106. Card Lift
Card
Levita.
.ui-card-lift:hover {
transform: translateY(-10px);
}
<div class="ui-card-lift">Card</div>
107. Ribbon
Oferta
Cinta esquina.
.ui-ribbon::before {
content: 'NEW';
transform: rotate(45deg);
}
<div class="ui-ribbon">Oferta</div>
108. Tooltip
Mensaje flotante.
.ui-tooltip:hover::before {
opacity: 1;
}
<button class="ui-tooltip">Hover</button>
109. 3D Card
3D
Elemento 3D estático.
<div
style="transform:rotateX(20deg)">3D</div>
110. Fin
100
¡Llegamos!
<div>100</div>
8. Colección Extendida
111. Gradient Anim
BG
Fondo animado
.bg-grad-anim:hover {
background-position: 100% 50%;
}
<div class='bg-grad-anim'>BG</div>
112. Pattern
Patrón
Repite patrón
.bg-pattern:hover {
background-image: radial-gradient(circle, #333 10%, transparent 10%);
}
<div class='bg-pattern'>Patrón</div>
113. Mask
Mascara
Recorte forma
.bg-mask:hover {
-webkit-mask-image: url('imagenes/imagen.jpg');
mask-image: url('imagenes/imagen.jpg');
}
<div class='bg-mask'>Mascara</div>
114. Clip Text
Texto
Fondo en texto
.bg-clip-text:hover {
background-clip: text; color: transparent;
}
<div class='bg-clip-text'>Texto</div>
115. Blend Mode
Mezcla
Modo fusión
.bg-blend:hover {
background-blend-mode: multiply;
}
<div class='bg-blend'>Mezcla</div>
116. Parallax
Para
Efecto prof.
.bg-parallax:hover {
background-attachment: fixed;
}
<div class='bg-parallax'>Para</div>
117. Stripes
Rayas
Rayas diag.
.bg-stripes:hover {
background: repeating-linear-gradient(45deg, #333, #333 10px, #444 10px, #444 20px);
}
<div class='bg-stripes'>Rayas</div>
118. Circle Reveal
Rev
Círculo abre
.bg-circ-rev:hover {
clip-path: circle(100%);
}
<div class='bg-circ-rev'>Rev</div>
119. Skew BG
Sesgo
Fondo incl.
.bg-skew:hover {
transform: skewY(-5deg);
}
<div class='bg-skew'>Sesgo</div>
120. Multi BG
Capas
Varios fondos
.bg-multi:hover {
background-image: url(1), url(2);
}
<div class='bg-multi'>Capas</div>
121. Glass
Vidrio
Glassmorphism
.bg-glass:hover {
backdrop-filter: blur(10px);
}
<div class='bg-glass'>Vidrio</div>
122. Noise
Ruido
Textura ruido
.bg-noise:hover {
filter: contrast(150%) brightness(100%);
}
<div class='bg-noise'>Ruido</div>
123. Vignette
Viñeta
Bordes osc.
.bg-vignette:hover {
box-shadow: inset 0 0 50px #000;
}
<div class='bg-vignette'>Viñeta</div>
124. Conic
Cono
Grad. cónico
.bg-conic:hover {
background: conic-gradient(from 0deg, red, yellow, green, blue, red);
}
<div class='bg-conic'>Cono</div>
125. Mesh
Malla
Grad. malla
.bg-mesh:hover {
background-image: radial-gradient(circle, #333 10%, transparent 10%);
}
<div class='bg-mesh'>Malla</div>
126. Polka
Puntos
Lunares
.bg-polka:hover {
background-image: radial-gradient(circle, #333 10%, transparent 10%);
}
<div class='bg-polka'>Puntos</div>
127. Checkers
Ajedrez
Cuadros
.bg-check:hover {
background-image: conic-gradient(from 0deg, red, yellow, green, blue, red);
}
<div class='bg-check'>Ajedrez</div>
128. Zigzag
Zigzag
Ondas
.bg-zigzag:hover {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
<div class='bg-zigzag'>Zigzag</div>
129. Waves
Olas
Olas SVG
.bg-waves:hover {
background-image:
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSJ3aGl0ZSIgLz4KICA8Y2lyY2xlIGN4PSI1IiBjeT0iNSIgcj0iNCIgZmlsbD0iYmxhY2siIC8+Cjwvc3ZnPg==");
}
<div class='bg-waves'>Olas</div>
130. Blur BG
Fondo
Blur fondo
.bg-blur-back:hover {
backdrop-filter: blur(5px);
}
<div class='bg-blur-back'>Fondo</div>
131. Double Border
Doble
Dos bordes
.bd-double:hover {
border: 5px double;
}
<div class='bd-double'>Doble</div>
132. Dashed Anim
Guiones
Borde animado
.bd-dashed:hover {
border: 2px dashed; animation: border-dance;
}
<div class='bd-dashed'>Guiones</div>
133. Gradient Border
Grad
Borde color
.bd-grad:hover {
border-image: linear-gradient(to right, red, orange) 1;
}
<div class='bd-grad'>Grad</div>
134. Radius Anim
Radio
Radio var.
.bd-radius:hover {
border-radius: 50% 20% / 10% 40%;
}
<div class='bd-radius'>Radio</div>
135. Shadow Inner
Int
Sombra int.
.bd-shadow-in:hover {
box-shadow: inset 0 0 10px;
}
<div class='bd-shadow-in'>Int</div>
136. Neumorphism
Soft
Relieve suave
.bd-neumorph:hover {
box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
}
<div class='bd-neumorph'>Soft</div>
137. Glow
Brillo
Resplandor
.bd-glow:hover {
box-shadow: 0 0 15px cyan;
}
<div class='bd-glow'>Brillo</div>
138. Outline Offset
Outline
Separa borde
.bd-outline:hover {
outline-offset: 5px;
}
<div class='bd-outline'>Outline</div>
139. Corner Shape
Esq
Esq. cortada
.bd-corner:hover {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
<div class='bd-corner'>Esq</div>
140. Ribbon Border
Cinta
Borde cinta
.bd-ribbon:hover {
border-left: 5px solid red;
}
<div class='bd-ribbon'>Cinta</div>
141. Underline Anim
Sub
Línea crece
.bd-under:hover {
border-bottom: 2px solid; width: 100%;
}
<div class='bd-under'>Sub</div>
142. Bracket
[ ]
Corchetes
.bd-bracket:hover::before { content: '['; }
.bd-bracket:hover::after { content: ']'; }
<div class='bd-bracket'>[ ]</div>
143. Frame
Marco
Marco foto
.bd-frame:hover {
border: 10px solid white; box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
<div class='bd-frame'>Marco</div>
144. Stitched
Cosido
Efecto hilo
.bd-stitch:hover {
border: 2px dashed white; box-shadow: 0 0 0 4px blue;
}
<div class='bd-stitch'>Cosido</div>
145. Rainbow
Arco
Multicolor
.bd-rainbow:hover {
box-shadow: 0 0 0 2px red, 0 0 0 4px orange, 0 0 0 6px yellow;
}
<div class='bd-rainbow'>Arco</div>
146. Inset 3D
Hundido
Bajo relieve
.bd-inset:hover {
border-top: 2px solid #333; border-bottom: 2px solid #fff;
}
<div class='bd-inset'>Hundido</div>
147. Outset 3D
Salido
Alto relieve
.bd-outset:hover {
border-top: 2px solid #fff; border-bottom: 2px solid #333;
}
<div class='bd-outset'>Salido</div>
148. Groove
Surco
Tallado
.bd-groove:hover {
border: 5px groove;
}
<div class='bd-groove'>Surco</div>
149. Ridge
Cresta
Relieve
.bd-ridge:hover {
border: 5px ridge;
}
<div class='bd-ridge'>Cresta</div>
150. Morph Border
Morfo
Borde vivo
.bd-morph:hover {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}
<div class='bd-morph'>Morfo</div>
151. Tooltip Top
Tip
Arriba
.ps-tooltip-t:hover::before { content: 'Info';
top: -20px; }
<div class='ps-tooltip-t'>Tip</div>
152. Tooltip Right
Tip
Derecha
.ps-tooltip-r:hover::before { content: 'Info';
left: 100%; }
<div class='ps-tooltip-r'>Tip</div>
153. Badge
Icon
Notificación
.ps-badge:hover::after { content: '1';
background: red; }
<div class='ps-badge'>Icon</div>
154. Quote
Cita
Comillas
.ps-quote:hover::before { content: '“';
font-size: 2em; }
<div class='ps-quote'>Cita</div>
155. Arrow
Flecha
Triángulo
.ps-arrow:hover::after { content: ''; border:
5px solid transparent; }
<div class='ps-arrow'>Flecha</div>
156. Clearfix
Clear
Limpia float
.ps-clear:hover::after { content: ''; display:
table; clear: both; }
<div class='ps-clear'>Clear</div>
157. Overlay Icon
Icono encima
.ps-icon:hover::after { content: '?'; position:
absolute; }
<div class='ps-icon'>Img</div>
158. Watermark
Marca
Texto fondo
.ps-water:hover::before { content: 'DRAFT';
opacity: 0.1; }
<div class='ps-water'>Marca</div>
159. Counter
List
Numeración
.ps-count:hover {
counter-increment: section; content: counter(section);
}
<div class='ps-count'>List</div>
160. Ribbon Corner
New
Esq. sup.
.ps-rib-c:hover::after { content: 'NEW';
transform: rotate(45deg); }
<div class='ps-rib-c'>New</div>
161. Underline Dot
Dot
Punto final
.ps-dot:hover::after { content: '.'; color: red;
}
<div class='ps-dot'>Dot</div>
162. External Link
Link
Icono ext.
.ps-ext:hover::after { content: '?'; }
<div class='ps-ext'>Link</div>
163. Required
Input
Asterisco
.ps-req:hover::after { content: '*'; color: red;
}
<div class='ps-req'>Input</div>
164. Placeholder
Texto fant.
.ps-place:hover::placeholder { color: #ccc; }
<input class='ps-place' placeholder='Text'>
165. Selection
Sel
Selección
.ps-sel:hover::selection { background: yellow; }
<div class='ps-sel'>Sel</div>
166. First Letter
Letra
Capital
.ps-first:hover::first-letter { font-size: 2em;
}
<div class='ps-first'>Letra</div>
167. First Line
Línea
Primera lín.
.ps-line:hover::first-line { font-weight: bold;
}
<div class='ps-line'>Línea</div>
168. Backdrop
Telón
.ps-back::backdrop { background:
rgba(0,0,0,0.5); }
<dialog class='ps-back'>Fondo</dialog>
169. Marker
List
Viñeta
.ps-mark { display: list-item; list-style-position: inside; } .ps-mark:hover::marker { color: blue; }
<div class='ps-mark'>List</div>
170. File Button
Btn archivo
.ps-file:hover::file-selector-button {
background: #eee; }
<input type='file' class='ps-file'>
171. Accordion Open
Item
Abre panel
.ui-acc-open:hover {
max-height: 100px;
}
<div class='ui-acc-open'>Item</div>
172. Tab Active
Tab
Pestaña act.
.ui-tab-act:hover {
border-bottom: 2px solid blue;
}
<div class='ui-tab-act'>Tab</div>
173. Switch On
Sw
Encendido
.ui-sw-on:hover {
background: green; justify-content: flex-end;
}
<div class='ui-sw-on'>Sw</div>
174. Btn Press
Btn
Hundir
.ui-btn-press:hover {
transform: scale(0.95);
}
<div class='ui-btn-press'>Btn</div>
175. Input Valid
Ok
Verde
.ui-valid:hover {
border-color: green;
}
<div class='ui-valid'>Ok</div>
176. Input Invalid
No
Rojo
.ui-invalid:hover {
border-color: red;
}
<div class='ui-invalid'>No</div>
177. Loading Bar
Progreso
.ui-load-bar:hover {
width: 50%; background: blue;
}
<div class='ui-load-bar'>Load</div>
178. Step Active
1
Paso act.
.ui-step:hover {
background: blue; color: white;
}
<div class='ui-step'>1</div>
179. Card Hover
Card
Sube
.ui-card-h:hover {
transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
<div class='ui-card-h'>Card</div>
180. Menu Slide
Entra
.ui-menu-s:hover {
transform: translateX(0);
}
<div class='ui-menu-s'>Menu</div>
181. Toast Show
Msg
Aviso
.ui-toast:hover {
opacity: 1; bottom: 20px;
}
<div class='ui-toast'>Msg</div>
182. Fab Rotate
+
Gira x
.ui-fab-r:hover {
transform: rotate(45deg);
}
<div class='ui-fab-r'>+</div>
183. Search Expand
Find
Crece
.ui-search-e:hover {
width: 200px;
}
<div class='ui-search-e'>Find</div>
184. Nav Link
Link
Subraya
.ui-nav:hover {
text-decoration: underline;
}
<div class='ui-nav'>Link</div>
185. Dropdown Open
List
Muestra
.ui-drop:hover {
display: block;
}
<div class='ui-drop'>List</div>
186. Modal Show
Pop
Visible
.ui-mod-s:hover {
visibility: visible; opacity: 1;
}
<div class='ui-mod-s'>Pop</div>
187. Sidebar Push
Push
Empuja
.ui-side-p:hover {
margin-left: 200px;
}
<div class='ui-side-p'>Push</div>
188. Sticky Header
Head
Fijo
.ui-stick:hover {
position: sticky; top: 0;
}
<div class='ui-stick'>Head</div>
189. Scroll Snap
Scroll
Ajuste
.ui-snap:hover {
scroll-snap-align: start;
}
<div class='ui-snap'>Scroll</div>
190. Focus Ring
Focus
Anillo
.ui-focus:hover {
outline: 2px solid blue;
}
<div class='ui-focus'>Focus</div>
191. Grid Gap
Grid
Espacio
.lay-gap:hover {
gap: 20px;
}
<div class='lay-gap'>Grid</div>
192. Flex Grow
Flex
Crece
.lay-grow:hover {
flex-grow: 1;
}
<div class='lay-grow'>Flex</div>
193. Flex Shrink
Flex
Encoge
.lay-shrink:hover {
flex-shrink: 1;
}
<div class='lay-shrink'>Flex</div>
194. Order Change
1
Reordena
.lay-order:hover {
order: 2;
}
<div class='lay-order'>1</div>
195. Align Self
Item
Alinea
.lay-align:hover {
align-self: center;
}
<div class='lay-align'>Item</div>
196. Justify Self
Item
Justifica
.lay-just:hover {
justify-self: end;
}
<div class='lay-just'>Item</div>
197. Span Col
Col
Ocupa col
.lay-span-c:hover {
grid-column: span 2;
}
<div class='lay-span-c'>Col</div>
198. Span Row
Row
Ocupa fila
.lay-span-r:hover {
grid-row: span 2;
}
<div class='lay-span-r'>Row</div>
199. Auto Fit
Grid
Ajuste auto
.lay-fit:hover {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
<div class='lay-fit'>Grid</div>
200. Auto Fill
Grid
Relleno
.lay-fill:hover {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
<div class='lay-fill'>Grid</div>
201. Masonry
Wall
Muro
.lay-mason:hover {
grid-template-rows: masonry;
}
<div class='lay-mason'>Wall</div>
202. Subgrid
Sub
Hereda
.lay-sub:hover {
grid-template-columns: subgrid;
}
<div class='lay-sub'>Sub</div>
203. Aspect Ratio
16:9
Proporción
.lay-ratio:hover {
aspect-ratio: 16/9;
}
<div class='lay-ratio'>16:9</div>
204. Object Fit
Img
Ajuste img
.lay-obj:hover {
object-fit: cover;
}
<div class='lay-obj'>Img</div>
205. Object Pos
Img
Pos img
.lay-pos:hover {
object-position: top;
}
<div class='lay-pos'>Img</div>
206. Float Left
Float
Flota izq
.lay-float:hover {
float: left;
}
<div class='lay-float'>Float</div>
207. Clear Both
Clear
Limpia
.lay-clear:hover {
clear: both;
}
<div class='lay-clear'>Clear</div>
208. Multi Col
Text
Columnas
.lay-cols:hover {
column-count: 3;
}
<div class='lay-cols'>Text</div>
209. Break Inside
Box
No partir
.lay-break:hover {
break-inside: avoid;
}
<div class='lay-break'>Box</div>
210. Writing Mode
Text
Vertical
.lay-write:hover {
writing-mode: vertical-rl;
}
<div class='lay-write'>Text</div>