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.

Search box – HTML basic + Css styles

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

Svi mi koji redovno kodiramo web stranice držimo u glavi stotine kodova za razne elemente.  Kako bismo skratili vrijeme izrade dobro je u jednoj mapi imati pojedine elemente sa nekoliko stilova da nam se nađu pri ruci kada nam opet zatrebaju. Danas sa vama dijelim svoju mapu “search box” .

Za početnike ovdje je osnovni kod za search box:

Čime smo dobili ovo:

slika 1

slika 1

Želimo li u css-u uljepšati izgled naše tražilice potrebno je dati klasu svim dijelovima. Uzeti ćemo za primjer search box čije dijelove možete vidjeti na slici:

slika 2

slika 2

A kodovi idu ovako:

HTML:

CSS:

/* pozadina cijele search box forme */
#searchform3 {background:#000000;width:272px;padding:10px}

/* natpis “search” i button “go” */
#searchform3 label, .isearch3, .ibutton3 {vertical-align: middle;margin:0;  }

/* natpis “search” */
#searchform3 label{font-weight:700;text-transform:uppercase;margin:5px;color:#ffffff;}

/* stil okvira u koji upisujemo text */
#searchform3 .isearch3 {font-size:12px;background:#f6e4a6;padding:3px;color:#d27d00;border: 1px solid #d27d00;width:140px;font-weight:700;}

/* stil buttona “go” */
#searchform3 .ibutton3 {border:none;width:55px;height:20px;background:url(images/orangebutton.png) right no-repeat; cursor: pointer;outline:none;border:none;color:#ffffff;}

Na slici 3 je prikaz 7 različitih stilova search boxa koje možete isprobati i downloadirati na mojoj stranici. U paketu su HTML / CSS kodovi i slike za bg u .png i PSD formatu, koje možete po želji mijenjati u photoshopu i prilagođavati stilu svojih stranica.

POGLEDAJ DEMO
slika 3

slika 3

Nadam se da će vam ovaj članak uštediti vrijeme. U pripremi su i drugi elementi formi pa svratite ponovo po još 🙂

Možda će vas zanimati još jedan članak na sličnu temu:
http://www.kroativ.net/2009/03/04/najbolji-search-za-vase-stranice/

ili http://www.kroativ.net/web-development/search-box-instalacija-kako-ga-pokrenuti/

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

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="">