PSD+ PhotoShop pamokos, apžvalgos, siuntiniai

PSD + CSS. Darome Meniu juostą

Paskelbta 04. Bal, 2010 Autorius: PSD+ Kategorija: Web dizainas

Daugelis Photoshop naudoja vien webdizainui. Žinoma jie išmano ir CSS. Nuo šiol psdplius.lt atsiras daugiau pamokų apie kodavimą. Šį kartą darysime menubar’ą. Viską nusipiešime su Photoshop ir užkoduosime su CSS.
Pradedame.
Pirmiausia mums reikia dviejų failų. Kaip atrodys meniu juosta paprastai ir užėjus ant jos. Kaip ji turėtu atrodyti leisiu jums pasireikšti, todėl nieko neaiškindamas iškart parodysiu savo variantus:

Taigi, failai turi būti vienodo dydžio tik skiriasi pati išvaizda(spalvos). Juos reikia sudeti į vieną failą, žemiau vienas kito.
Beje visi failai išsaugomi PNG formatu.

Štai. Svarbiausia išmatavimai. Viso mūsų meniu ilgis 727 px, aukštis vienos juostos 36 px, tarpas tarp juostų 2 px.
Pradedame koduoti css failą.

#nav {
width: 727px;
height: 36px;
position: relative;
background: url(main.png);
margin: 0;
padding: 0;
}
#nav li {
float: left;
}
#nav li a {
position: absolute;
top: 0;
margin: 0;
padding: 0;
display: block;
height: 36px;
background: url(main.png) no-repeat;
text-indent: -9999px;
overflow: hidden;
}

Šioje kodo dalyje matote pagrindinius nustatymus, kad naudojame main.png failą, ilgis 727px, aukštis 36 px, li sintaksės elementai eina ne iš viršaus į apačią, o į šoną.
Toliau paruošiame normalios būsenos meniu juostos išvaizdą.

li#nav_home a {
left: 0;
width: 142px;
background-position: 0 -45px;
}
li#nav_about a {
left: 142px;
width: 151px;
background-position: -142px -45px;
}
li#nav_tutorials a {
left: 293px;
width: 145px;
background-position: -293px -45px;
}
li#nav_services a {
left: 438px;
width: 150px;
background-position: -438px -45px;
}
li#nav_contact a {
left: 588px;
width: 138px;
background-position: -588px -45px;
}

Viskas tikrai nesudėtinga. width parodo, kokio ilgio yra vienas elementas, čia jau juos jums atskirai reikia išsimatuoti, left parodo kiek turi elementas būti patrauktas nuo kairės bei background-position: parodo pačio elemento buvo vietą. Kadangi mūsų normalios būsenos išvaizda yra pagrindinio paveikslėlio apačioje, tai todėl visur ir matote reikšmes -45 px.
Toliau nurodome a.hover būseną, t.y., kaip atrodys užėjus ant meniu.

li#nav_home a:hover {
background-position: 0 0px;
}
li#nav_about a:hover {
background-position: -142px 0px;
}
li#nav_tutorials a:hover {
background-position: -293px 0px;
}
li#nav_services a:hover {
background-position: -438px 0px;
}
li#nav_contact a:hover {
background-position: -588px 0px;
}

Niekas nesikeičia, tik background-position antras skaičius, tai yra aukštis nebe -45 px, o 0 px.
Belieka užkoduoti patį HTML failą!

<ul id="nav">
<li id="nav_home"><a href="#">psdplius</a></li>
<li id="nav_about"><a href="#">apie mus</a></li>
<li id="nav_tutorials"><a href="#">pamokos</a></li>
<li id="nav_services"><a href="#">paslaugos</a></li>
<li id="nav_contact"><a href="#">kontaktai</a></li>
</ul>

Žinoma prieš tai neužmirškite priskirti css failo.

<link rel="stylesheet" type="text/css" href="jusu_css_failas.css" />

Viskas.
Čia galite pažiūrėti, kaip tai atrodo: demo
Bei parsisiūsti psd, jpg, html, css failus iš čia.
Jei ko nors nesuprasite, klauskite ;)