İçeriğe atla
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

  • makale
    57
  • yorum
    0
  • görüntüleme
    1.945

Bu blogdaki Makaleler

CSS z-index özelliği ve TailwindCSS Sınıf Karşılığı

z-index CSS özelliği, bir öğenin yatay düzlemdeki derinlik konumunu (z ekseni üzerinde) belirler. Bu özellik, sayfada üst üste binen öğelerin hangisinin diğerlerinin üstünde görüneceğini kontrol etmek için kullanılır. z-index yalnızca pozisyon değeri (position: relative, position: absolute, position: fixed veya position: sticky) verilmiş öğeler için geçerlidir. Kullanılabilir Değerler: Sayısal değerler: Pozitif veya negatif tam sayılar (1, 2, -1, -2 vb.) kullanılabilir. Büyük bir sayı,

Doğuhan ELMA

Doğuhan ELMA tarafından Layout kategorisinde yayınlandı

CSS visibility özelliği ve TailwindCSS Sınıf Karşılığı

visibility CSS özelliği, bir öğenin görünür olup olmadığını belirler. Bu özellik, öğeleri görünmez yaparak yerlerini korumalarını sağlar; yani, bir öğe visibility: hidden; ile gizlendiğinde, sayfa düzeninden çıkarılmaz ve yer kaplamaya devam eder. Bu, display: none; ile karşılaştırıldığında önemli bir farktır, çünkü display: none; kullanıldığında öğe hem görünmez olur hem de düzenden tamamen çıkarılır, böylece arkasındaki öğeler onun yerini doldurabilir. Kullanılabilir Değerler: visibl

Doğuhan ELMA

Doğuhan ELMA tarafından Layout kategorisinde yayınlandı

CSS overflow özelliği ve TailwindCSS Sınıf Karşılığı

overflow CSS özelliği, bir öğenin içeriği sınırlayıcı kutusunu aştığında ne olacağını belirler. Bu özellik, özellikle içerik boyutu önceden bilinmeyen veya dinamik olarak değişebilen durumlar için önemlidir. Öğenin içeriği kutusunun boyutlarından büyükse, overflow özelliği ile bu fazla içeriğin nasıl ele alınacağını yönetebilirsiniz. Kullanılabilir Değerler: visible: Varsayılan değer. İçerik kutunun dışına taşar ve görünür halde kalır. hidden: Fazla içerik gizlenir ve görünmez.

Doğuhan ELMA

Doğuhan ELMA tarafından Layout kategorisinde yayınlandı

object-* CSS özellileri ve TailwindCSS Sınıf Karşılığı

object-fit CSS özelliği, bir <img> veya <video> gibi yerleştirme öğelerinin boyutlandırılmasını ve nasıl gösterileceğini kontrol eder. Bu özellik, öğenin boyutları ile onun içerdiği kutunun (genellikle bir div veya başka bir konteyner) boyutları arasındaki ilişkiyi yönetir. object-fit özelliği, özellikle responsive web tasarımında çok yararlıdır çünkü içeriğin farklı ekran boyutları ve oranlarına uyum sağlamasını sağlar. Kullanılabilir Değerler: fill: Öğenin içindeki kutuyu

Doğuhan ELMA

Doğuhan ELMA tarafından Layout kategorisinde yayınlandı

CSS break-* Özellikleri ve TailwindCSS Sınıf Karşılığı

break-after CSS özelliği, bir öğenin sonrasında sayfa, sütun veya bölüm kırılması nasıl olacağını kontrol eder. Bu özellik, baskı ortamları ve çok sütunlu düzenler için özellikle yararlıdır ve sayfa akışını düzenlemek, belirli bir öğeden sonra yeni bir sayfaya veya sütuna geçiş yapmak istediğinizde kullanılır. Kullanılabilir Değerler: auto: Standart sayfa kırılma davranışı uygulanır. avoid: Öğeden sonra kırılma olmaması tercih edilir. always: Öğeden sonra her zaman bir kırılm

Doğuhan ELMA

Doğuhan ELMA tarafından Layout kategorisinde yayınlandı

CSS'te columns özelliği ve TailwindCSS Sınıf Karşılığı

CSS'te columns özelliği, bir blok öğesinin çoklu sütunlara nasıl bölüneceğini belirtmenizi sağlar. Bu, metin gibi içeriğin gazete tarzında kolayca sütunlara ayrılmasını sağlar, böylece okunabilirliği artırır ve düzeni iyileştirir. columns özelliği iki ana parametre alabilir: sütun sayısı ve sütun genişliği. Bu özellik, CSS3 ile tanıtılmıştır ve modern web tasarımında yaygın olarak kullanılmaktadır. Kullanımı columns özelliği şu şekilde kullanılabilir: .element { columns: 100px 3;

Doğuhan ELMA

Doğuhan ELMA tarafından Layout kategorisinde yayınlandı

CSS aspect-ratio özelliği ve TailwindCSS Sınıf Karşılığı

aspect-ratio CSS özelliği, bir öğenin genişliğinin yüksekliğine olan oranını belirler. Bu özellik, özellikle medya öğeleri (gibi img, video) ve diğer kutu öğeleri için yanıt veren tasarımlar oluştururken kullanışlıdır. aspect-ratio özelliği, öğenin boyutlandırılması gerektiğinde genişlik ve yükseklik arasındaki oranın korunmasını sağlar, böylece öğenin orijinal orantıları bozulmadan esnek bir şekilde yanıt verebilir. aspect-ratio özelliği genişlik / yükseklik formatında belirtilir. Örneğin,

Doğuhan ELMA

Doğuhan ELMA tarafından Layout kategorisinde yayınlandı

CSS box-decoration-break özelliği ve TailwindCSS Sınıf Karşılığı

box-decoration-break CSS özelliği, bir inline öğe (örneğin, bir <span> veya inline <div>) birden fazla satıra veya sütuna bölündüğünde, öğenin dekoratif özelliklerinin (arka plan, kenarlık, marjlar, dolgular) nasıl uygulanacağını kontrol eder. Bu özellik, özellikle çok satırlı inline öğeler veya sütunlara bölünmüş metinlerle çalışırken, dekorasyonun bölümler arasında nasıl davranacağını belirlemenize olanak tanır. Özellik iki ana değer alır: slice: Bu değer, öğenin her bir bölüm

Doğuhan ELMA

Doğuhan ELMA tarafından Layout kategorisinde yayınlandı

CSS'de box-sizing özelliği ve TailwindCSS Sınıf Karşılığı

CSS'de box-sizing özelliği, bir öğenin boyutlandırılma şeklini kontrol eder. Bu özellik, bir öğenin genişlik ve yükseklik değerlerinin, sınırlayıcı çerçeve (border) ve dolgu (padding) boyutlarını içerip içermeyeceğini belirler. box-sizing özelliği ile, geliştiriciler daha tutarlı ve tahmin edilebilir bir şekilde öğe boyutlandırması yapabilirler. box-sizing özelliğinin alabileceği iki ana değer vardır: content-box: Bu varsayılan CSS kutu modelidir. Öğenin genişlik ve yükseklik değerleri

Doğuhan ELMA

Doğuhan ELMA tarafından Layout kategorisinde yayınlandı

CSS'de clear özelliği ve TailwindCSS Karşılığı

CSS'de clear özelliği, bir öğenin kendisinden önce gelen yüzdürülmüş (floated) öğelerin etkisinden nasıl etkileneceğini belirler. Bir öğeye clear özelliği uygulandığında, bu öğe yüzdürülmüş öğelerin yanında değil, altında yer alacak şekilde konumlandırılır. Bu özellik, yüzdürme kullanıldıktan sonra oluşabilecek düzensizlikleri düzeltmek için sıklıkla kullanılır. clear özelliği aşağıdaki değerleri alabilir: none: Öğe yüzdürülmüş öğelerin etkisinden etkilenmez. Bu varsayılan değerdir.

Doğuhan ELMA

Doğuhan ELMA tarafından Layout kategorisinde yayınlandı

CSS'te "float" Layout ve TailwindCSS Sınıf Karşılığı

CSS'te "float" düzeni, bir öğenin sayfadaki normal akıştan çıkarılmasını ve sayfa içeriğinde sağa veya sola yaslanmasını sağlar. Bu, metin veya diğer öğelerin yüzen öğenin etrafında akmasını sağlar. "Float" özelliği, web sayfalarında düzen oluşturmak, görselleri metinle hizalamak veya sütun bazlı tasarımlar oluşturmak için sıkça kullanılır. CSS'de "float" özelliği şu şekilde kullanılabilir: .element { float: left; /* ya da right */ } Bu örnekte, .element sınıfına sahip bir HTML öğes

Doğuhan ELMA

Doğuhan ELMA tarafından Layout kategorisinde yayınlandı

CSS'de position özelliği ve TailwindCSS Sınıf Karşılığı

CSS'de position özelliği, bir öğenin belge içindeki konumlandırma yöntemini belirler. Bu özellik, öğeleri sayfa üzerinde istediğiniz yere yerleştirmek için kullanılır ve statik, göreceli, sabit, mutlak ve yapışkan olmak üzere beş ana değere sahiptir. Her bir değer, öğelerin konumlandırılma şeklini ve birbirleriyle nasıl etkileşime gireceğini değiştirir. Position Değerleri static: Bu, position özelliğinin varsayılan değeridir. Öğeler, normal akış içinde sıralı olarak konumlandırılır. to

Doğuhan ELMA

Doğuhan ELMA tarafından Layout kategorisinde yayınlandı

×
×
  • Create New...