Atölye › Kartvizitim › 12/12. adım

Kendin yap: tepki veren kart

Ne yapıyoruz

Son dokunuş senden: fare kartın üstüne gelince bütün kart biraz büyüsün, hem de birden değil, yumuşakça.

Bu adımda kod verilmiyor. Bildiklerin: :hover (fare üstündeyken), bir kutunun kuralına özellik eklemek. Yeni iki özellik gerekecek: transform: scale(...) bir şeyi büyütür, transition değişimi yumuşatır.

Sıra sende

• .card:hover kuralı kartı transform: scale(...) ile büyütsün (1'den biraz büyük bir sayı, ör. 1.05).
• .card kuralına transform için bir transition ekle (ör. transition: transform 0.2s;): büyüme bir anda değil, yumuşakça olsun.
• Sonra fareyi kartın üstüne getirip dene.

Beceriler: CSS ile görünüm

← Tepki veren bağlantılar

Tüm adımlar

1. Başlık olarak adın
2. Kendin hakkında bir satır
3. Bir kutuya koy
4. İlk CSS
5. Kutuyu karta benzet
6. Kartı ortala
7. Yumuşak bir gölge
8. Adını renklendir
9. Bağlantılarını ekle
10. Bağlantılar yan yana
11. Tepki veren bağlantılar
12. Kendin yap: tepki veren kart