Volite web dizajn?

Zašto ne podijelite svoje znanje s cijelim svijetom? Svatko može pisati za Kroativ i na taj način se promovirati.

Pomoć potrebitima

http://www.hck.hr

Hrvatski Crveni križ

u službi humanosti od 1878.

18.09.2009 u web development | 2 komentara
LoadingDodaj u favorite Isprintajte članak

Višestruke teksture u pozadini body layera

Autor/ica Weberica

Završila fotografiju na ŠPU, a nakon toga grafički i web dizajn. Rođena, živi i radi u epicentru Zagreba. Stalni član Kroativ mreže i autor mnogih korisnih članaka, radi kao stalni suradnik Web Inkubator studija.

Oglas

Svaki početnik zna da se body layeru, kao i svakom “div-u”  može dati boja, tekstura ili oboje. Dovoljno je u CSS upisati nešto poput: body { background: #cccccc url ( mapa / slika.jpg ) ;}

No, što ako smo na kodiranje dobili dizajn poput ovoga na slici 1. ?

višestruke teksture u pozadini body-a

slika 1

Pogledamo li malo bolje, vidjeti ćemo da se pozadina sa travom ponavlja vodoravno i okomito, gradient na travi i gradient neba ponavljaju se vodoravno, a oblaci su na sredini stranice i neba i ne ponavljaju se.  I sve to u pozadini body-a, ispod našeg “conteiner-a” sa sadržajem.

Ovakav dizajn može zadati muke ne samo početnicima već i nešto iskusnijim koderima (ovi drugi će možda zapeti na usklađivanju za operu ili IE ) Zbog toga smo vam danas pripremili ovaj kratki tutorial da vam se nađe pri ruci kada zatreba.

Dakle, dizajn otvorimo u photoshopu i izrežemo ga na slijedeći način, da bismo dobili tri izreza koja ćemo koristiti (slika 2)

slika 2

slika 2

Kada smo gotovi,  spremimo izreze za web.

Nakon toga otvoriti ćemo novi dokument transparentne pozadine širine 10px i visine (u ovom slučaju) 360px. Na njega ćemo nanijeti gradient od crnoga prema prozirnome i spremiti kao .png.

Na kraju u mapi imamo slijedeće slike (slika 3)

slika 3

slika 3

A naši kodovi će izgledati ovako:

HTML

<div id="nebo">
<div id="dark_grass">
<div id="oblaci">
<div class="container">
<!--ovdje dolazi sadržaj stranice-->
</div><!--end container-->
</div>
</div>
</div>

CSS

html, body
{
height: 100%;
}
 
body
{
background: url(images/trava.jpg);
}
 
* {margin:0;padding:0;border:0;}
 
#nebo
{
position:relative;
background:url(images/nebo.jpg) repeat-x left top;
width:100%;
height:100%;
z-index:0;
}
 
#dark_grass
{
position:relative;
background: url(images/gradient.png) repeat-x 0px 226px ;
height: 100%;
width:100%;
z-index:1;
}
 
#oblaci
{
position:relative;
background: url(images/oblaci.jpg) no-repeat center top;
height:100%;
width:100%;
z-index:2;
}
 
.container
{
position:relative;
height:100%;
margin:0 auto 0 auto;
width:960px;
z-index:3;
padding-top:20px;
}

Da, da, znamo da smo vam pomogli, visite nam kavu 😉

Označeno s: , , , , , ,
Za ovaj članak možete glasati na CroPortalu i tako pomoći u njegovoj promociji. Ako članak još nije objavljen vi možete biti prvi!
Stavovi i mišljenja izrečena u ovome članku i/ili komentarima odnose se samo na autora/icu članka i/ili komentara, a ne i cijele Kroativ mreže. Zabranjeno je neovlašteno prenošenje članaka u cjelosti bez prethodnog dogovora ili bez istaknutog povratnog linka na www.kroativ.net stranicu te imena autora.
Oglas

2 komentara

pratite komentare putem RSS kanala
Trackbacks & Pingbacks

Ostavite komentar

Autori s više od 10 komentara nemaju tag nofollow na svojim linkovima! Zabranjeno je vrijeđanje, omalovažavanje ili na bilo koji drugi način ometanje normalnog toka komentara. Također je zabranjeno oglašavanje u komentarima i sve druge vrste spam-a.

(*) polja su obavezna

XHTML: Možete koristiti: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">