Photoshop tutoriali, html i css savjeti

Iako nisam bas ljubitelj Internet Explorer web browsera, sljedeci tutorial je namjenjen samo za njega.
Boja scrollbara u Mozilli, Operi, i drugim web browserima je automatizirana prema temi browsera, i na nju se nemože utjecat, iako postoje Java scripte koje nam i to dopuštaju. Bojanje standardnog Scrollbara nije moguce.

Internet Explorer nam to pak dopusta, kako bojanje glavnog scroolbara sa desne strane browsera, tako i unutarnjih djelova unutar stranice.

Bojanje scrollbara radimo na nacin da dodamo css atribude unutar body taga.

Bojanje mozemo koristiti sa 7 razlicitih stavki, no ne moramo ih sve upotrijebiti, mozemo obojati samo 3 recimo, boju trake, boju strelice i okvir kliznika.

U html kodu to izgleda ovako:

body {

scrollbar-face-color:#CCC;
scrollbar-highlight-color:#CCC;
scrollbar-3dlight-color:#CCC;
scrollbar-darkshadow-color:#CCC;
scrollbar-shadow-color:#CCC;
scrollbar-arrow-color:#CCC;
scrollbar-track-color:#CCC;
}

Gdje cemo #CCC naravno zamjeniti zeljenom bojom.

Opisat cemo izradu slikovnog menu-a pomocu css-a.

Prvo cemo nacrtati menu, kompletan, ili sliku po sliku, svejedno. Lakse nam je cijeli skupa.

Poduplajte .psd file u kojem radite. (Desni klik na naslov u okviru slike > Duplicate)
Koristit cemo hover stanje, sa drugom bojom teksta na dupliciranoj slici.

Prije rezanja slika, obojat cemo sva polja u hover stanje.

Sada sljedi najveca “mudrost” u izradi menu-a. Racimo da imamo ove slike u .psd formatu; sada cemo ih pretvoriti u -jpg, ili .gif ili jednostavno koristiti Flatern image opciju. Za to se mozete prisjetiti tutoriala Optimiziranje slika. Sada cemo te slike spojiti u jednu. Jedna neka bude povise druge.

To cemo napraviti tako da jednu povecamo za njenu visinu, te samo prebacimo ovu drugu unutar nje same.

(Image > Canvas size)

Zasto ovo radimo ovako? Zato jer ako radimo odvojene slike za normalno stanje linka i hover verziju, prelaskom misa preko linka imat cemo djelic sekunde koji ce ocitavati drugu sliku. Na ovaj nacin izbjegavamo taj ruzni efekt. Ovako browser ucita odmah link stanje, i hover stanje, te prelaskom misa preko linka ne gubi nista.

Sada cemo izrezati sliku na slideove, svaki link posebno, iako cak ni to ne moramo, postoji mogucnost da on ostane ovakav, te da ga samo rasporedimo unutar linkova, ali to necemo koristiti, vec svaki za sebe.

Sada slijedi css, preko kojeg cemo odrediti koji dio gdje da dode.

a.home:link, a.home:visited {
display: block;
height: 30px;
width: 104px;
background: url(slike/home.gif) bottom left no-repeat;
text-indent: -9999px;
float:left;
}

a.home:hover {
display: block;
background: url(slike/home.gif) top left no-repeat;
height: 30px;
width: 104px;
}

Tako bi izgledao kod za tipku home. Za svaki drugi link cemo dodati njegov class.
Znaci, odredili smo velicinu svakog linka, te smo jedan postavili u gonji dio, drugi u donji.
text-indent: -9999px; ovaj kod koristimo za to da maknemo tekst linka. On i dalje tu postoji, ali smo ga makli 9999 pixela ulijevo, pa ne postoji teoretska sansa da ce nam smetat.

I to je to, dobili smo slikovni meni, koji nema tog ruznog djelica sekunde ocitavanje hover slike.

U sljedecem tutorialu pokazat cemo vam najcesce nacine izrade CSS pozadine site-a.Jedan od uobicajenih nacina izrade je uporaba gradienta. Gradient se koristi na dnu ili vrhu stranice, tako da se na rubu boja pozadine “preljeva” u neku drugu.
U Photoshopu cemo napraviti gradient od recimo 100-200 pixela visine.

Gradient mozemo slobodo povuci preko vece radne povrsine, zatim cemo ga Cropati.

Cropanje slike cemo napraviti tako da u sirinu obuhvatimo sto manji dio slike, a visina neka odgovara gradientu na slici.

Sljedece sto radimo je Resize slike. (Image > Resize) Iskljucit cemo opciju Constrain Proporties, te Width postaviti na 1 px.
Dobivenu sliku mozemo spremiti kao .jpg ili .gif.

Sada, ako nam je taj gradient potreban na dnu stranice, uzmemo gornju boju (Alt + klik dok radimo sa nekim brushem).

Sada prelazimo na CSS. Ja osobno najcesce koristim Dreamweaver za izdradu stranica, pa ce tutoriali biti malo prilagodenji njemu, no svejedno ako radite u bilo cemu drugom.

body {background-image:url(images/background.jpg);
background-position:bottom;
background-repeat:repeat-x;
background-color:#fff;
}

To je kod koji cemo postaviti u CSS. Background color je boja koju smo uzeli kao najgornju u gradientu.

Ukoliko nam se gradient nalazi na vrhu stranice, background-position ce biti top, a boja pozadine najdonja iz gradienta.

Zanimljiv efekt mozemo dobiti na slican nacin kada imamo situaciju kao u sljedecem primjeru:

Efekt koji cemo koristiti ce produziti header lijevo i desno, naravno u nekoj drugoj boji.

Takvo nesto cemo dobiti na nacin da, kao i u primjeru obicnog gradienta, napravimo .jpg ili .gif jednog ili nekoliko pixela sirine, s tim da cemo na udaljenosti od vrha, te visine headera, dodati polje ispunjeno jednom bojom.

Zatim cropamo sliku od vrha, do dna gradienta, ukliko dodajemo polje na vecoj slici. Ukoliko ga dodajemo na slici od pixela, samo je spemimo.

Dodamo tu sliku u isti CSS kod kao kod proslog primjera (naravno, sa slikom na Top stranice) i efekt je postignut!

Header ce vam naravno bit div koji je potpuno odvojen od pozadine, samo ce ga ona vizualno produziti.

Kada ovo radite, pozadinu mozete generirati nakon odredivanja paddinga i margina, zbog tocnosti velicine. Pazite da vam budu isti u pixel. Najjednostavnije je, kada imate dovrsenu konstrukciju site-a, samo sa Print Screenom copy/ paste-ate cijeli izgled stranice u Photoshop i nacrtate gradient i polje koje produzava header, i cropate!