WEB DİZAYN

CSS3 ile Akıllı Buton

Aslında bu uygulamada html5 kodlarıda var fakat CSS3 ve jQuery ile birlikte çok iyi bir uygulama.


Aşağıdaki kodu head kısmına yapıştırınız... Çok fazla ama ne yapalım :)


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

Aşağıdaki kodu da body kısmına eklemeniz yeterli olacaktır. Boyutlarını değiştirmek istiyorsanız. CSS dosyasını değiştirmek yeterli olacaktır.




< h1>ÜRÜNLERİNİZ< /h1>

< form method="post" action="">



< select name="fancySelect" class="makeMeFancy">

< !-- HTML5 data -->
< option value="0" selected="selected" data-skip="1">Bir Ürün Seçiniz< /option>
< option value="1" data-icon="img/products/iphone.png" data-html-text="iPhone 4<i>Stokta Var</i>">iPhone 4< /option>
< option value="2" data-icon="img/products/ipod.png" data-html-text="iPod <i>Stokta Var</i>">iPod< /option>
< option value="3" data-icon="img/products/air.png" data-html-text="MacBook Air<i>out of stock</i>">MacBook Air< /option>
< option value="4" data-icon="img/products/imac.png" data-html-text="iMac Station<i>Stokta Var</i>">iMac Station< /option>
< /select>
< /form>
< /div>
< div id="footer">
< div class="tri">< /div>
< h1>jQuery ve CSS3 ile daha akıllı butonlar< /h1>
< /div>
< script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">< /script>
< script src="js/script.js">< /script>