CSS Efektli Yatay Menü Nasıl Oluşturulur?

Oluşturan: Ali Dinçer

2020-05-09 tarihinde oluşturuldu


Creative Link Effects

Mehabalar, bugün sizlere projelerimde ve oluşturduğum sitelerde sıklıkla kullandığım yatay menü efektlerini anlatmak istiyorum.  Bu içeriği okuduktan sonra artık sizde bu efektleri uygulayabilecek ve çalışmalarınıza veya sitenize kolayca dahil edebileceksiniz. Hem de tek bir CSS dosyası kullanarak.

Siz de profesyonel ve kaliteli görünen bir menü efekti oluşturmak ve projelerinizde kullanmak istemez misiniz? Artık siz de rahatlıkla projelerinizde bu efektleri kullanabileceksiniz :)

 

 

 

 

Nasıl İndirilir? Nasıl Kullanılır?

Creative Link Effects adresinden dosyamızı indireceğiz.

Download Souce butonuna tıklayarak rar dosyamızı bilgisayarımıza indiriyoruz.

 

 

İndirdikten sonra css klasörünün içerisinden (component.css) dosyamızı dahil etmek istediğimiz projenin bulunduğu konuma atıyoruz.

 

 

component.css dosyamızı projemize dahil ettikten sonra HTML dosyamıza link etiketi ile bağlantısını gerçekleştiriyoruz.

 

<link rel="stylesheet" href="component.css">

CSS dosyamızı örnekteki gibi bağlıyoruz.

Bağladıktan sonra artık istediğimiz efektleri rahatlıkla kullanabiliriz tek yapmamız gereken efekt uygulamak istediğimiz menünün etiketine örnekte göstereceğim şekilde Class eklemek.

<nav class="cl-effect-13">
	<a href="#">Beleaguer</a>
	<a href="#">Lassitude</a>
	<a href="#">Murmurous</a>
	<a href="#">Palimpsest</a>
	<a href="#">Assemblage</a>
</nav>

cl-effect-x şeklinde istediğimiz efekt numarasına göre class'ımızı ekleyebiliriz

 

 

Örnek efektlere Demo linkinden göz atabilirsiniz.

  • cl-effect-1
  • cl-effect-2
  • ...
  • cl-effect-21

Toplam 21 efekt bulunuyor kullanmak istediğnizi göz zevkinize göre veya tasarımınıza en uygun olanı seçebilirsiniz.

 

 

Umarım yardımcı olabilmişimdir. Bu içeriği okuduğunuz için teşekkürler. Lütfen yorum yapmaktan çekinmeyiniz ve unutmayınız. Benim ile iletişime geçmek isterseniz iletşim bölümünden bana mesaj gönderebilirsiniz. Kendinize iyi bakın :)

Kaynaklar

CSS
Yorum yap:
Yorumlar