Dec
26
Pattern grafici come sfondo
Con il post di oggi ci occupiamo dei pattern grafici da usare come sfondo ripetuto. Questa tecnica viene spesso usata nei siti per dare l’idea di un’immagine “infinita” dello sfondo.
Per il download dei pattern suggerisco il sito squidfingers che nella sezione “pattern” mette a disposizione una scelta grafica vasta e (a mio avviso) ottima.
Le regole CSS sono esigue per la realizzazione. Vediamo quali:
body {
background:url("background.jpg") repeat top left;
}
Con questa piccola regola diamo lo sfondo “background.jpg” al “body” della pagina web, dichiariamo che dovrà essere ripetuto sia in orizzontale che in verticale, e che dovrà essere ancorato in alto a sinistra.
Se al posto della variabile “repeat” specificassimo “repeat-x“, lo sfondo verrebbe ripetuto solo in orizzontale, al contrario con “repeat-y” lo troveremmo ripetuto solo in verticale. Se non vogliamo che venga ripetuto specifichiamo “no-repeat“, con la variabile “inherit“, invece l’elemento interessato “erediterà” la caratteristica dall’elemento superiore.
Ed ecco qui il file contenente i migliori (a mio avviso) pattern che sono riuscito a trovare qua e la. Sia quelli che sono riuscito a trovare, sia i miei sono liberamente utilizzabili. Usateli e distribuiteli (se vi piacciono).
Per una veloce consultazione di seguito elenco i pattern inclusi nello zip.
[gallery=images/textures]
