CSS3 ve Sass ile hazırlanmış uzun gölgeli butonlar

CSS3 ve Sass ile hazırlanmış uzun gölgeli butonlar
67

Günümüzde uzun gölgeli tasarımların popüleritesi gittikçe artmakta. Bu uzun gölgeler birçok şekilde kullanılabilir  bu yazımda css3 ve sass ile hazırlanmış uzun gölgeli buton tasarımlarını paylaşacağım.

Başlayalım!
İcon’lar için fontawesome’yi tercih ettim css içinde scss kullandım.

/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

Şimdi, html ekleyelim. İlk olarak icons adında bir div açalım daha sonra fontawesome ile sosyal medya ikonlarını ekleyelim.

<div class="icons">  
  <a href="#" class="fa fa-twitter twitter social-icon"></a>
  <a href="#" class="fa fa-facebook facebook social-icon"></a>
  <a href="#" class="fa fa-stumbleupon stumbleupon social-icon"></a>
  <a href="#" class="fa fa-google-plus google-plus social-icon"></a>
</div>

Butonlarımızı tasarlayalım
Başlangıç olarak twitter, facebook, stumbleupon ve google plus ikonlarını eklemiştik bu ikonların hepsine social-icon classı eklemiştik tüm iconları kapsayan bu classa tasarımımızı işleyelim.

  .social-icon {
    text-decoration: none;
    color: white;
    display: inline-block;
    font-size: 15px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    overflow: hidden;
    margin: 0 5px;
  }

40px’e 40px boyutlarında bir buton tasarladık ihtiyacınıza göre bu boyutları değiştirebilirsiniz. Şimdi, facebook,twitter vb markalar için bazı değişiklikler ekleyelim.

$color-twitter: #55acee;
$color-facebook: #3b5998;
$color-stumbleupon: #f74425;
$color-google-plus: #dd4b39;

Şimdi ise gölgelendirmeyi yapalım.

@function makelongshadow($color) {
  $val: 0px 0px $color;
  @for $i from 1 through 35 {
    $val: #{$val}, #{$i}px #{$i}px #{$color};
  }
  @return $val;
}

Gölge değerini 35 olarak girdim bu sayıyı küçültebilir veya büyültebilirsiniz.
Son olarak gölgelendirmeyi bitirirken makelongshadow işlevini kullanalım.

.twitter {
  background: $color-twitter;
  text-shadow: makelongshadow(darken($color-twitter, 10%));
}

.facebook {
  background: $color-facebook;
  text-shadow: makelongshadow(darken($color-facebook, 10%));
}

.stumbleupon {
  background: $color-stumbleupon;
  text-shadow: makelongshadow(darken($color-stumbleupon, 10%));
}

.google-plus {
  background: $color-google-plus;
  text-shadow: makelongshadow(darken($color-google-plus, 10%));
}

Yumuşaklık değerini 10% olarak ayarladık bu değeri isteğe göre küçültüp büyültebilirsiniz.

[bilgi]Hayatımızı kolaylaştırdığı için teşekkürler Sass![/bilgi]

Yorum Yap