20 estilos css

Pondre 20 estilos css ya que es util saber formas de diseñar eeb

1. Sombra de texto

text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

Agrega una sombra al texto para mejorar su visibilidad o darle un efecto estilizado.

2. Sombra de caja

box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);

Crea una sombra alrededor del elemento para dar sensación de profundidad.

3. Degradados

background: linear-gradient(to right, #ff7e5f, #feb47b);

Genera una transición de colores en el fondo del elemento.

4. Bordes redondeados

border-radius: 10px;

Suaviza las esquinas de un elemento para darle un aspecto más moderno.

5. Transparencia

opacity: 0.5; o background: rgba(255, 255, 255, 0.5);

Permite hacer un elemento semitransparente sin afectar su contenido.

6. Rotación

transform: rotate(45deg);

Gira un elemento en el ángulo especificado.

7. Escala

transform: scale(1.2);

Aumenta o reduce el tamaño de un elemento sin afectar su contenido.

8. Sesgado

transform: skewX(20deg);

Inclina el elemento en el eje X o Y para un efecto de distorsión.

9. Transiciones

transition: all 0.3s ease-in-out;

Suaviza los cambios de propiedades como color, tamaño o posición.

10. Animaciones con Keyframes

animation: mover 2s infinite alternate;

Crea efectos en movimiento usando pasos definidos.

11. Filtro de escala de grises

filter: grayscale(100%);

Convierte una imagen en blanco y negro.

12. Invertir colores

filter: invert(100%);

Invierte los colores de un elemento, creando un efecto negativo.

13. Saturación de imagen

filter: saturate(200%);

Ajusta la intensidad de los colores en imágenes o elementos.

14. Efecto de desenfoque en imágenes

filter: blur(5px);

Aplica un desenfoque suave para un efecto de profundidad o enfoque.

15. Pseudo-elementos (::before y ::after)

content: ""; display: block;

Agrega contenido extra antes o después de un elemento sin modificar el HTML.

16. Listas personalizadas

list-style: square inside;

Cambia el estilo y la posición de los marcadores en listas.

17. Fondos fijos

background-attachment: fixed;

Hace que el fondo se mantenga fijo mientras el contenido se desplaza.

18. Efecto de reflejo

box-shadow: 0px -10px 20px rgba(0, 0, 0, 0.2); transform: scaleY(-1);

Simula un reflejo debajo del elemento.

19. Efecto de botones pulsables

active: transform: scale(0.95);

Hace que el botón se encoja ligeramente al ser presionado.

20. Efecto de superposición de colores en imágenes

mix-blend-mode: multiply;

Mezcla el color de un elemento con los elementos de fondo para lograr efectos visuales interesantes.