Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, Tayfun Erbilen tarafından sunulan bir CSS eğitim içeriğidir. Tayfun, Pizza Hut sitesindeki hareketli butonların nasıl yapıldığını göstermektedir.
- Videoda, JavaScript veya jQuery yerine CSS kullanarak hareketli butonların nasıl oluşturulacağı adım adım anlatılmaktadır. Öncelikle temel bir buton oluşturulup, hover efekti için before seçici kullanılarak alt metin ekleme, transition ile efekt verme ve position özellikleriyle hareket ettirme işlemleri gösterilmektedir. Daha sonra bu efektin yukarıdan aşağıya, aşağıdan yukarıya, sağdan sola ve soldan sağa olmak üzere farklı yönlerde nasıl uygulanacağı detaylı olarak açıklanmaktadır.
- 00:01CSS ile Buton Tasarımı
- Tayfun Erbil, Pizza Hut'un yenilenmiş sitesinde karşılaştığı özel bir buton tasarımını CSS ile nasıl yapılacağını anlatacak.
- Bu buton tasarımı JavaScript veya jQuery yerine CSS ile kolayca yapılabilir ve farklı yönlerde (yukarıdan aşağı, aşağıdan yukarı, sağdan sola, soldan sağa) kullanılabilir.
- Tasarım için CodeBench'te SCSS kullanılarak pratik bir şekilde başlanacak.
- 00:47Temel Buton Tasarımı
- İlk olarak "Satın Al" yazısı içeren bir a etiketi oluşturuluyor.
- Butona arka plan rengi, yazı rengi, kalınlığı, satır yüksekliği ve yazı tipi gibi temel özellikler veriliyor.
- Butonun display block, yazı ortalanması, alt çizgisinin kaldırılması, genişliği 100 piksel ve yüksekliği 30 piksel olarak ayarlanıyor.
- 01:36Hover Efekti İçin Before Seçici
- A etiketinin before seçici kullanılarak hover efekti için bir içerik ekleniyor.
- Data-hover özelliği kullanılarak hover durumunda gösterilecek değer belirleniyor.
- Before seçici absolute konumlandırma ile bağımsız bir nesne haline getiriliyor ve top, left, genişlik, arka plan ve yükseklik özellikleri ayarlanıyor.
- 03:18Hover Efektinin Uygulanması
- Hover durumunda before'un top değeri sıfırlanarak aşağıdan yukarıya doğru çıkması sağlanıyor.
- Efektin daha dinamik görünmesi için transition özelliği ekleniyor.
- Butonun div içinde konumlandırılması için div etiketi kullanılıyor ve overflow hidden özelliği kaldırılıyor.
- 05:38Farklı Yönlerde Hover Efekti
- Butonun farklı yönlerde (aşağıdan yukarı, yukarıdan aşağı, sağdan sola, soldan sağa) hover efekti için farklı class'lar oluşturuluyor.
- Butona display inline-block özelliği verilerek içeriğinin genişliği ve yüksekliği otomatik olarak ayarlanıyor.
- Her yön için hover durumunda a etiketinin top ve left değerleri değiştirilerek butonun hareketi sağlanıyor.
- 09:58Sonuç
- CSS ile kolayca farklı yönlerde hover efekti uygulanabiliyor.
- Her yön için ayrı transition özelliği eklenerek efektin daha dinamik görünmesi sağlanıyor.