Üzerine Gelme Efekti - II

Coddy'nin 3D Kart | Front-end Projesi kursunda ders 31 / 31.

Bu kod, "bottom" sınıfına sahip bir öğenin içindeki "social-buttons-container" sınıfına sahip bir kapsayıcıdaki sosyal butonları stillendiriyor. Hadi bunu açıklayalım:

İlk üç kod bloğu, sosyal butonlar için geçişleri (transitions) ayarlar. Her butonun geçiş başlamadan önce farklı bir gecikme süresi vardır. Geçişler, "transform" özelliği (muhtemelen hareketi yönetir) ve "box-shadow" özelliği (muhtemelen gölge efektlerini kontrol eder) içindir. Bu geçişler, buton hareketini ve gölge değişikliklerini zaman içinde pürüzsüz hale getirir.
Dördüncü blok, sosyal butonların içindeki SVG (Scalable Vector Graphics) simgeleri için genişliği ve dolgu rengini ayarlar.
Beşinci blok, bir sosyal butonun üzerine gelindiğinde uygulanacak stilleri ayarlar. Arka plan rengini siyaha çevirir ve imleci bir işaretçiye (pointer) dönüştürerek tıklanabilir olduğunu belirtir.
Son blok, sosyal butonun üzerine gelindiğinde SVG simgesinin dolgu rengini beyaza değiştirerek kullanıcıya görsel geri bildirim sağlar.

Görev

Kolay

Bu kodu kullanın:

.bottom .social-buttons-container .social-button:first-child {
  transition: transform 0.2s ease-in-out 0.4s, box-shadow 0.2s ease-in-out 0.4s;
}

.bottom .social-buttons-container .social-button:nth-child(2) {
  transition: transform 0.2s ease-in-out 0.6s, box-shadow 0.2s ease-in-out 0.6s;
}

.bottom .social-buttons-container .social-button:nth-child(3) {
  transition: transform 0.2s ease-in-out 0.8s, box-shadow 0.2s ease-in-out 0.8s;
}

.bottom .social-buttons-container .social-button .svg {
  width: 15px;
  fill: #008982;
}

.bottom .social-buttons-container .social-button:hover {
  background: black;
  cursor: pointer;
}

.bottom .social-buttons-container .social-button:hover .svg {
  fill: white;
}

.glass{
  border-top-right-radius: 100%;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.349) 0%, rgba(255, 255, 255, 0.815) 100%);
  transform: translate3d(0px, 0px, 25px);
  transition: all 0.5s ease-in-out;
}

3D kartınız hazır!

Kendin dene

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

Üzerine Gelme Efekti - II

3D Kart | Front-end Projesi bölümündeki tüm dersler