Compito precedente
Sfondi13/14
Torna all'elenco delle attività
  1. 1. Proprietà background-color
  2. 2. Proprietà background-image
  3. 3. Proprietà background-repeat
  4. 4. Proprietà background-position
  5. 5. Ancora un po' di background-position
  6. 6. Proprietà background-attachment
  7. 7. Proprietà background
  8. 8. Formato JPEG
  9. 9. Formato PNG-8
  10. 10. Formato PNG-24
  11. 11. Formato GIF
  12. 12. Elementi annidati con sfondi
  13. 13. Effetti con sfondi ripetuti
  14. 14. Sprites
Compito successivo
  • Corsi
  • Registrazione
  • Accedi

Caricamento...
In pochi secondi sarà pronto.

  • Teoria
  • Teoria

Effetti con sfondi ripetuti

Gli sfondi ripetuti sono spesso utilizzati per creare interessanti effetti decorativi. Ad esempio, possono essere utilizzati per realizzare:

  • punti;
  • bordi frastagliati;
  • gradienti e ombre.

Sì, i gradienti e le ombre possono essere realizzati con i CSS. Ma per ombre o gradienti complessi è più facile usare un PNG semitrasparente.

La cosa più importante quando si creano questi effetti è scegliere un'immagine con il periodo giusto. Può essere molto piccola e consentirà di risparmiare notevolmente sul peso della pagina.

Esercitiamoci. Per favore, cambiate la modalità di ripetizione dopo aver prescritto le immagini di sfondo. In questo modo sarà più chiaro.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="it"> <head> <meta charset="utf-8"> <title>Effetti con sfondi ripetuti</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%; }

Il codice è cambiato, fai clic su "Aggiorna" o attiva l'esecuzione automatica.

Sei passato a un'altra pagina

Fare clic all'interno del mini-browser per evidenziare questa finestra.

100%
ObiettiviFatto
0

    Impostare le immagini di sfondo in modo che si ripetano orizzontalmente:

    1. stitch.png al primo blocco,
    2. zigzag.png al secondo blocco,
    3. shadow.png al terzo blocco.

    © 2023-2024, codegym.study