CSS bunları yapabilir mi?
Bu makale asıl olarak devto üzerinde paylaşılmıştır. Makalenin yazarı Ananya Neogi’den izin alınmıştır.
Bu yazıda CSS’in yapabileceği inanılmaz şeylerden bahsedeceğiz.
Not:Bazı özelliker bazı browserlarda destekten dolayı çalışmıyor. @support ile browserların desteğini kontrol edebilir ve yedek stiller ekleyebilirsiniz. Örnekleri görüntülemek için lütfen Chrome kullanınız.
1. box-decoration-break
Bu css özelliği bir elementin parçalarının birden çok satıra,sütuna veya sayfaya bölündüğünde nasıl görüntülenmesi gerektiğini belirtir.
2. attr()
Seçili elementin ilgili attribute’ünde ki veriye erişebilir ve kullanabiliriz. Bu method erişebilirlik amaçlandığında gerçekten yardımcı olabilir.
3. backface-visibility
Bu css özelliği bir elementin arka yüzünün kullanıcıya döndüğünde görünür olup olmadığını ayarlar.
4. conic-gradient
Gradient’ler harikalar. Arkaplan stillendirmede kullanmış olabilirsiniz peki conic-gradient yardımı ile pasta grafiği yapabileceğinizi biliyor muydunuz?.
conci-gradient leri daha iyi anlamak için mdn doküman kaynağı.
5. filter
CSS filtreleri varken kim photoshop’un filtre efektlerine ihtiyaç duyar ki. 🙃 Filtre fonksiyonları görüntülerinin görünümünde değişiklikler uygular. Kullanabileceğimiz efektler blur , brightness , contrast , grayscale , hue-rotate , opacity , invert , sepia , saturate , drop-shadow
drop-shadow filtresi inanılmaz. Görüntüye düşen gölge eklemenize izin veriyor.
(Bazı kullanıcılarda drop-shadow özelliği görsellerin yüklenememesi yüzünden görüntülenememektedir. Yazının orijinaline sadık kalmak için drop-shadow örneğini kaldırmadım. Dilerseniz codepen üzerinde istediğiniz gibi düzenleyebilirsiniz veya alttaki örneğe de bakabilirsiniz.)
MDN üzerinde de örneğini bulabilirsiniz.
6. mix-blend-mode
Bu css özelliği elementin içeriği, arkaplan içeriği veya parent elementin içeriği ile nasıl karışacağını ayarlar.
Resim ve yazılar ile mix-blend-mode ve filter özelliklerini kullanarak harika şeyler yapılabilir. MDN doküman üzerinde daha çok öğrenebilirsiniz.
7. first-letter
Benim favorilerimden biri olan şey kitap ve dergilerde ki güzel drop-caplerdir (başlangıç harfi büyük). first-letter özelliği ile drop-cap oluşturabiliriz.
8. shape-outside
Bu CSS özelliği ile bitişik satır içi içeriğin basit dikdörtgen kutular yerine karmaşık nesnelerin etrafına sarılmasını sağlar.
Örneği başka bir tabda açabilir ve pencerenin genişliğini değiştirdiğiniz de metinin resmi nasıl sardığını anlayabilirsiniz.
(Metin içerisinde ki görsel yüklenmez ise alttaki örneği inceleyebilirsiniz.)
9. writing-mode
Bu CSS özelliği metin satırlarını yatay veya dikey olarak nasıl düzenleyeceğimizi sağlar.Elimizde ki değerler.
horizontal-tb:Varsayılan değerdir ve içerik bizim alışkın olduğumuz gibi soldan sağa aşağıya artan gider.vertical-lr: İçerik dikey olarak yazılır ve soldan başlar.vertical-rl:İçerik dikey olarak yazılır ve sağdan başlar.
Burada ki uygulamalı örneğe bakabilirsiniz. CSS-trick üzerinden de daha detaylı öğrenebilirsiniz.
10. Metine gradient ekleme
Gradient metin elde etmek için -webkit-background-clip:text ve -webkit-text-fill-color özellikleri ile birlikte background:linear-gradient(direction,color) değeri kullanılır.
11. Yumuşak kaydırma
scroll-snap-type kaydırma noktalarının nasıl kaydırılacağını ayarlar.
Bu örnek dikey kaydırma ve mandatory değeri ile gösterilmektedir. MDN Docs üzerinde diğer özelliklerin proximinity ve yatay kaydırma özelliklerini kullanarak açıklamaktadır.
Buradakiler CSS’in yapabileceği harika şeylerin sadece birkaçı. Olanaklar ise sınırsız!
