Teoría
Teoría

Efectos con fondos repetitivos

Los fondos repetidos se utilizan a menudo para crear interesantes efectos decorativos. Por ejemplo, se puede utilizar para hacer:

puntos;
bordes dentados;
degradados y sombras.

Sí, los degradados y las sombras se pueden hacer con CSS. Pero para sombras o degradados complejos es más fácil utilizar un PNG semitransparente.

Lo más importante a la hora de crear estos efectos es elegir una imagen con el período adecuado. Puede ser muy pequeña y supondrá un importante ahorro de peso en la página.

A practicar. Por favor, cambia el modo de repetición después de haber prescrito las imágenes de fondo. Será más claro de esa manera.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Efectos con fondos repetitivos</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block block1"></div> <div class="block block2"></div> <div class="block block3"></div> </body> </html>

CSS

body { padding-top: 40px; } .block { height: 70px; margin: 30px 50px; background-color: #3498db; background-repeat: no-repeat; border-radius: 5px; box-shadow: 1px 1px 3px #999999; } .block1 { background-position: -30px 30px; } .block2 { background-position: 0 0; } .block3 { background-position: 0 100%; }

ObjetivosRealizado

Configure las imágenes de fondo para que se repitan horizontalmente:

stitch.png al primer bloque,
zigzag.png al segundo bloque,
shadow.png al tercer bloque.