Böylece yakın zamanda yeni Shape() fonksiyonuna (şimdi Baseline!) ve aynı zamanda köşe şekli özelliğine kavuştuk. CSS'de şekil oluşturma konusunda başka neye ihtiyacımız olabilir? Size şunu söyleyeyim: kenar şekli özelliği!
şekil() ? köşe şeklinde mi? sınır şekli?! Bütün bunlar nereden geldi?
Eğer benim gibi bir CSS şekli fanatiği değilseniz, muhtemelen bu özellikleri ortaya çıktıklarında kaçırmışsınızdır, o yüzden hadi onlara kısa, resmi bir tanıtım yapalım, şu şekilde başlayalım:
Shape() ve köşe şekli
Shape() işlevi, örneğin path() işlevinden çok daha kolay bir şekilde CSS şekilleri oluşturmak için SVG söz dizimini kullanan, klip yolu ve uzaklık yolu için yeni bir değerdir. Bu özelliği araştıran dört makalelik bir seri ve karmaşık şekillerin oluşumunu araştırdığım başka bir makale yazdım.
SVG'den bahsetmişken, herhangi bir SVG şeklini Shape() kullanarak ifade edebilirsiniz. Başka bir deyişle, herhangi bir SVG şeklini CSS şekline dönüştürebilirsiniz ve tahmin edin ne oldu, tam olarak bunu yapan bir dönüştürücü yaptım!
Köşe şekli söz konusu olduğunda border-radius ile birlikte çalışan bir özelliktir. Adından da anlaşılacağı gibi, önceden tanımlanmış anahtar sözcükleri kullanarak bir öğenin köşesinin şeklini kontrol etmenize olanak tanır.
Teknik Analiz
.corner { kenarlık yarıçapı: 20px; köşe şekli: yuvarlak | kepçe | eğim | çentik | sincap; }
Ayrıca, "Köşe şeklini kullanan CSS Şekilleri" başlıklı başka bir makalede ele aldığım gibi, yaygın CSS şekilleri oluşturmak için de kullanılabilir.
Önemli Gelişmeler
Peki bu köşe şekli özelliği gerçekten yararlı mı, hatta gerekli mi? Sincap değeri dışında şekillerin çoğu, klip yolu veya maske kullanılarak zaten oluşturulabilir. Ancak diğerlerinin yapamadığı köşe şekli, bu şekillere kolayca kenarlıklar ve diğer süslemeler eklemektir!
köşe şekli yalnızca köşeleri şekillendirmekle kalmaz, aynı zamanda border ve box-shadow gibi diğer özellikleri de destekleyerek bunların öğenin kutusu yerine şekli takip etmelerine olanak tanır. Bu oyunun kurallarını değiştirecek bir gelişme çünkü hepimiz şekillere kenarlık eklemenin bir kabus olduğunu biliyoruz.
Sonuç ve Değerlendirme
Destek hala mükemmel değil (bunu yazarken yalnızca Chromium), ancak onu keşfetmek ve potansiyeline dair genel bir bakış elde etmek için iyi bir zaman.
Köşeleri şekillendirmek iyidir ancak bununla yapabileceklerimiz hala oldukça sınırlıdır. Bunun yerine tüm öğeyi şekillendirmeye ne dersiniz? Sınır şeklinin yapacağı şey budur. Yeni Shape() işlevi de dahil olmak üzere, Clip-path ile aynı değerleri kabul eder.
Sistem Güvenliği
Yani klip yolu ile aynı işe mi sahip? Ne var ne yok?
Köşe şeklinde olduğu gibi kenarlık, kutu gölgesi ve anahat gibi dekoratif özelliklerin çoğu şekli takip eder.
Nasıl Önlem Alınmalı?
Clip-path (ve mask ), dekorasyonlar da dahil olmak üzere tüm öğeyi kırpacak/maskeleyecektir, bu nedenle kenarlıklara sahip olmak büyük bir HAYIR'dır. Bu, CSS şekilleri oluşturmada büyük bir sorundur.
Border-shape özelliği bu sorunu çözmek için burada. Öğeyi kırpmak yerine, öğeyi "şekillendirir" ve dekorasyonun bu şekli takip etmesini sağlar. Başka bir deyişle, CSS şekillerine kenarlık koymak çocuk oyuncağı olacak!
Gelecekte Ne Bekleniyor?
Kenar şeklinin kullanımının da çok kolay olduğundan bahsetmiyorum bile. Clip-path'e aşina iseniz, pratikte öğrenecek yeni bir şeyiniz yok demektir. Bir özelliği diğeriyle değiştirmeniz yeterlidir; işlem tamamdır.
.shape { /* Eski kod */ klip yolu: şekil() | çokgen() | ...; /* Yeni kod */ border-shape: şekil() | çokgen() | ...; }
Detaylar ve Etkileri
Sizi Shape() işlevi hakkında daha fazla bilgi edinmeye tekrar davet ediyorum çünkü border-shape'i gerçekten güçlü kılan değer budur. İkisi gerçekten el ele gidiyor.
Artık mülkün temel kullanımını bildiğinize göre eğlenceli şeylere başlayalım mı? Sınırları zorlamak ve border-shape kullanarak nelerin mümkün olduğunu size göstermek için buradayım.
Not: Destek şimdilik yalnızca Chrome ile sınırlıdır; bu nedenle Chrome'u kullanarak sonraki demolara göz atın.
Uzmanların Görüşleri
Yalnızca Kenarlık Şekilleri
Söylediğim gibi, buradaki ilk büyük avantaj, gerçek şekli takip eden şekillere kenarlıklar eklemektir, bu aynı zamanda yalnızca kenarlıklı şekiller oluşturabilme yeteneği anlamına da gelir. Tek yapmanız gereken aşağıdaki kodu yazmak:
.shape { kenarlık: 8 piksel düz kırmızı; border-shape: /* şekil kodunuz */; }
Artık hack yok ve baş ağrısı yok!
CodePen Yerleştirme Geri Dönüşü
Şekillerin çoğu CSS Şekilleri koleksiyonumda zaten mevcuttur; dolayısıyla, yalnızca kenarlıklı şekiller oluşturmak aslında basit bir kopyala/yapıştır işlemiyle yapabileceğiniz bir şeydir. Çevrimiçi oluşturucularımdan bazıları bile, daha birçoklarının yanı sıra lekeler, dalgalı çizgiler ve süslü çerçeveler gibi karmaşık şekillerin yalnızca kenarlıklı sürümlerini sağlayacak şekilde yapılandırılmıştır.
Önceki kodu alıp aşağıdaki gibi güncelleyelim:
.shape { kenarlık: 8 piksel düz kırmızı; border-shape: inset(0) /* kodu şekillendirirsiniz */; }
Sahip olduğunuz şekil kodunu korursunuz ve inset(0) a'yı eklersiniz. başlangıç. Evet, border-shape içinde iki şekil değeriniz olabilir ve sonuç aşağıdaki gibi olacaktır:
CodePen Yerleştirme Geri Dönüşü
border-shape özelliği tek bir
Dış şekil olarak temel bir dikdörtgen kullanarak ( inset(0) ), yalnızca kenarlıklı sürümü kolayca kesikli sürüme dönüştürmeyi başardım!
Şeklin bir daire içinde olmasını ister misiniz? Kolay!
CodePen Yerleştirme Geri Dönüşü
Yaptığım tek şey iç metin(0)'ı (dikdörtgen) Circle() (daire) ile değiştirmek.
Ancak bunu basit bir sınır yarıçapı ile yapabiliriz: %50, değil mi?
HAYIR! border-shape ile çalışırken border-radius göz ardı edilir, bu da mantıklıdır çünkü artık yuvarlayacak köşelerimiz yoktur - eleman artık şekillendirilmiştir. Önceki örnekte gösterildiği gibi border-radius kullanımının yerini alacak her türlü şekli tam anlamıyla yaratabileceğimiz için bu çok da önemli değil.
Not: Circle()'ı neden herhangi bir argüman olmadan kullandığımı merak ediyorsanız, "Argümansız çalışan CSS İşlevleri" makaleme göz atın.
Bir sonraki kısma geçmeden önce bakmamız gereken iki şekil değerine sahip birkaç örnek daha:
CodePen Yerleştirme Geri Dönüşü
Çok fazla çaba harcamadan karmaşık görünümlü şekiller elde etmek için kelimenin tam anlamıyla herhangi bir kombinasyonu kullanabilirsiniz!
Şimdi bir metin bloğu alalım ve önceki kodu iki şekil değeriyle uygulayalım:
.box { border-shape: iç metin(0) daire(); kenar rengi: pembe; }
CodePen Yerleştirme Geri Dönüşü
Şu ana kadar öğrendiklerimiz göz önüne alındığında belki de bu şaşırtıcı bir şey değil. İki şekil tanımlıyoruz ve aralarındaki alanın içine kenarlık çiziliyor. Burada yeni olan şey şu ki, içerikle ilgileniyoruz ve gördüğünüz gibi içerik sınırlarla örtüşüyor.
border-shape, öğenin dekorasyonu da dahil olmak üzere tüm öğeyi şekillendirir, ancak içerideki içerik değişmeden kalır ve başlangıçtaki dikdörtgen şeklini takip eder. Bu yeni bir davranış değil çünkü klasik border-radius'ta bile aynı şey oluyor. Overflow Hidden kullanarak gizlemeye karar vermediğimiz sürece içerik taşacaktır.
CodePen Yerleştirme Geri Dönüşü
Bu durumda içeriğin taşmasını ve kenarlık dekorasyonunun üstüne yerleştirilmesini istediğim için overflow özelliğini dikkate almayacağım.
Şimdi şeklin kodunu şu şekilde güncelleyelim:
.box { border-shape: iç metin(0 -100 piksel) daire(50 piksel); kenar rengi: pembe; }
CodePen Yerleştirme Geri Dönüşü
Daireyi küçültüp dikdörtgeni büyüttüm. Nereye gittiğimi görüyor musun? Dairenin yarıçapını 0 ve dikdörtgeni büyüterek, bir arka plan efekti yaratıyorum!
.box { border-shape: iç metin(0 -100vw) daire(0); kenar rengi: pembe; }
CodePen Yerleştirme Geri Dönüşü
Öğe ortalanmış halde kalır, ancak arka planı (kenarlık kullanarak simüle ettiğimiz!) ekranın kenarına kadar uzanır.
Ve bu sadece iki şekil değerinin kullanılmasıyla sınırlı değildir. Tek şekil değeriyle bile, sizi öğenin sınırlarının dışına çıkaracak herhangi bir değeri göz önünde bulundurursanız, çığır açan bir dekorasyona ulaşabiliriz (ki bu genellikle zordur).
İşte keşfetmenize izin vereceğim birçok örnek içeren bir demo:
CodePen Yerleştirme Geri Dönüşü
Farklı dekorasyonlar denemek için son demoyu bir kenara bırakalım.
CodePen Yerleştirme Geri Dönüşü
Bu sefer element sınırlarının dışına çıkmak yerine, onun içinde kalıp kısmi dekorasyon yaratıyorum. Başka bir deyişle artık sınırlarımız yok. kenar şeklinin sınırı yoktur. Tek sınır hayal gücünüzdür!
Dekorasyonu oluşturmak için esas olarak Shape() fonksiyonuna güveniyorum, bu yüzden kendinize bir iyilik yapın ve dört makale serimi okuyarak bu özelliği keşfedin! Shape() konusunda uzmansanız, border-shape kullanarak kolayca karmaşık dekorasyonlar üretebilirsiniz.
Evet, kenar şekli canlandırılabilir ve farklı türde animasyonlarımız olabilir. İki değerli söz dizimi ile, ortaya çıkarma efekti oluşturmak için kenarlık genişliği değerini canlandırabiliriz:
Aşağıya gelin ve sonucu görün:
CodePen Yerleştirme Geri Dönüşü
Harika, değil mi? Bunu görüntü öğelerine de uygulayabiliriz:
CodePen Yerleştirme Geri Dönüşü
Daha karmaşık bir görünüm oluşturmak için şekil değerlerine de animasyon uygulayabiliriz. eski animasyonlar. Burada, blob şekillerine uygulanan sıçrayan vurgulu efektinin bir demosu var ("shape() Kullanarak Karmaşık CSS Şekilleri Yapmak" adlı makalemden).
CodePen Yerleştirme Geri Dönüşü
Aynı kodu alıyorum, Clip-path'i border-shape ile değiştiriyorum ve tada!
CodePen Yerleştirme Geri Dönüşü
Ve neden önceki dekorasyonlara ince bir animasyon eklemiyorsunuz? Ne olacağını görmek için başlıkların ve metnin üzerine gelin:
CodePen Yerleştirme Geri Dönüşü
Daha Fazlasını mı İstiyorsunuz? Hadi gidelim!
Burada fareyle üzerine gelindiğinde menü öğeleri arasında kayan elle çizilmiş bir alt çizgi bulunmaktadır. Düz çizgiler sıkıcıdır!
CodePen Yerleştirme Geri Dönüşü
Peki neden içeriğinizin etrafında elektrikli bir çerçeve olmasın? Endişelenmeyin, dokunmatik ekranlar için güvenlidir.
CodePen Yerleştirme Geri Dönüşü
Sadece kenarlıklı süslü bir yükleyiciye ne dersiniz? (kod yumuşacık yükleyici koleksiyonumdan alınmıştır)
CodePen Yerleştirme Geri Dönüşü
Daireleri, daireler yaklaştıkça bükülen, uzaklaştıkça uzayan düz bir çizgiyle birleştirelim. Aşağıdaki demodaki daireleri sürükleyin ve sihrin nasıl işlendiğini görün:
CodePen Yerleştirme Geri Dönüşü
Bu yeni özelliğe neden "güçlü" dediğimi artık daha iyi anladığımı düşünüyorum. CSS şekilleri oluşturmayı kolaylaştırmanın yanı sıra, süslü dekorasyonlar, harika animasyonlar ve daha fazlasını eklememize olanak tanır!
Bunu kenar şeklinin potansiyelini gösteren hafif bir makale olarak tutmak istediğim için demoların çoğunda ince ayrıntılara girmedim. Artık onunla çılgın şeyler yaratabileceğimizi bildiğinize göre, daha ayrıntılı makaleler için bizi takip etmeye devam edin!
