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.
Search box – HTML basic + Css styles
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
Ž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
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
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/
Slični sadržaj:
- Login & register form - basic HTML + Css styles (Jako slično)
- Višestruki "span" u CSS-u (jedan jako zanimljivi logo) (Slično)
- Zašto trebamo koristiti "blending options" u WEB dizajnu (Slično)
- Basic layout - osnovni raspored i širine kolona u web dizajnu (Slično)
- Web stranica na više jezika - google translate - automatski online prevoditelj na vašoj web stranici (Slično)
4 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.
zgodan Search box
Hi
Do you have a jquery version? I have a web design company. Sometime for my web design I want to use create web design based on jquery
i need jquery version
nice and simple serarch box