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.
Kako napraviti moderni Web 2.0 dizajn?
Evo nas opet na istom mjestu sa drugim web dizajn stilom. U ovom tutorialu naučit ćete izraditi moderan Web 2.0 dizajn minimalističkog izgleda. Ovakav dizajn savršen je za stranice poslovne tematike. Kao što i sami možete vidjeti, poslovno ne mora uvijek značiti dosadno. Uz malo boje i par kreativnih elemenata uštogljenost poslovnog svijeta pretvaramo u veselo predstavljanje tvrtke. Izabrali samo Web 2.0 stil iz jednostavnog razloga što on znači moderno, ultra-hip, a to je upravo ono kakvim želimo predstaviti našeg klijenta.
Koristili smo Twitter kao izvor informacija za naše imaginarne klijente u vezi poslovanja tvrtke. Twitter je inače servis za dijeljenje informacija sa rodbinom, prijateljima ili čitavim svijetom. Na njemu možete objavljivati što god želite (npr. što trenutno radite) te svi koji znaju vaš Twitter nadimak mogu to i vidjeti. Mi smo na naše stranice uz pomoć jQuery JavaScript library-a uključili Twitter stream. Umjesto dosadnih fontova na koje smo inače ograničeni upotrijebili smo sIFR tehnologiju i uključili moderan Gill Sans font. Naravno za kostur stranica koristili smo 960gs CSS Framework. Ako još niste, svakako pročitajte naš prošli tutorial te se pobliže upoznajte sa tim CSS alatom.
Znači naučit ćete kako napraviti Web 2.0 dizajn, naučit ćete uključiti Twitter stream u vaše web stranice i upoznat ćete se sa sIFR (Scalable Inman Flash Replacement) tehnologijom.
Pogledajte demo ili skinite source
Krenimo redom, prvo ćemo kao i obično sastaviti kostur naših stranica (nemojte zaboraviti uključiti 960.css, text.css i reset.css iz 960gs CSS Framework-a)
Struktura našeg Web 2.0 dizajna
<div class="container_12">
<div class="grid_12">940px - logo i search forma</div>
<div class="clear"></div>
<div class="grid_12">940px - moto tvrtke i Slika</div>
<div class="clear"></div>
<div class="grid_12">940px - meni</div>
<div class="clear"></div>
<div class="grid_12">
<div class="grid_5 alpha">380px - Twitter stream</div>
<div class="grid_7 omega">540px - vijesti</div>
</div>
<div class="clear"></div>
<div class="grid_12">
<div class="grid_4 alpha">300px - o tvrtci</div>
<div class="grid_4">300px - linkovi</div>
<div class="grid_4 omega">300px planovi</div>
</div>
<div class="clear"></div>
<div class="grid_12">940px - footer</div>
<div class="clear"></div>
</div> |
Znači standardni 960gs grid kostur. Iza svakog reda dodajemo klasu clear, napominjemo još jednom da za detaljniji opis upotrebe 960gs CSS frameworka pogledate naš prošli tutorial.
Ok, kostur imamo, a sada pogledajmo HEAD našeg dokumenta jer je nešto drugačiji od prošlog tutoriala.
HEAD našeg Web 2.0 dizajna
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <head>
<!-- reset html elemenata da imamo čistu situaciju -->
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<!-- tekstualni stilovi 960 CSS frameworka -->
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<!-- osnovni stilovi 960 CSS frameworka -->
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
<!-- naši stilovi, moraju biti iza 960 frameworka da bi primijenili naše definicije -->
<link rel="stylesheet" type="text/css" media="all" href="css/moj_style.css" />
<!-- jQuery JavaScript library - www.jquery.com -->
<script language="javascript" src="script/jquery-1.2.6.js" type="text/javascript"></script>
<!-- jQuery Twitter plug-in - http://tweet.seaofclouds.com/ -->
<script language="javascript" src="script/jquery.tweet.js" type="text/javascript"></script>
<!-- sIFR JavaScript -->
<script language="javascript" src="script/sifr.js" type="text/javascript"></script>
<!-- sIFR CSS -->
<link rel="stylesheet" type="text/css" media="all" href="css/sifr.css" />
<!-- sIFR Konfiguracija, mora biti iza sifr.js! -->
<script language="javascript" src="script/sifr-config.js" type="text/javascript"></script>
<!-- jQuery sintaksa i definiranje parametra za Twitter plug-in -->
<script type='text/javascript'>
$(document).ready(function(){
$(".tweet").tweet({
join_text: "auto",
username: "kroativ", // vaš Twitter username
avatar_size: 32, // veličina slike vašeg Twitter avatar
count: 5, // koliko unosa želimo prikazati
auto_join_text_default: "rekli smo,",
auto_join_text_ed: "mi",
auto_join_text_ing: "mi smo",
auto_join_text_reply: "odgovorili smo",
auto_join_text_url: "pregledavali smo",
loading_text: "učitavam twitter..."
});
});
</script>
</head> |
jQuery JavaScript library
Između linija 2-9 imamo kao i u prošlom tutorialu 960gs stilove te na kraju naš stil (moj_style.css) za definiciju naših elemenata. Između linija 12-14 uključili smo jQuery JavaScript library. Što je to jQuery JavaScript library? Ukratko, jQuery je zbirka JavaScript funkcija i klasa za olakšanu interakciju između JavaScript-a i HTML-a. Umjesto da pišete tone JavaScript koda, uz pomoć JavaScript library-a kroz jednostavnu sintaksu zadatke obavljate brže i efikasnije.
Twitter stream
Za našu stranicu koristili smo jQuery Twitter plug-in, linije 23-39. Prvo smo uključili plug-in na liniji 14, te potom definirali njegove parametre na linijama 26-27. Osnovna jQuery sintaksa je $(document).ready(function(){ nakon koje dolaze ostale funkcije. Opise Twitter plug-in parametra možete vidjeti u samom kodu. Znači potrebno je definirati vaš username, a ostalo je sve po želji te vašim potrebama. Nakon što smo definirali sve parametre Twitter stream uključujemo u naš dokument tako da na željenom mjestu jednostavno dodamo <div class="tweet"></div>.
Upotreba sIFR-a
Između linija 16-21 nalazi se naša sIFR aplikacija. sIFR nam omogućava da u naše stranice uključimo bilo koji font. Mi ćemo ovdje pokriti osnove i naučit ćete kako ga koristii, a za pobliže informacije pogledajte službene stranice, primjere ili službeni demo. Za početak skinite sIFR i skinite naš source. Kada otvorite sIFR arhivu vidjet ćete foldere CSS, DEMO, FLASH i JS. Nama će biti potrebni css/sifr.css (za opće sifr stilove), flash/sifr.fla (za definiranje našeg fonta) i js/sifr.js (njega ne dirajte) te js/sifr-config.js (konfiguracija vašeg fonta).
Otvorimo prvo sifr.fla u vašem Flash-u, vidjet ćete veliki MovieClip na glavnoj sceni, otvorite ga kako bi vidjeli njegovu scenu. Na njoj se nalazi Text Field, njega ne dirajte već nas samo zanima Font Family, po defaultu je odabrana Verdana, a mi odaberemo naš font. Mi smo koristili Gill Sans MT Pro – Light, vi možete koji god želite. Ostale postavke nemojte dirati osim opcije Character Embedding… Kliknite na tu opciju te samo dodajte u polje Include these characters ćčžšđŽĆČĐŠ za pravilan prikaz hrvatskih palatala u našim stranicama. Znači ništa nismo promijenili već samo dodali. Kada ste sve napravili idete na File/Export/Export Movie… te spremite vaš flash u direktorij script. Pazite da vam je Publish Settings ostao nepromijenjen po otvaranju sifr.fla, znači postavke za Flash 8 settings.
Napravili smo naš ime_fonta.swf, spremili ga u direktorij script naših stranica i krećemo dalje. Zašto direktorij script? Dobra je praksa uvijek imati organizirani direktorij naših stranica, npr. [folder images za slike] – [folder style za css] – [folder script za skripte] itd… Kopirajte sifr.js i sifr-config.js u taj isti folder script, a sifr.css kopirajte u folder css. Ovo sve već imate ako ste otvorili naš source. Pogledajmo kako izgleda sifr-config.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | var gillsans = { src: 'script/gillsans.swf' ,ratios: [7, 1.32, 11, 1.31, 13, 1.24, 14, 1.25, 19, 1.23, 27, 1.2, 34, 1.19, 42, 1.18, 47, 1.17, 48, 1.18, 69, 1.17, 74, 1.16, 75, 1.17, 1.16] }; sIFR.activate(gillsans); sIFR.replace(gillsans, { selector: 'h1#naslov', css: '.sIFR-root { background-color: transparent; color: #ffffff; letter-spacing: -1; font-size:48px }', offsetLeft:-1, wmode: 'transparent' }); sIFR.replace(gillsans, { selector: 'h2', css: '.sIFR-root { letter-spacing: 1; color: #8db423; }', wmode: 'transparent' }); sIFR.replace(gillsans, { selector: 'h3', css: '.sIFR-root { letter-spacing: 1; }', wmode: 'transparent' }); sIFR.replace(gillsans, { selector: 'h4', css: '.sIFR-root { letter-spacing: 1; color: #068eca; }', wmode: 'transparent' }); |
Na liniji 2 trebamo navesti putanju do našeg swf datoteke sa fontovim, sjetite se da smo ju stavili u script direktorij, na liniji 3 naveli smo postavke fonta kako bi točno definirali prikaz fonta u flashu. Kako to učiniti saznajte na ovim stranicama. Na liniji 6 aktiviramo naš novi font i u ostatku skripte definiramo koje da elemente sIFR zamijeni te njihove postavke. Saznajte više o svim mogućnostima na službenim stranicama. Ukratko, zamijenili smo H1 tag sa ID-em naslov (naš slogan tvrtke) i zamijenili smo H2, H3 te H4 elemente. Svi će biti automatski zamijenjeni našim fontom.
Napomena: Ovo je najnovija verzija sIFR-a i iz nekog čudnog razloga developeri su stavili minimalnu podržanu verziju Opera browsera na 9.61. Otvorite originalni sifr.js iz sifr3-r436.zip folder js/source. Pronađite “9.61” oko linije 451 i promijenite u “9.0“. Sada će vam raditi i u Operi. Naravno, morat ćete zamijeniti i sifr.js u vašem script direktoriju. Naš source sadrži već izmijenjenu verziju
Sada kad smo pokrili Twitter stream i sIFR uključivanje možemo krenuti na naš dizajn.
Header
Sva tri dijela našeg headera
Započinjemo sa headerom koji sadrži logo tvrtke i formu za pretraživanje. Pogledajmo kako on izgleda:
<div class="grid_12 top_header"> <div class="logo"><a href="http://www.kroativ.net"><img src="http://www.kroativ.net/images/kroativ_logo.png" width="310" height="79" alt="Kroativ - Web Dizajn and Development Blog" title="Kroativ - Web Dizajn and Development Blog" border="0" /></a></div> <div class="searchf"> <form action="" method="post" name="search"> <input name="searchq" class="moj_search" type="text" value="upišite ključnu riječ" size="10" maxlength="30" onblur="if(this.value=='') this.value='upišite ključnu riječ';" onfocus="if(this.value=='upišite ključnu riječ') this.value='';" /> <input type="image" src="images/search_ikona.png" name="submit" title="Želite rezultate?" class="search_button" /> </form> </div> </div><!-- end of grid_12 top_header --> <div class="clear"> </div> |
Header smo podijelili na 3 dijela. Prvi za logo i pretraživanje, drugi za slogan tvrtke i neku slike te treći za navigaciju. Prvom header box-u grid_12 dodali smo klasu top_header kojom smo samo definirali širinu box-a na 113px koliko nam je širina pozadinske slike tog dijela. Cijela pozadina nam je jedna slika sa nijansama sive i zelene koju smo ponavljali po X-u cijele stranice. Napravili smo dvije klase, logo i searchf. Klasi logo smo dodali float:left, a klasi searchf smo dodali float:right. Unutar forme, u naše tekstualno polje dodali smo funkciju onblur=”if(this.value==”) this.value=’upišite ključnu riječ’;” onfocus=”if(this.value==’upišite ključnu riječ’) this.value=”;”. Zgodna stvarčica koja kada korisnik dođe u fokus našeg polja briše defaultnu vrijednost i ako se sadržaj polja nije promijenio istu vrijednost vraća. Umjesto standardnog gumba za submit dodali smo <input type="image" src="images/search_ikona.png" name="submit" title="Želite rezultate?" class="search_button" /> kako bi uključili sliku povečala. Pozicionirali smo element s klasom .search_button.
Polgedajmo css za prvi dio headera:
body { color: #333333; font: 14px/22px "Trebuchet MS", Arial, Helvetica, sans-serif; background:#fff url(../images/main_bg.gif) repeat-x top left; } .top_header { height:113px; } .logo { float:left; width:310px; height:79px; margin-top:15px; } .searchf { float:right; width:310px; height:50px; margin-top:40px; text-align:right; position:relative; z-index:1; } .moj_search { width:206px; height:22px; border:1px solid #4f4f4f; background:#383838 url(../images/searchf_bg.gif) repeat-x top left; margin:0; padding:0; padding-top:4px; padding-right:24px; padding-left:2px; color:#FFF; } .search_button { width:21px; height:21px; position:absolute; top:4px; right:4px; z-index:10; } |
Znači body elementu smo stavili bijelu pozadinsku boju i ponavljanje pozadinske slike samo po širini. Klasi logo smo definirali visinu i širinu te float:left. Klasi searchf smo definirali float:right, visinu i širinu te position:relative i z-index:1. Position i z-index morali smo definirati kako bi mogli postaviti search_button na željenu poziciju odnosno na kraj text fielda. Klasa moj_search sadrži stilove za tekstualno polje, definirali smo border, pozadinsku sliku (lagani gradient) i padding-right kako nam tekst ne bi prelazio ispod gumba. Definicija stila za naš submit gumb nalazi se u klasi search_button, naveli smo veliki z-index:10 da element bude ispred svih i absolute poziciju sa definiranim mjerama gornje i desne pozicije.
Krenimo na moto tvrtke i glavnu sliku.
<div class="grid_12 center_header"> <h1 id="naslov">Lorem ipsum dolor sit amet, dul consectetur adipisicing elit, sed do eiusmod tempor.</h1> </div><!-- end of grid_12 center_header --> <div class="clear"> </div> |
Kao što i sami vidite ovaj dio je stvarno jednostavan. Opet smo grid_12 klasi pridodali klasu za definiciju širine odnosno .center_header (258px). Klasi center_header također smo dodali pozadinsku sliku, a H1 s ID-em naslov smo već definirali u sifr-config.js
Pogledajmo CSS za slogan tvrtke i sliku:
.center_header { height:258px; text-align:left; background:url(../images/header_slika.jpg) no-repeat 430px 50px; } #naslov { width: 700px; height: 170px; margin: 30px 0 0 0; padding: 0px; text-align: left; } |
Klasa center_header sadrži pozadinsku sliku koju smo pozicionirali 430px u desino i 50px od vrha, a ID naslov služi samo za pozicioniranje slogana tvrtke.
Navigacija ili meni
Navigacija je slična kao i u prošlom tutorialu sa jedinom razlikom što sada imam tabove. Vidjet ćete kako ih kreirati na vrlo jednostavan način.
<div class="grid_12 main_menu"> <div id="navigacija"> <ul> <li><a href="javascript:void(null);">Tko?</a></li> <li><a href="javascript:void(null);">Što?</a></li> <li><a href="javascript:void(null);">Gdje?</a></li> <li><a href="javascript:void(null);">Kako?</a></li> <li><a href="javascript:void(null);">Zašto?</a></li> </ul> </div><!-- end of navigacija --> </div><!-- end of grid_12 main_menu --> <div class="clear"> </div> |
Opet smo klasi grid_12 pridodali smo klasu .main_menu kojim smo definirali širinu (62px). Napravili smo ID navigacija u koji smo smjestili UL (unordered list) za naše kategorije. Znači isti postupak kao i u prošlom tutorialu.
Pogledajmo CSS za meni:
.main_menu { height:62px; text-align:right; } #navigacija { padding: 5px 0; float:right; margin-top:32px; } #navigacija ul { list-style: none; display: block; margin: 0 auto; } #navigacija ul li { float: left; margin: 0; color:#000; padding-top:5px; text-transform:uppercase; width:88px; height:30px; text-align:center; background:url(../images/tab.png) no-repeat top left; } #navigacija ul li a:link, #navigacija ul li a:visited { color:#000; text-decoration:none; } #navigacija ul li a:hover, #navigacija ul li a:active { color:#8db423; text-decoration:none; } |
Znači opet klasični CSS list meni kojem smo dodali pozadinsku sliku našeg tab-a na svaki LI element unutar ID-a navigacija.
Sadržaj
Prvi dio sadržaja
Centralni dio odnosno sadržaj podijelili smo na dva dijela. Prvi dio sadrži Twitter stream sa lijeve strane i male članke naše firme sa desne strane. U drugio dio smo stavili 3 box-a odnosno dijelove Tko smo mi? (malo informacija o tvrtci), Mi volimo (neki linkovi vezani uz tvrtku) i Planovi za budućnost.
Pogledajmo konstrukciju prvog dijela (skraćena verzija, a cijelu možete pogledati u demu ili sourcu):
<div class="grid_12" style="margin-top:15px">
<div class="grid_5 alpha">
<h4 class="twitter"> Što se događa na Twitteru?</h4>
<div class="tweet"></div>
</div>
<div class="grid_7 omega">
<div class="vijesti">
<h2>Naslov</h2>
Sadržaj
</div>
</div>
</div><!-- end of grid_12 -->
<div class="clear"> </div> |
Prisjetimo se, kada imamo više layera u nizu, prvo dodajemo klasu alpha, a drugom omega.
Layeru grid_12 dodali smo inline css za gornju marginu od 15px, naravno da smo to mogli napraviti i kroz css klasu ali ovako je preglednije. Twitter stream stavili smo u grid_5 i dodali mu klasu alpha. Već smo prije napomenuli da je dovoljno umetnuti <div class="tweet"></div> na mjesto gdje želimo prikazati Twitter i jQuery plug-in će automatski ispuniti ostalo. Dodali smo stilizirani H4 tag sa naslovom i pozadinskom slikom autentične Twitter ptice.
Layeru grid_7 dodali smo klasu omega i u njega ćemo staviti vijesti. Možemo dodavati koliko god vijesti želimo i sve ih stavljamo u layer klase vijesti. Stilizirani naslov postižemo sa H2 tagom kojeg smo definirali u sifr-config.js
Pogledajmo CSS za prvi dio sadržaja:
.vijesti { margin-top:10px; } h4.twitter { height:40px; padding-left:50px; padding-top:4px; background:url(../images/twitter.png) no-repeat top left; margin-top:10px; color:#068eca; font-size: 24px; line-height: 34px; } .tweet { color: #000; } .tweet .tweet_list { list-style-type: none; margin: 0; padding: 0; } .tweet .tweet_list li { overflow: auto; padding: 10px 5px; margin:0; border-bottom:1px dotted #ccc; } .tweet .tweet_list li a { color: #068eca; } .tweet .tweet_list .tweet_even { background-color: #f8f4e8; } .tweet .tweet_list .tweet_avatar { padding-right: .5em; float: left; } .tweet .tweet_list .tweet_avatar img { vertical-align: middle; border:1px solid #ccc; } |
Vidite i sami, ništa spektakularno. Klasa vijesti samo ima gornju marginu od 10px da vijesti nisu stisnute, a Twitter smo ukrasili sa donjim iscrtkanim borderom te nam svaki drugi unos ima drugačiju pozadinsku boju (.tweet_even). H4 tag klase twitter sadrži nam pozadinsku sliku Twitter ptičice.
Priča o 3 box-a
Donji sadržaj i footer
Prelazimo na drugi dio sadržaja koji smo namijenili za 3 box-a sa informacijama koje bi možda trebalo istaknuti na glavnoj stranici naše imaginarne tvrtke.
<div class="grid_12" style="margin-top:20px">
<div class="grid_4 alpha">
<div class="small_box">
<h3 class="sub_naslov">Naslov</h3>
<div class="small_box_pic"></div>
<div class="pade_ten">
Sadržaj
</div>
</div>
</div><!-- end of grid_4 alpha -->
<div class="grid_4">
<div class="small_box">
<h3 class="sub_naslov">Naslov</h3>
<div class="small_box_pic"><img src="http://www.kroativ.net/images/srce.png" width="128" height="128" alt="Što kažu o nama?" /></div>
<div class="pade_ten">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</div><!-- end of grid_4 -->
<div class="grid_4 omega">
<div class="small_box">
<h3 class="sub_naslov">Naslov</h3>
<div class="small_box_pic"><img src="http://www.kroativ.net/images/planovi.png" width="128" height="128" alt="Planovi sa budućnost" /></div>
<div class="pade_ten">
Sadržaj
</div>
</div>
</div><!-- end of grid_4 omega -->
</div>
<div class="clear"> </div> |
Grid_12 klasi dodali smo inline css stil za gornju marginu od 20px kako bi malo razdvojili taj donji dio od ostatka. Napravili smo 3 layera klase grid_4 (znači 300px širine), prvom smo dodali klasu alpha, a zadnjem omega. Cijeli sadržaj box-a stavljali smo u klasu .small_box kojoj smo definirali pozadinsku boju i border. Unutar njega stavili smo tag H3 za naslove. H3 tag-u također smo dodali pozadinsku sliku oblih rubova, jednu od odlika Web 2.0 stila (layer nam je statične širine pa smo mogli koristiti statičnu pozadinsku sliku).
Nakon toga dodajemo klasu .small_box_pic koja nam služi samo za umetanje slika ili ikona. Koristili smo besplatne ikone koje je napravila ekipa sa Deziner Folia. Pogledajte cijeli set i možete ih koristiti u sve svrhe. Cijeli tekstualni dio opet stavljamo u klasu .pade_ten za 10px padding-a oko teksta.
Pogledajmo CSS korišten za donji dio sadržaja:
h3.sub_naslov { background:url(../images/small_bg.png) no-repeat top left; padding:8px 0 8px 10px; margin:2px; } .small_box { background-color: #eee; border:1px solid #e9e9e9; min-height:400px; } .small_box_pic { text-align:center; margin-bottom:10px; } .pade_ten { padding:10px; } |
Znači klasika, H3 tag klase .sub_naslov ima tu našu sliku pozadinskih rubova. Klasi .small-box dodali smo min-height:400px kako bi nam sva tri box-a uvijek bila iste veličine. Ravnajte se po box-u koji ima najveći height kako bi vam i ostali bili iste veličine. Tag min-height govori browseru koja je minimalna veličina layera.
Footer
Polako smo došli i do footera. Pošto smo sve važne informacije već prezentirali u footer stavljamo samo copyright informacije.
<div class="grid_12">
<div id="footer">© 2008 Naša Tvrtka</div>
</div><!-- end of grid_12 -->
<div class="clear"> </div> |
U layer grid_12 dodali smo naš layer s ID-om footer koji sadrži copyright informacije. Definirali smo mu veličinu fonta, gornji border te smjer teksta.
Pogledajmo CSS za ID footer:
#footer { font-size:12px; margin:10px 0; padding:10px; text-align:center; border-top:1px dashed #89ab1d; } |
Ovo nije potrebno objašnjavati, par standardnih css definicija. Pogledajmo kako nam izgledaju gotove stranice.
Zaključak
U ovom tutorialu naučili ste kako napraviti moderan Web 2.0 dizajn. Vidjeli ste i kako jednostavne stranice mogu biti lijepe te ste naučili prezentirati glavne stavke neke tvrtke bez upotrebe gomile slika. Znači jednostavnost + pravilna prezentacija informacije = dobar dizajn . Naučili ste kako iskoristiti popularne Web 2.0 servise za informiranje vaših posjetitelja te kako začiniti vaše stranice sIFR tehnologijom. Ovu šablonu možete upotrijebiti i za vaše osobne stranice. Njihova vesela priroda prigodna je praktički za sve vrste stranica, to nam je i bio cilj. Razbiti korporativnu monotoniju kreativnim dizajnom.
PS: ovaj dizajn se neće dobro vidjeti u Internet Exploreru 6 no ovdje govorimo o Web 2.0 stilu, upravo izlazi verzija 8 tog browsera… Kako doskočiti ovom problemu pogledajte u našem članku o borbi protiv IE6 browsera…
Ako ste skinuli naš source u njemu ćete pronaći i PSD file za ovaj dizajn, slobodno ga koristite kako god želite. Napravili ste nešto super? Pokažite nam, ostavite komentar…
Slični sadržaj:
- Kako napraviti magazin style dizajn? (Jako slično)
- Naučite CSS u par minuta... (Jako slično)
- Kako napraviti dizajn ovisan o vremenu? (Jako slično)
- Top postovi na kroativu (Jako slično)
- Veliko otvaranje Kroativ.net dizajn bloga (Slično)
5 komentara
Trackbacks & Pingbacks
-
[…] nekog vremena i par primjedbi da smo našim Web 2.0 te Magazin style tutorialima zanemarili web novake, tu je CSS tutor za početnike, prikladno za […]
-
[…] Da poslovni “corporate” dizajn ne mora biti dosadan već smo pokazali u tutorialu o web 2.0 dizajnu a za pumpanje inspiracije smo vam danas pripremili nekoliko galerija sa stotinama prekrasnih […]
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.
Pozdrav,
da li netko zna kako unutar search forme napraviti opciju da polje pretrage dopušta unos maksimalno dvoznamenkastih cijelih brojeva i ako je uneseni broj paran, unos pozeleni, a ako je neparan, unos pocrveni?
Hvala
Pozdrav Josipe,
Jedino preko JavaScripta možeš tako nešto postići no korisnik JS može isključiti pa ćeš svakako morati pored client side validacije napraviti i server side validaciju.
Neki banalni primjer je:
Napravi JS funkciju i dodaš ju u header:
< script >
function is_even_round(field)
{
var n = parseInt(field.value);
if(isNaN(n) || n == 0 || n > 99)
{
field.style.color = 'red';
}
else if (n%2 == 0)
{
field.style.color = 'green';
}
else
{
field.style.color = 'red';
}
}
< /script >
i onda pozivaš na polju tu funkciju (npr. onkeydown i onfocus) i limitiraš polje na maxlength 2
< input type="text" id="search" name="search" onkeyup="is_even_round(this);" onfocus="is_even_round(this);" maxlength="2" >
Eto, nadam se da će ti ovo pomoći za dalje.
Ma ne prikazuje dobro kod pa makni razmake na početku i kraju < >
Hvala ti puno…biti će mi ovo od velike pomoći!