Épp most néztem a statisztikában, hogy ez volt az első guglis kifejezés, amivel rátaláltak az új zina.hu-ra, de gondolom meglepődhetett emberünk, hogy túl sok infót nem talált, így elhatároztam, hogy összegyűjtögetem, milyen háttereket hogyan érdemes használni.
Gradient (átmenetes):
Igen divatos és vonzó, választunk két egymáshoz illő színt, fentről lefelé készítünk belőle egy átmenetet (pl: http://mint.com vagy http://www.ronpaul2008.com), és kész. Egyébként itt az egész háttér ennyi: body-background.png. A css fájlunkba ezt valahogy így kell aplikálnunk.
body {background: #fff url(/images/body-background.png) repeat-x top;}
A háttér színeként azt a színt határozzuk meg, ami alul van, így hosszabb oldal esetén is szép egybefüggő hátteret kapunk.
Egyszínű:
Manapság a letisztult hátterek a használatosak, így bátran használhatunk egyetelen egy színt háttérként. Természetesen fontos, hogy egyébként illeszkedjen az oldal hangulatához. Amennyiben ilyen egyszínű a háttér, akkor figyelnünk kell arra, hogy amit rá rakunk, az szólaljon meg. Mint a vörös szőnyegen egy egyszerű estélyi ruhához gyönyörű gyémánt nyakék illik. Legyen benne különlegesség, legyen figyelemfelkeltő. Néhány példa erre:
- http://keasone.de
- http://www.intervisual.de
- http://www.ftofani.com
- http://alexsancho.name
- http://mstefan.com
Mintás:
A mintához bátorság és ügyesség kell, az biztos. Egyrészt azért, mert a mintás hátterek nagyon erős karaktert adnak az oldalunknak, így csak olyat szabad választanunk, mely valóban illik a weblap hangulatához. Példaként az egyik alkotásomat, a cegleditermal.hu-t hoznám fel: fürdőről van szó, így próbáltam olyasmi mintát keresni, mely hasonlít egy medence aljához. Megpróbáltam a lehető legvisszafogottabbá tenni amellett, hogy egy adott hangulatot szerettem volna vele tükrözni. Érzésem szerint jól sikerült.
A minták igen népszerű csoportja a csíkos. Pl. http://www.vitastil.se/ Úgymond tipikus web 2.0-s háttér. Van egy weboldal (http://www.stripegenerator.com/), ahol az igényeinknek megfelelő csíkos háttért csinálhatunk, aztán el is menthetjük a képet png formátumban, melyet az alábbi formátumban tudunk css fájlunkba betenni:
body {background: #fff url(/images/stripes.png) }
Ide nem kell külön attribútumot írni a háttérkép mellé, mint pl az átmenetesnél, mert itt vízszintesen és függőlegesen is ismétlődni fog a kép, és ezt automatikusan beállítja a css.
Legyen itt még egy jó pár oldal, ahol böngészhetünk a kedvenc mintánk után:
- http://www.dinpattern.com – kb 50 különböző háttérminta, többféle stílusból
- http://squidfingers.com/patterns – több, mint 150 különböző minta, a legtöbb a jó fajtából való
- http://www.k10k.net/pixelpatterns – itt közel ezer minta van, a legtöbbet a látogatók töltötték fel
- http://peachinparis.livejournal.com – kifinomult háttérgyűjtemény
- http://www.kollermedia.at/pattern4u – jelenleg 260 egyedi háttérminta kap itt helyet. Mindenképp érdemes átnézni őket!
- http://bgmaker.ventdaval.com – igazi móka, próbáld ki te is, milyen a háttérminta tervezés :)
- http://www.tartanmaker.com – a csíkgenerátor terítőmintás párja
Azért arra figyeljünk, hogy a mintáknak is van határa. Felejtsük el tehát ezeket: http://www.crazyeddy.com/plp Már nem 1998-ban vagyunk!
Megosztás
