CSS Kullanarak Resmin Etrafını Yazı ile Sarma – Tasarım Kodlama
CSS

CSS Kullanarak Resmin Etrafını Yazı ile Sarma

Web sayfaları her zaman yan yana dizilmiş dikdörtgen içerikli bloklardan oluşur.

Web tasarımcıları, kullanıma hazır yaratıcı düzenleri, web geliştiricileri tarafından kesildiğinde, genellikle karmaşıklık ve tarayıcılar arası desteğe atıfta bulunduğunda hayal kırıklığına uğrarlar.

CSS şekillerinin tanıtılmasıyla işler daha iyiye doğru değişti. Metni daire, elips, çokgen gibi özel şekillerin etrafına sarmak her zamankinden daha kolay hale geldi.

Web tasarımcıları tasarımlarında karmaşık şekillerle oynayabilirler. Web geliştiricilerinin tarayıcılarda çalışmasını sağlamak için fazladan çalışmak zorunda değilsiniz. Şimdi bu bir kazan-kazan.

Size bazı müşterilerimi kodlamak için bu yaklaşımı nasıl kullandığımı göstereyim, aksi takdirde zorlu düzenler.

Shape-outside özelliği hakkında
“Şekil dışı” özelliği kayan bir öğeye uygulanabilir. İçeriğin kayan öğenin etrafına nasıl sarılacağını denetler. Metnin yeniden akıtılmasını istediğiniz şekli tanımlamak için değerleri “dış şekil” özelliğine aktarabilirsiniz. Tipik değerler daire, elips veya çokgen olabilir.

Örnek 1 | Dairesel Bir Görüntünün Çevresinde Kullanılan Yazı

 

CSS Örnekleri

CSS Örnekleri

 

İşte bu düzeni kodlamak için kullandığım HTML / CSS.

 

Örnek 2 | Elips Etrafında Kullanılmış

İşte bu düzeni kodlamak için kullandığım HTML / CSS.

NOT: Elips (cx cy’de rx ry) olarak tanımlanır, burada rx ve ry, X ekseni ve Y eksenindeki elipsin yarıçaplarıdır, cx ve cy ise elipsin merkezi için koordinatlardır.

 

Örnek: İşte bu düzeni kodlamak için kullandığım HTML / CSS.

HTML kodları:

 

 

 

Kaynak: femkreations.com/how-to-wrap-text-around-custom-shapes-using-css/

 

Yorum bırak