UFUK   UÇAR

Merhaba,

Sizinde dikkatinizi çekmiştir.

Bazı internet sitelerinde  resmi hemen hemen sarmalayan yazılar vardır.

Bu yazıda bu konuya değineceğim.

Konu başlığınndan da anlaşılabileceği gibi shape-outside kodunu kullanacağız.

Hemen başlayalım.

Öncelikle kullanılan ifadelere bakalım.
 

shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

Şimdi de kullanılan fonksiyonlara bir bakalım.
 

shape-outside: circle ( );
shape-outside: ellipse ( );
shape-outside: inset ( );
shape-outside: polygon ( );

Şimdi bunlara teker teker göz atalım.

Benim .html  kodlarım şu şekilde.
 

<div class="box">
    
        <img src="aslan2.png" />

        <p>
            
            Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve web sayfa düzenleyicisi, varsayılan mıgır metinler olarak Lorem Ipsum kullanmaktadır. Ayrıca arama motorlarında 'lorem ipsum' anahtar sözcükleri ile arama yapıldığında henüz tasarım aşamasında olan çok sayıda site listelenir. Yıllar içinde, bazen kazara, bazen bilinçli olarak (örneğin mizah katılarak), çeşitli sürümleri geliştirilmiştir.
            Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve web sayfa düzenleyicisi, varsayılan mıgır metinler olarak Lorem Ipsum kullanmaktadır. Ayrıca arama motorlarında 'lorem ipsum' anahtar sözcükleri ile arama yapıldığında henüz tasarım aşamasında olan çok sayıda site listelenir. Yıllar içinde, bazen kazara, bazen bilinçli olarak (örneğin mizah katılarak), çeşitli sürümleri

        </p>

    </div>

css kodlarım da  şöyle:
 

    .box  img {
 
        border-radius: 50%;    
        float: left;
        margin: 10px 5px ;
        border: 5px solid #ccc;

        }

Görünüm de şu şekilde:

Görüldüğü üzere görsel etrafında varsayılan olarak box modeli gelmiştir.

Peki css dosyamız şöyle olursa:
 

.box  img {
 
        border-radius: 50%;    
        float: left;
        margin: 10px 5px ;
        border: 5px solid #ccc;
       shape-outside: margin-box;

        }

Sayfamız şu şekilde gözükecektir. Bence gayet tatlı oldu.

css dosyamızda şöyle bir değişiklik yapalım.
 

.box  img {
 
        border-radius: 50%;    
        float: left;
        margin: 10px 5px ;
        border: 5px solid #ccc;
       shape-outside: content-box;

        }

Sonuç şöyle olacaktır.

Görüldüğü üzere yazılar, çemberin çizilmeye başladığı alandan itibaren ( border-radius: 50% ) başladı.

css dosyamızı şu şekilde düzenleyelim.
 

.box  img {
 
        border-radius: 50%;    
        float: left;
        margin: 10px 5px ;
        border: 5px solid #ccc;
       shape-outside: border-box;

        }

Görüntümüz şu şekilde olacaktır.

Zaten adından da anlaşılabileceği üzere, görselin border'ını referans alarak bir yerleşim yapıyor..

Ah şu css dosyamız şöyle olsaydı.
 

.box  img {
 
        border-radius: 50%;    
        float: left;
        margin: 10px 5px ;
        border: 5px solid #ccc;
        padding: 20px;
       shape-outside: padding-box;

        }

Çıktımız da şöyle olacaktır.

padding-box, şekilden de anlaşılacağı üzere, görsele padding değeri verildikten sonra, padding değerinin sınırından itibaren bir çember tanımlıyor.

Şimdi de gelelim fonksiyonlara.

css dosyamızı şöyle düzenleyelim.
 

.box  img {
 
        border-radius: 50%;    
        float: left;
        margin: 10px 5px ;
        border: 5px solid #ccc;
       shape-outside: circle();

        }

Çıktımız aşağıdaki gibi gözükecektir.

İstersek, circle () fonksiyonunun içine değer de verebiliriz. Örneğin, circle ( 50% ). Tahmin edebileceğiniz üzere bir daire çiziliyor. Tabi bu daire, görselimizin yüksekliği ve genişliğinin yarısını merkez alacak şekilde çiziliyor.

Çıktı aşağıdaki gibi olacaktır.

50% değeri ile bir üstteki görsel ile hemen hemen aynı çıktıyı elde ettik.
 

css dosyamızı şöyle düzenleyelim. Bir Poligon çizdirelim. Girilen parametreler, X1 Y1, X2 Y2, X3 Y3...
 

.box  img {

        border-radius: 50%;    
        float: left;
        margin: 10px 5px ;
        margin-top: 85px;
        border: 5px solid  #ccc;
       shape-outside: polygon(0px   0px,   0%    100%,    100%    50%);

        }

Çıktımız, benim mükemmel görsel zekamı ortaya koymaktadır.

Siz daha değişik şekiller verebilirsiniz..