Google Fan Webmaster Forumu

Geri git   Google Fan Webmaster Forumu > Client side Programlama > HTML - CSS - XML

HTML - CSS - XML HTML & CSS Programlama

Seçenekler Stil
  #1  
Okunmamış 05.07.2014, 01:26
 
İstanbul Avrupa Şubesi
Yaş: 24
Mesajlar: 28
Konular: 28
Ticaret Sayısı: (0)
Aktiflik: 0 / 75
Wink Renkli ve Görsel Geçişli Menü

Web sayfanıza renkli geçişlere sahip etkileyici bir menü hazırlamak ister misiniz? Hem de sadece CSS kullanarak… Aşağıdaki css menü örneğini test ederek başlayabilirsiniz.

www.adobewordpress.com/wp-content/uploads/test/40.html"][Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...][/URL]

Başlangıç
[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

Menü örneğinde kullanmak için kendinize icon seti bularak başlamalısınız. Burada bol bol icon mevcut. Fakat zaman kaybetmek istemiyorsanız aşağıdaki görseli kullanabilirsiniz. Veya bizim kullandıklarımızı kullanmak isterseniz;

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

Photoshop

Aslına bakarsanız bu adım için Photoshop dışında herhangi bir görsel tasarım aracı da kullanabilirsiniz. Tek yapacağınız görselleri renklendirmek.

Görselin 1 adet gri hali, 1 adet beyaz hali bizim için yeterli olacaktır.

Bir görselin renklendirmesini siyah-beyaz yapmak için Image > Adjustment > Grayscale alanına gidin.

Bir görseli beyaz yapmak için Image > Adjustment > Hue / Saturation alanına gidin ve Lightness değerini +100 yapın.

Görselleri kayıt ederken PNG veya GIF gibi arka planı transparan olan formatlar seçin. Ve isimlendirmeleri de gri tonlar için 1-grayscale, beyaz tonlar için 1-white benzeri yapın. Örneğimizde 8 menü hazırlayacağımız için toplamda 16 adet görsel oluşturduk.

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

HTML

İskeletimizi oluşturalım. Bir adet <ul> ve onun içerisinde 8 adet <li> ‘ye ihtiyaç duyacağız. Tasarımlarımız için classlarımızı da bu kısımda atayacağız.

HTML-Kodu:
<ul class="renkli-menu">
<li><a href="#" class="favoriler">Favoriler</a></li>
<li><a href="#" class="donanim">Donanım</a></li>
<li><a href="#" class="yazilar">Yazılar</a></li>
<li><a href="#" class="mobil">Mobil</a></li>
<li><a href="#" class="hayat">Hayat</a></li>
<li><a href="#" class="gezi">Gezilerim</a></li>
<li><a href="#" class="hediye">Hediyeler</a></li>
<li><a href="#" class="iletisim">İletişim</a></li>
</ul>
CSS

En eğlenceli bölüme geldik. Teker teker tasarımlarımızı oluşturacağız. İlk olarak <ul> ile başlayalım. Kenarları yuvarlayalım, biraz da renk katalım.

HTML-Kodu:
.renkli-menu{
margin:0 auto;
display:table;
padding:0;
list-style:none;
border-radius:10px;
background:#f3f3f3;
}
Şimdi yavaş yavaş <li> tasarımına geçebiliriz. İlk olarak menü öğelerinin sola yaslanmasını sağlayalım

Kod:
.renkli-menu li{float:left;}
Şimdi de ilk ve son <li> öğelerinin kenarlarını yuvarlayalım.

HTML-Kodu:
.renkli-menu li:first-child a{border-radius:10px 0 0 10px;}
.renkli-menu li:last-child a{border-radius:0 10px 10px 0;}
Şimdi <li> ‘lerin içerisindeki bağlantıları tasarlayalım.

HTML-Kodu:
.renkli-menu li a{
padding:10px;
text-align:center;
display:block;
line-height:90px;
height:50px;
width:50px;
background-repeat:no-repeat;
background-position:center 20%;
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
-o-transition:background 0.5s;
color:#5b5b5b;
text-decoration:none;
font-family:Arial;
font-size:12px;
font-weight:bold;
}
Bağlantıların üzerine gelince ne olsun?

HTML-Kodu:
.renkli-menu li a:hover{
-moz-box-shadow: inset 0px 0px 25px 5px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0px 0px 25px 5px rgba(0, 0, 0, 0.2);
box-shadow: inset 0px 0px 25px 5px rgba(0, 0, 0, 0.2);
color:white;
}
Ve son olarak bağlantılarımız için renk ve arka plan atayalım.

Kod:
.favoriler{background-image:url(imgs/1-grayscale.png);}
.favoriler:hover{background-image:url(imgs/1-white.png); background-color:#d16738;}

.donanim{background-image:url(imgs/2-grayscale.png);}
.donanim:hover{background-image:url(imgs/2-white.png); background-color:#3896d1;}

.yazilar{background-image:url(imgs/3-grayscale.png);}
.yazilar:hover{background-image:url(imgs/3-white.png); background-color:#95d138;}

.mobil{background-image:url(imgs/4-grayscale.png);}
.mobil:hover{background-image:url(imgs/4-white.png); background-color:#d1ba38;}

.hayat{background-image:url(imgs/5-grayscale.png);}
.hayat:hover{background-image:url(imgs/5-white.png); background-color:#d138c1;}

.gezi{background-image:url(imgs/6-grayscale.png);}
.gezi:hover{background-image:url(imgs/6-white.png); background-color:#38d167;}

.hediye{background-image:url(imgs/7-grayscale.png);}
.hediye:hover{background-image:url(imgs/7-white.png); background-color:#3871d1;}

.iletisim{background-image:url(imgs/8-grayscale.png);}
.iletisim:hover{background-image:url(imgs/8-white.png); background-color:#d13843;}
Her şey tamam.

Kapanış

Adobewordpress ziyaretçilerinin taleplerini cevaplandırmaya devam ediyor. Okumakta olduğunuz makale iletişim adreslerimize gelen istekler sonucunda hazırlanmıştır.

Yaptığımız menü örneğini canlı test etmek isterseniz codepen.io/AdobeWordPress/pen/DfmhF"]buraya[/URL] göz atın.
Alıntı ile Cevapla

Reklam
Cevapla

Tag Ekle
gecisli, gorsel, menu, renkli


Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)
 
Seçenekler
Stil



İçerik sağlayıcı paylaşım sitelerinden biri olan TurkWebmasterlar.Com WebMaster Forum Adresimizde T.C.K 20.ci Madde ve 5651 Sayılı Kanun'un 4.cü maddesinin (2).ci fıkrasına göre TÜM ÜYELERİMİZ yaptıkları paylaşımlardan sorumludur. TurkWebmasterlar.Com hakkında yapılacak tüm hukuksal Şikayetler buradan iletişime geçilmesi halinde ilgili kanunlar ve yönetmelikler çerçevesinde en geç 1 (Bir) Hafta içerisinde TurkWebmasterlar.Com yönetimi olarak tarafımızdan gereken işlemler yapılacak ve Avukatlarımız size dönüş yapacaktır.