e
sv

CSS şamandıra özelliğine derinlemesine bir dalış

avatar

Yazılım Method

  • e 0

    Mutlu

  • e 0

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

CSS float , bir öğeyi kabının sol veya sağ tarafına yerleştiren ve satır içi öğelerin etrafına sarılmasına izin veren bir konumlandırma özelliğidir. Geçmişte float , sayfa düzenleri için kötüye kullanıldığından kötü bir ün kazandı. Bu, bazı geliştiricilerin artık kullanımdan kaldırılıp kaldırılmadığını veya tamamen kaçınılması gerektiğini sorgulamasına neden oldu!

CSS float hala alakalı. Sadece doğru bağlamda kullanmalıyız! Bu makale CSS float'ın tarihini tartışıyor ve yaratıcı metin düzenleri ve çarpıcı tasarım öğeleri elde etmek için modern web tasarımında float kullanılabileceği çeşitli yolları gösteriyor.

İçindekiler

float kısa bir tarihi

float özelliği, web geliştiricilerinin, aşağıda gösterilen düzene benzer şekilde, metin sütununun içine yerleştirilmiş bir görüntüye sahip olmak gibi dergi stili düzenler oluşturmalarına izin vermek için CSS'ye tanıtıldı.

Metin İçinde Resim
Bir metin sütunu içinde bir resim ile float kullanma örneği.

float özelliği, CSS bebekken tanıtıldı. Tam olarak ne zaman olduğunu söylemek zor, ama kesinlikle float 2001'de tarayıcılardaydı! O zamanlar CSS çok sınırlıydı! İnsanlar tam sayfa mizanpajlar yapmak istediklerinde, genellikle float ulaştılar. O zamanlar vahşi batıydı!

CSS Izgara Örneği
Bunun gibi tam sayfa mizanpajlar için Flexbox veya CSS Grid önerilir.

Bazı yönlerden, düzenler için float kullanmak işe yaradı. Bununla birlikte, genellikle gözyaşı izledi, çünkü bu, float amaçlanan amacının ötesinde kullanılması anlamına geliyordu ve bu, web sitesi geliştikçe yönetilmesi zor olan karmaşık kod ve düzen sorunlarına yol açtı.

Günümüzde, sayfa düzenleri için sadece float kullanmayın! Şamandıraları bu şekilde kullanmayı eski bir teknik olarak görmelisiniz. Flexbox ve CSS Grid, karmaşık sayfa düzenleri oluşturmak için çok üstün seçeneklerdir .

float doğru kullanmak

Diğer içeriğin etrafında serbestçe akmasına izin verirken, bir öğeyi içeren bir öğenin yanına çekmek istediğinizde float kullanın. Bunu başarmak için başka CSS yöntemi yok, bu yüzden kullanmaktan korkmayın!

float için geçerli değerler, aşağıdaki listeden tek bir anahtar kelimedir:

  • left : elemanı, içerdiği bloğun sol tarafında konumlandırır
  • right : öğeyi, içerdiği bloğun sağ tarafında konumlandırır
  • none : elemanı yüzdürmez
  • inline-start : elemanı, içerdiği bloğun ilk satır içi tarafında konumlandırır; bu, soldan sağa komut dosyalarının bulunduğu sol taraf ve sağdan sola komut dosyalarının bulunduğu sağ taraftır.
  • inline-end : elemanı, içerdiği bloğun son satır içi tarafında konumlandırır; bu, soldan sağa komut dosyalarının bulunduğu sağ taraf ve sağdan sola komut dosyalarının bulunduğu sol taraftır.

inline-start ve inline-end değerleri nispeten yenidir. Bunlara mantıksal değerler denir. Bunları şimdi kullanmayı tercih etmeliyiz. Tarayıcı desteği iyidir ve bu mantıksal değerler daha kapsayıcı tasarımlar oluşturur.

Mantıksal değerler, tek bir değerle farklı yazma yönlerine sahip diller için doğru düzeni oluşturmamızı sağlar. En sık kullanılan mantıksal değerler left ve right . Aşağıdaki örnekler, bunların farklı kullanım durumlarında nasıl kullanılabileceğini göstermek için daha az kullanılan mantıksal değerleri içerir.

Daha önceki örneği uygulayalım. İkinci paragrafın başına kayan bir görüntüye sahip basit bir article oluşturalım.

 <makale>
      <h1>İngiltere gençleri, 19 Yaş Altı Euro'da bir yolun ödüllerini alıyor</h1>
      <p>
        Lorem ipsum dolor sit amet conectetur adipisicing elit. Envanter,
        voluptatem olay voluptas nobis placeat facilis commodi Laboriosam
        similique id veritatis molestias, dignissimos praesentium, autem tenetur
        consequatur beatae itaque. Ipsa, ur.
      </p>
      <img src="img/players.jpg" alt="futbol oynayan erkeklerin genel fotoğrafı" />
      <p>
        Mollitia delectus expedita nobis, nostrum est porro soluta earum otur
        akkum! Architecto quae quas aliquid voluptatum rem alias voluptate
        quo quidem, delectus adipisci ipsum sunt maxime officia esse magni
        envanter?
      </p>
      <!--daha fazla paragraf -->
</makale>

Sadece aşağıdaki stili img eklememiz gerekiyor:

 resim {
    kayan nokta: satır içi başlangıç;
}

Varsayılan olarak, resim ve metin arasında boşluk yoktur. Muhtemelen resim ve metin arasında net bir ayrım sağlamak için bir kenar boşluğu eklemek isteyeceksiniz. margin-inline-end: 4px; .

Kalemi Gör
`float: inline-start;` makalesi (ingilizce)
rob2 ( @robatronbobby )
CodePen'de .

Tam olarak aynı CSS'yi kullandıysak ancak HTML belgemizde Arapça içerikliyse, sol yerine sağa hizalanacaktır:

Kalemi Gör
`float: inline-start;` makale (arapça)
rob2 ( @robatronbobby )
CodePen'de .

Oldukça basit, değil mi?

float ortak kullanımları gerçekten bu kadar basit olmalıdır. Ancak, farklı senaryolarda karşılaşabileceğiniz float kullanımıyla ilgili bazı tuhaflıklar vardır. Bu özellik hakkındaki anlayışımızı derinleştirerek kafa karıştırıcı sonuçları önleyebiliriz!

Yüzen bir öğeyi görselleştirme

Yüzen öğelerin nasıl davrandığı konusunda net olalım.

Önceki örneğimizi alarak, İngilizce versiyonu. Üzerinde float ayarlanmış öğe (bu durumda img öğesi) belgenin normal yerleşim akışından çıkarılır ve üst kabının (bu durumda article ) sol tarafına yapıştırılır.

Normal düzen akışında kayan öğenin altına gelen herhangi bir içerik artık bunun yerine öğenin etrafına sarılır. Bunu yaparken, yüzen elemanın sağındaki tüm alanı dolduracaktır. Ardından durur ve normal yerleşim akışı devam eder.

Bunu göstermek için örneğimizi değiştirelim. Belge akışını göstermek için etkilenen paragraflara şu şekilde bazı vurgulamalar ekleyeceğiz:

Görüntü Dolgusu
Resme eklenen dolgu ve vurgulanan paragraf metni ile kayan resim demosu.

İşte bu örnek için CodePen .

Bu örnekte, paragrafların tam boyutlarını görebilmeniz için çevresinde ek boşluk oluşturmak için img biraz padding ekledik. background-color:orange; ekleyerek ikinci, üçüncü ve dördüncü paragraflara kadar, içeren article tüm genişliğini kapladıkları daha açıktır. Ancak, paragraf içeriği kayan görüntü tarafından karşı tarafa itilmektedir.

Şamandıraların tuhaflıklarını anlamak

float hakkında olağandışı görünebilecek bir şey, yüzen öğeler içeren bir ebeveynin çökeceğidir. Bununla ne demek istediğimi anlamak için, oldukça yapmacık bir örnek yapalım. İki yüzen öğe içeren bir section oluşturalım.

Burada, iki img , kabın başlangıcına doğru yüzdü:

 <bölüm>
  <img src="img/1.jpg" alt="top için düello yapan futbolcuların genel fotoğrafı">
  <img src="img/2.jpg" alt="pitch genel bakış">
</bölüm>

<stil>
  resim {
    genişlik: 300 piksel;
    kayan nokta: satır içi başlangıç;
    kenar boşluğu-inline-end: 10px;
  }
</style>

section daha fazla bir şey eklemezsek, yüksekliği sıfır olacak!

Şu anda, şuna benziyor:

İki Görüntülü Bölüm Öğesi
İki kayan görüntü içeren bir section öğesi.

section tarayıcının DevTools ile incelerseniz, Düzen sekmesinde gösterilen boyutları onaylayabilirsiniz: 900 piksel genişlik x 0 piksel yükseklik.

Kesit Ölçüleri
DevTools Düzeni sekmesinde gösterilen kesit boyutları.

Ancak, yalnızca kayan öğelere sahip bir ebeveyn oluşturmanız pek olası değildir! Peki, bunu neden bilmeniz gerekiyor?

Pekala, Murphy yasasının , “ters gidebilecek her şey ters gidecektir” yasasının, herkesin isteyeceğinden daha sık doğru olduğu bir dünyada yaşıyoruz! Bir şeyler olabilir ve eğer olursa, düzeninizin neden garip göründüğünü merak ediyor olabilirsiniz!

clear ile CSS kayan öğelerini devre dışı bırakma

CSS clear özelliği, float için tamamlayıcı bir özelliktir. Bazı elemanların yüzen elemanların etkisinden kurtulmasını istediğinizde kullanabilirsiniz. Bir veya her iki tarafta "temizlenecek" bir öğe ayarlayabilirsiniz. Temizlenen öğe, kendisinden önce gelen tüm kayan öğelerin altına taşınacaktır.

clear özelliği, float ile benzer bir değer kümesine sahiptir:

  • none : öğe, geçmişteki kayan öğeleri temizlemek için aşağı taşınmaz
  • left : eleman, geçmişteki sol yüzenleri temizlemek için aşağı taşınır
  • right : geçmişteki sağ yüzenleri temizlemek için öğe aşağı taşınır
  • both : eleman, hem sol hem de sağ yüzer noktaları temizlemek için aşağı doğru hareket ettirilir
  • inline-start : eleman, içerdiği bloğun başlangıç tarafındaki kayan noktaları temizlemek için aşağı taşınır; yani, sol, soldan sağa komut dosyalarında yüzer ve sağ, sağdan sola komut dosyalarında yüzer
  • inline-end : eleman, içerdiği bloğun uç tarafındaki kayan noktaları temizlemek için aşağı doğru hareket ettirilir; yani, soldan sağa komut dosyalarında sağ yüzer ve sağdan sola komut dosyalarında sol yüzer

Örnek olarak, aşağıda bazı kayan görseller içeren bir web sitesi makale sayfası verilmiştir. Makalenin alt kısmına doğru, web sayfasının altbilgisiyle örtüşen kayan bir resim olduğunu fark edeceksiniz.

İkinci Kayan Görüntü Altbilgiyle Üst üste Biniyor
İkinci bir kayan görüntü altbilgiyle örtüşüyor.

Bu özel durumu düzeltmek için clear: inline-end; veya clear: right; footer .

Bunun tamamen olmasını engellemek istiyorsak clear:both; yerine.

 .no-yüzer {
    ikisini de temizle;
}

Bu kodu çalışırken görmek için aşağıdaki CodePen'e bakın. Etkisini görmek için footer no-floats sınıfı değiştirebilirsiniz.

Kalemi Gör
rob2 tarafından "temizle" örneği
( @robatronbobby )
CodePen'de .

Şimdi, bazı ek örneklere bakalım.

clear ile CSS float örneği: Alıntı çekin

Belki de en yaygın örnek bir çekme teklifidir. Bir çekme alıntısı, metinden ilginç bir alıntının alındığı ve büyük bir ek alıntı olarak gösterildiği yerdir. Haber yayınları ve parlak dergiler, makalenin farklı bölümlerde tartıştığı şeye bir tat vermek için bunu yapma eğilimindedir.

Kalemi Gör
rob2 tarafından alıntı çekin ( @robatronbobby )
CodePen'de .

clear ile CSS float örneği: Gömme büyük harf

Bazı kitap ve dergi mizanpajlarında, paragraftaki ilk kelimenin ilk harfine uygulanan benzersiz bir stil bulabilirsiniz. Çevreleyen metinden daha büyük olabilir ve farklı şekilde tasarlanmış olabilir. Bazen bu mektuba büyük harf denilir.

CSS'de, bir öğenin ilk harfine stil vermek için ::first-letter sözde öğesi kullanılabilir. Daha büyük bir başlangıç harfi oluşturursak, onu bloğun başına kaydırmak ve çevresinde sonraki metin satırlarının akmasını isteyebiliriz.

Aşağıda, ilk harfi paragrafın geri kalan metninden çok daha büyük yaptığımız ve bloğun başına kaydırdığımız bir örnek verilmiştir.

Kalemi Gör
İlk harf / rob2 tarafından yazılan büyük harf örneği
( @robatronbobby )
CodePen'de .

Bu tarz bir tasarımın bir düzeni nasıl yükseltebileceğini anlamak için Bartosz Kwiecień'in bu Travel Magazine tasarımındaki büyük harflere bakın :

Gömme Örnek

shape-outside ile yaratıcı olmak

Şimdiye kadar, tüm örneklerimiz dikdörtgen bir şekle sahip yüzer elemanlar içeriyordu. Elemanlar kutu modelini takip eder ve dikdörtgen sınırlayıcı kutulara sahiptir. Ancak tek bir şekille sınırlı değiliz; shape-outside özelliği ile metin akışını etkileyebilecek her türlü harika şekli oluşturabiliriz!

shape-outside değeri olarak bir görüntü sağlayabiliriz. Float şekli, shape-image-threshold tarafından tanımlanan belirtilen görüntünün alfa kanalına göre hesaplanır. Varsayılan değer 0.0'dır (tamamen şeffaf).

Bu nedenle, yalnızca PNG, SVG ve WebP gibi saydamlığı destekleyen görüntü formatlarıyla shape-outside kullanmak gerçekten mantıklıdır. Aksi takdirde, yine de dikdörtgen bir şekil elde edeceğiz!

Örneğin, saydam bir arka plana sahip kırmızı bir yıldız olan tek bir path sahip bir SVG görüntümüz olduğunu varsayalım. Bu görüntü ile shape-outside kullanmak şuna benzer.

Şekil-dış Görüntü ile

 .yıldız {
    genişlik: 250 piksel;
    yüzer: sol;
    şekil-dış: url("https://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg");
    şekil-marj: 6px;
}

Burada float: left; çünkü ne yazık ki Chrome (Linux) float: inline-start; ve shape-outside birlikte.

Ayrıca, şeklin etrafındaki kenar boşluğunu ayarlamamızı sağlayan bir shape-margin özelliği de vardır.

Şu işlevlerle shape-outside özelliğinin değeri olarak bir <basic-shape> sağlayabiliriz: inset() () , circle() , ellipse() , polygon() veya path() . Bunlar, CSS Şekilleri Modülü Düzey 1 spesifikasyonunda tanımlanmıştır. clip-path özelliğini daha önce kullandıysanız, bu işlevleri de kullanmışsınızdır.

Diyelim ki gri bir daire olan bir div oluşturmak istiyoruz ve aşağıdaki resimde olduğu gibi metnin etrafında akmasını istiyoruz. Bunu, float shape-outside: circle() ile birlikte kullanarak oluşturabiliriz.

Şekil-dış Daire

Akan metinle gri daireyi oluşturmak için CSS:

 .daire {
        sınır yarıçapı: %50;
        yükseklik: 200 piksel;
        genişlik: 200 piksel;
        arka plan rengi: gri;
        Sağa çık;
        şekil-dış: daire();
}

circle() için değerleri atlayabilirsiniz. Bizim durumumuzda, <radius> ve <position> parametrelerinin varsayılan değerleri bize istenen sonucu verir. Varsayılan <position> dairenin merkezidir.

İşte kırmızı yıldız ve gri daire örneklerini içeren bir CodePen.

Kalemi Gör
rob2 tarafından şekil-dış örnekler ( @robatronbobby )
CodePen'de .

shape-outside CSS float örneği : Huni metni

shape-outside kullanmanın bir başka ilginç örneği, metni huni haline getirmek için hem solda hem de sağda kayan bir öğeye sahip olmaktır.

Örneğin, metni neredeyse kavrayan iki eliniz olabilir. Bir elin görüntüsünü paragrafın her iki yanına kaydırabilir ve polygon() işleviyle shape-outside outside'ı kullanarak paragrafa üçgen bir şekil verebiliriz.

 <img class="sol" src="el.svg"/>
<img class="right" src="hand.svg"/>
<p>
  Bazen bir web sayfasının metin içeriği
  dikkatinizi sayfadaki bir noktaya yönlendirmek
  sizi belirli bir bağlantıyı takip etmeye yönlendirmek için. Ara sıra
  fark etmiyorsun.
</p>

<stil>
.ayrıldı {
  şekil-dış: çokgen(0 0, %100 %100, 0 %100);
  yüzer: sol;
  yükseklik: 6em;
}

.Sağ {
  şekil-dış: çokgen(100% 0, 100% 100%, 0 100%);
  Sağa çık;
  yükseklik: 6em;
  dönüştürmek: döndürY(180deg);
}

p {
  metin hizalama: merkez;
}
</style>
Her İki Tarafın Dışında Şekil
Her iki tarafta shape-outside olan yüzer bir eleman kullanma.

İşte beraberindeki CodePen:

Kalemi Gör
rob2 ( @robatronbobby ) tarafından şamandıra ve şekil-dışarı ile metin huni
CodePen'de .

CSS şekillerini düzenleme

CSS şekillerini nasıl düzenleyeceğinizi merak ediyorsanız, Firefox DevTools'u kullanmanızı öneririm. shape-outside özelliğine tıklarsanız, yanında mavi bir “ağ” sembolü göreceksiniz ve sayfada şeklin anahattı görüntülenecektir (aşağıda gösterildiği gibi).

Vurgulanan Şeklin Anahatları

Kontrol noktalarını (yoldaki daireler) hareket ettirebilir ve bir grafik düzenleyicideki bir yol gibi düzenleyebilirsiniz. Chrome DevTools bildiğim kadarıyla aynı özelliği sunmuyor!

Daha fazla örnek istiyorsanız, Kristopher Van Sant, örneklerle dolup taşan shape-outside bir CodePen koleksiyonuna sahiptir.

Eksiksiz bir düzende benzersiz bir şeklin nasıl kullanılabileceğini görmek için, yine Bartosz Kwiecień'den bu dergi düzenine göz atın.

Seyahat Dergisi
Bartosz Kwiecień'in Seyahat Dergisi tasarımı.

2022 itibariyle, dünya çapındaki tarayıcıların %95'i shape-outside özelliğini desteklemektedir. Bu nedenle, bir şans vermekten korkmayın!

toparlamak

float , günümüzün ön uç geliştirme arenasında yeterince kullanılmamış gibi görünüyor. Belki de, sayfa mizanpajları için sıklıkla kötüye kullanıldığı ve her şeyin “şamandıra kullanma” ile karıştırıldığı geçmişin bir kurbanıdır. Umarım size, float hala alakalı olduğunu ve ilgi çekici metin düzenleri oluşturmak için kullanılabileceğini göstermişimdir. İnsanların, web'e daha fazla yaratıcılık getirmek için float özelliğini daha sık kullandıklarını görmek isterim.

LogRocket Blog'da ilk olarak CSS <code>float</code> özelliğine derin bir dalış yazısı çıktı.

etiketlerETİKETLER
Üzgünüm, bu içerik için hiç etiket bulunmuyor.

Sıradaki içerik:

CSS şamandıra özelliğine derinlemesine bir dalış