Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir web geliştiricisinin CSS kullanarak Raul Droneka'nın Twitter'da paylaştığı özel bir navigasyon tasarımını yeniden oluşturma sürecini gösteren bir eğitim içeriğidir.
- Videoda, konuşmacı 26 dakika ve 32 saniye içinde, hover edildiğinde takip eden bubble efektleri ve aktif link için özel bubble efektleri olan bir navigasyon tasarımı oluşturmayı hedeflemektedir. Süreç boyunca anchor etiketleri, anchor name özellikleri, gradientler, box shadow, transform ve Z index gibi CSS özellikleri kullanılarak tasarımın adım adım oluşturulması gösterilmektedir.
- Konuşmacı ayrıca hover bubble'ın görünümünü, hover durumunda değişen renkleri ve hover bubble'ın anchor özelliğini nasıl uygulayacağını detaylı şekilde anlatmaktadır. Özellikle hover bubble'ın anchor özelliğini uygulamak için pseudo elementler (before) kullanarak çözüm bulma süreci de gösterilmektedir.
- 00:00Speedrun CSS Edition Tanıtımı
- Raul Droneka'nın Twitter'da paylaştığı navigasyon tasarımı, hover özelliği ve bubble efektiyle dikkat çekiyor.
- Tasarım, hover edilen öğenin etrafında baloncuk oluşturarak takip ediyor ve aktif öğeyi baloncukla vurguluyor.
- Tasarım, çeşitli gradyanlar ve detaylarla donatılmış olup, tamamen CSS ile 20 dakika 32 saniyede oluşturulması hedefleniyor.
- 00:28Temel HTML ve CSS Yapısı
- Tasarım için temel HTML, Raul Droneka'nın ekran görüntüsü ve dört bağlantılı bir nav öğesi kullanılıyor.
- Nav öğesi için genişlik "fit-content" ve kenarlık 1px solid yeşil olarak ayarlanıyor.
- Linkler için padding, arka plan, display inline-block, renk ve yazı tipi özellikleri belirleniyor.
- 01:42Hover ve Aktif Baloncuk Efekti
- Hover ve aktif baloncuk efektleri için CSS anchor kullanılarak iki ayrı baloncuk oluşturuluyor.
- Aktif baloncuk, aktif linkin üzerine konumlandırılıyor ve hover baloncuk, aktif linkin üzerine konumlandırılıyor.
- Baloncuklar, hover edilen öğenin üzerine takip ediyor ve aktif linkin üzerine geldiğinde baloncuk aktif hale geliyor.
- 03:29Baloncukların Stilizasyonu
- Baloncuklar için far gri renk ve arka plan rengi belirleniyor.
- Aktif baloncuk için beyaz renk ve aktif link için siyah renk kullanılıyor.
- Hover baloncuk için gri renk ve z-index değeri -2 olarak ayarlanıyor.
- 05:41Nav Düzenlemesi ve Gradyan Ekleme
- Nav öğesi için padding değeri ayarlanarak öğeler arasında boşluk oluşturuluyor.
- Nav öğesi için flexbox kullanılarak düzen yapılıyor.
- Nav wrap adında yeni bir element oluşturulup, nav için border ve margin değerleri ayarlanıyor.
- 08:33Son Stil Eklemeleri
- Nav wrap için far siyah ve far gri arasında linear gradient ekleniyor.
- Nav için box-shadow inset özelliği kullanılarak gölge efekti oluşturuluyor.
- Dış arka plan için after elementi kullanılarak kırmızı renk ve transform translate y negatif değeriyle dışarı doğru kaydırma yapılıyor.
- 12:08Z Index ve CSS Sorunları
- Konuşmacı, görüntü sorunları yaşadığını ve bunların muhtemelen z index ile ilgili olduğunu belirtiyor.
- Z index'in nasıl çalıştığını sorguluyor ve çözüm için hedef pozisyonun relative ve index negatif bir değer almasını öneriyor.
- Arka plan için border radius, padding ve gri renkli linear gradient uyguluyor.
- 14:28Hover Bubble ve Box Shadow
- Hover bubble için de linear gradient uyguluyor ve bu tasarımın daha iyi olduğunu belirtiyor.
- Box shadow için inset, blur ve beyaz renk değerleri ekliyor.
- Dev tools kullanarak hover bubble'ın özelliklerini ayarlıyor.
- 15:36Aktif Bubble ve Anchor Sorunu
- Aktif bubble için hafif gri renk ve beyaz box shadow uyguluyor.
- Hover durumunda butonların zıplama sorunu olduğunu fark ediyor.
- Anchor sorununu çözmek için her linki bir before pseudo elementiyle sarıp, hover durumunda bu elementin anchor değerini "nav" olarak ayarlıyor.
- 18:37CSS Anchor Özellikleri
- CSS anchor özelliklerinin çok ilginç olduğunu ve herhangi bir elementin inset değerlerini başka bir elemente uygulayabileceğini belirtiyor.
- Tasarımcıların zor fikirler geliştirdiğini ve bunları CSS ile nasıl uygulayacağını düşünmenin eğlenceli olduğunu söylüyor.
- İzleyicilerden yorumlarını ve kendi uygulamalarını paylaşmalarını istiyor.