İçerik
Bu, CSS için en güzel zamanlardan biridir. Artık dikdörtgen tabanlı web sitelerine bağlı kalmamıza gerek yok; artık düzen ile oynamak için gerekli araçlara sahibiz ve aynı zamanda mükemmel düzeyde tarayıcı desteğinden yararlanıyoruz. CSS'ye meraklı değil misiniz? Daha uygun bir web sitesi oluşturucu seçin.
Bu yazıda, Dünya'nın dünyasına biraz ışık tutacağım. klip yolu özellik ve CSS Şekilleri. Bunu yapmak için size bir besin piramidinin nasıl yaratılacağını ve canlandırılacağını göstereceğim. Demo ikiye bölünmüştür: Solda bir piramit ve sağda CSS Şekilleri kullanılarak piramidin yan tarafını saran bazı Potter Ipsum metni satırları vardır.
Dikkat edilmesi gereken önemli nokta, piramidimizin dört parçaya bölünmüş olmasıdır: üstte bir üçgen ve altında üç yamuk. Bu bölümler birbirinden bağımsızdır ve piramidin her bir parçasını özgürce canlandırmamızı sağlar.
İşaretleme
Bu demonun çalışması için HTML'mizi temiz tutmak önemlidir, çünkü bu, tüm CSS'mizin temeli olacaktır.
div> div> div> Triangle / div> div> Trapezoid / div> div> Trapezoid / div> div> Trapezoid / div> / div>! - .pyramid'i kapatır -> h1> Title / h1> p> Paragraf 1 / p> p> Paragraf 2 / p> p> Paragraf 3 / p> p> Paragraf 4 / p> / div>! - .wrapper'ı kapatır ->
.wrapper öğesinin üst marjı var 5vh ve tüm öğeleri ortalamak için yanlarda bir otomatik değer. Bu örnekte, .piramit sola kayar (bu, daha sonra ekleyeceğimiz dış şekil özelliği için bir gerekliliktir).
Bizim dört .zone öğelerin üstte ve altta 40 piksellik bir dolgusu olacaktır. Genişlik, arka plan resimleri ve animasyon gecikmesi her birinde farklı olacaktır. Bu nedenle kullanacağız : nth-çocuk () Bu stilleri bağımsız olarak uygulamak için seçici.
Besin piramidi, üstte bir üçgenden ve altında üç yamuktan oluşur. Her bölüm bir .zone öğesi ve her biri farklı bir genişliğe sahip olacaktır. Üstteki üçgen (.zone: nth-çocuk (1)), yüzde 25'lik bir genişliğe, yüzde 50'nin altında oturan yamuk, üçüncü element için yüzde 75 ve piramidin tabanı için yüzde 100 tam genişliğe sahip olacak.
Şimdi, bir kare ve altında üç dikdörtgen olmalı. Başvuru zamanı klip yolu.
Clip-Path Özelliği
klip yolu property, tüm bloğu göstermek yerine bir öğenin parçalarını (görüntüler, paragraflar ve hatta div'ler) gizlemek için harika bir araçtır. Klip yolu iç metin, daire, elips ve çokgen gibi birkaç temel şekil sağlar. Ancak, daha karmaşık şekiller ve geri dönüşler oluşturmak için SVG'yi de kullanabiliriz.
Sayesinde klip yoludüzenlerimizle daha yaratıcı olabilir ve tasarımlarımıza dikdörtgen olmayan şekiller dahil edebiliriz. Özellik, mutlak veya sabit bir konumlandırma gerektiren, artık kullanımdan kaldırılmış bir clip özelliğinden doğmuştur.
rağmen klip yolu özelliği henüz her tarayıcıda desteklenmediğinden, SVG geri dönüşü ile neredeyse tam bir desteğe ulaşabiliriz ve -webkit- önek. Şu anda destek sağlamayan tek büyük tarayıcı Edge'dir.
Piramidimizi oluşturmak için başvurmamız gerekiyor klip yolu dördümüze .zones. Bir çokgen şekli kullanacağız ve her noktanın koordinatlarını X ve Y değerleri ile yüzde olarak tanımlayacağız. : nth-çocuk her bir öğeyi bağımsız olarak seçmek için.
.zone: nth-child (1) {clip-path: poligon (% 50 0,% 100% 100,% 0% 100); } .zone: nth-child (2) {clip-path: polygon (25% 0, 75% 0, 100% 100%, 0% 100); } .zone: nth-child (3) {clip-path: polygon (16.5% 0, 83% 0, 100% 100%, 0% 100); } .zone: nth-child (4) {clip-path: polygon (12.5% 0, 87.5% 0, 100% 100%, 0% 100); }
Kod düzenleyicimiz aracılığıyla doğru yerde koordinatları almak imkansız görünebilir. Koordinatları rastgele tahmin etmekten kaçınmak istiyorsak, -webkit- önek ve kodun tarayıcının kendisinde düzenlenmesi. Chrome DevTools, kodu yazarken çalışırken görmemizi sağlayarak şekillerimizi çizmeyi kolaylaştırır.
Shape-Outside Özelliği
Şimdi piramidimiz inşa edildi, metnin etrafından akmasını sağlama zamanı. Metnin bir öğenin etrafına sarılmasını sağlamanın en iyi yolu, şekil dışı Emlak. Tarayıcı desteği iyi olmasa da (yalnızca Webkit ve Blink tarayıcılarında desteklenir. -webkit- önek), kalan tarayıcılara ulaşmamıza yardımcı olacak bir çoklu dolgu var.
Gibi klip yolu Emlak, şekil dışı ayrıca iç metin, daire, elips ve çokgen gibi önceden tanımlanmış birkaç temel şekle sahiptir. Bu demo için, metnin piramidimizin etrafına sarılmasını sağlayacak dik açılı yamuk oluşturmak için çokgeni kullanacağız.
Bu koordinatların değerleri şuraya uygulanmalıdır: .piramit ve şuna benziyor:
.pyramid {şekil-dışında: poligon (310px 0, 130px 405px, 558px 405px); }
Bu sayıların sadece örnek olduğunu unutmayın - zevkinize ve ihtiyaçlarınıza göre şeklin açısını ayarlayabilirsiniz.
Etkileşim
Piramidin her bölümü bağımsız olduğu için kolaylıkla gerçekleştirebiliriz : fareyle üzerine gelme üzerlerindeki olaylar. Bu beraberinde birçok fırsatı da beraberinde getiriyor. Her birini yapabiliriz .zone farklı bilgileri görüntüleyin veya yeni bir pencere açmasını sağlayın.
Bu demo için: hover efektlerinde harmanlama modlarıyla oynamaya karar verdim. Photoshop'ta günümüzde CSS'den daha yaygın olan harmanlama modları, tarayıcıya öğelerinizin nasıl birbirine karışmasını istediğinizi söylemenize olanak tanır.
Aralarından seçim yapabileceğiniz birden fazla karışım modu vardır: diğerlerinin yanı sıra koyulaştır, açıklaştır, üst üste koy, tonla ve çarp. Onları tanımak için harika bir araç Sara Soueidan’ın CSS Blender'ıdır.
RGBA arka plan rengine ve 0,7 alfa değerine sahip bir arka plan resmi seçtim. Seçtiğim harmanlama modu açık ve açık : fareyle üzerine gelme Ben değiştirdim arka plan rengi 0.5 saniyelik bir geçişle alfa kanalını 0.2'ye.
Üstteki üçgenin kodu şuna benzer:
.zone: nth-child (1) {arka plan: rgba (202, 197, 94, 0.7) url ("img / sebzeler. jpg"); arkaplan karışım modu: açıklaştır; arka plan rengine geçiş 0.5s; } .zone: nth-child (1): vurgulu {arka plan rengi: rgba (202, 197, 94, 0.2); }
Tanıtım Animasyonu
Bu en eğlenceli kısım: her bir öğenin sayfaya nasıl gireceğini tanımladığımızda. Bu durumda piramidin her bir parçası yukarıdan girecektir. dönüşümü: translateY (-500%); -e dönüşümü: translateY (% 0);. Her zamandan beri .zone bağımsızdır, biriktiricidir animasyon gecikmeleri idealdir. Dördüncü elementin (piramidin tabanı) ilk olarak nasıl düştüğüne dikkat edin.
.zone: nth-child (1) {animation-delay: 2s; } .zone: nth-child (2) {animasyon gecikmesi: 1.5s; } .zone: nth-child (3) {animation-delay: 1s; } .zone: nth-child (4) {animasyon gecikmesi: 0.5s; }
Bu koda, ayrıca eklemeliyiz animasyon doldurma modu: ileri; animasyon bittikten sonra elementi doğru yerde tutmak için. Öğeler yukarıdan aşağıya düştüğünde, bir kolaylık zamanlama işlevi uygularsak animasyon daha gerçekçi görünecektir, çünkü bu, yerçekimine bağlı ivmeyi taklit eder (önceden tanımlanmış hareket hızı değerinin aksine).
h1 öğesi ve paragraflar daha basit bir animasyona sahiptir. 0 opaklığa sahip bir RGBA değerinden 1'e giderler. Ayrıca farklı gecikmeleri olacaktır.
Son sözler
İçin uygulama klip yolu biraz yavaş olabilir, ancak ilerliyor ve geri dönüşler var. Bu nedenle, onu üretimde kullanmaya başlamak için harika bir zaman. Bu özelliklerle daha yaratıcı web siteleri yapabilir ve yepyeni düzenler keşfedebiliriz. Eğlenmek klip yolu ve düzen devrimiyle kalıbı kırın!
Not: Yeni bir site oluşturmak üzereyseniz, web barındırma sağlayıcınızı düşünmeniz gerekir ve bulut depolamanızın da mükemmel olduğundan emin olmak her zaman yararlıdır.
Gerçek makaleler:
- Bu en iyi araçlarla bir web sitesi oluşturucu seçin
- Web sitesi şablonlarında en iyiyi görün
- En iyi kullanıcı test yazılımını keşfedin
