Metin Kaydırma için shape-outside
Yüzen ögelerde shape-outside kullanarak metni özel şekillerin etrafında kaydırın.
Metin Kaydırma için shape-outside, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
CSS Shapes Modülü
CSS Shapes modülü, metnin dikdörtgen olmayan şekillerin etrafında akmasını sağlar. Temel özellik, metnin etrafında akacağı şekli tanımlayan shape-outside özelliğidir.
shape-outside Gereksinimleri
shape-outside yalnızca kayan öğelerde çalışır. Tanımlanan şeklin etrafında bitişik metnin akması için öğe sola veya sağa kaydırılmalıdır.
<div class="circle-float"></div>
<p>Text wraps around the circular float, following the shape-outside boundary instead of the element's rectangular box, creating a natural flow around curved shapes for magazine-style layouts.</p>
shape-outside: circle()
Metin, kayan öğeye göre tanımlanan dairesel bir yolun etrafında akar:
<div class="profile-image"></div>
<p>Paragraph text wraps neatly around the circular profile image thanks to shape-outside matching the visual border-radius.</p>
shape-outside: ellipse()
Metin, elips biçimindeki bir yolun etrafında akar:
<div class="cutout"></div>
<p>Text on the left flows around the elliptical shape on the right, curving inward and outward with the ellipse's boundary.</p>
shape-outside: polygon()
Metin, karmaşık editoryal düzenler oluşturmayı sağlayan çokgen bir yolun etrafında akar:
<div class="diagonal-image"></div>
<p>Text follows the diagonal polygon edge as it wraps down the page.</p>
Görselle shape-outside
Görselin alfa kanalını şekil sınırı olarak kullanmak için bir URL verin. Metin, görselin saydam olmayan alanlarının etrafında akar:
<div class="character"></div>
<p>Text hugs the silhouette defined by the gradient's alpha channel, simulating shape-outside from an image mask.</p>
shape-margin
shape-margin, shape-outside yoluyla tanımlanan yol ile etrafında akan metin arasına boşluk ekler:
<div class="shape-float"></div>
<p>A 16px shape-margin adds breathing room between the circular float and the wrapping text.</p>
shape-image-threshold
shape-outside için bir görsel kullanıldığında, shape-image-threshold şekil sınırını belirleyen alfa saydamlığı eşik değerini (0 ile 1 arasında) ayarlar.
Tasarım Uygulamaları
CSS Şekilleri; dergi tarzı editoryal düzenler, şekilli görsel sarmalamaya sahip öne çıkarılmış alıntılar ve düzensiz metin akışına sahip büyük başlangıç harfi alanları oluşturmanızı sağlar. Bunlar daha önce yalnızca basılı tasarımda veya SVG ile elde edilebilen efektlerdi.
Tarayıcı Desteği
Temel şekillerle (circle, ellipse, polygon, inset) kullanılan shape-outside, tüm modern tarayıcılarda desteklenir. Görsel URL'siyle kullanılan shape-outside daha geniş bir desteğe sahip olsa da farklılık gösterebilir. Her zaman sınayın.
Uygulamalı Örnek: Büyük Başlangıç Harfi
Metnin büyük, dekoratif bir harfin etrafından aktığı üçgen biçimli bir büyük başlangıç harfi alanı:
<div><span class="drop-cap">T</span>his paragraph begins with a large drop cap letter that text wraps around using shape-outside on the enlarged first character, a classic print typography effect brought to CSS.</div>
Kısa Kontrol
shape-outside özelliğinin bir öğede çalışması için ne gereklidir?
Özet
shape-outside, kayan öğelerde tanımlanan dikdörtgen olmayan şekillerin etrafından metin akmasını sağlar. Şekiller daire, elips, çokgen veya görsel alfa kanalları olabilir. Boşluk bırakmak için shape-margin kullanın. Öğeyi tanımlanan şekliyle görsel olarak eşleştirmek için clip-path ile birlikte kullanın.
Sıkça Sorulan Sorular
“Metin Kaydırma için shape-outside” dersi ücretsiz mi?
Evet — “Metin Kaydırma için shape-outside” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“Metin Kaydırma için shape-outside” dersinde ne öğreneceğim?
Yüzen ögelerde shape-outside kullanarak metni özel şekillerin etrafında kaydırın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Metin Kaydırma için shape-outside” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- polygon() ve circle() ile clip-path
- Metin Kaydırma için shape-outside
- clip-path Şekillerini Canlandırma
- CSS Maskeleri ve clip-path Karşılaştırması