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

CSS

Doğuhan ELMA tarafından Frontend'de bir blog

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

Bu blogdaki Makaleler

Flexbox - Grid

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

CSS'de place-content özelliği, hem align-content hem de justify-content özelliklerini tek bir kısayolda birleştirir. Bu özellik, Flexbox ve Grid layoutlarında kullanılır ve içerik hizalaması için çapraz eksen (align-content) ve ana eksen (justify-content) boyunca öğelerin nasıl hizalandığını tanımlar. place-content özelliği, özellikle konteynerde birden fazla eksen hattı (satır veya sütun) olduğunda ve içeriğin hem yatay hem de dikey olarak nasıl hizalanacağını hızlı bir şekilde belirlemek isted
Doğuhan ELMA

Doğuhan ELMA tarafından Flexbox - Grid kategorisinde yayınlandı

0
Flexbox - Grid

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

CSS'de align-content özelliği, Flexbox veya Grid konteynerindeki çapraz eksen boyunca (yani, ana eksene dik olan eksen) öğelerin nasıl hizalandığını kontrol eder. Bu özellik, çok satırlı esnek veya grid konteynerlerde özellikle önemlidir ve yalnızca konteynerde birden fazla eksen hattı (satır veya sütun) olduğunda etkilidir. align-content, öğeler arasındaki boşluk dağılımını ve çapraz eksendeki toplu hizalamayı yönetir. align-content için kullanılabilir değerler şunlardır: stretch (var
Doğuhan ELMA

Doğuhan ELMA tarafından Flexbox - Grid kategorisinde yayınlandı

0
Flexbox - Grid

CSS Grid ve TailwindCSS Sınıf Karşılıkları

CSS Grid, web tasarımında iki boyutlu düzenler oluşturmak için kullanılan bir CSS teknolojisidir. Satır ve sütunlar oluşturarak içerikleri ızgara formunda düzenlemenize olanak tanır. display: grid; özelliği ile bir konteyneri Grid konteyneri yapabilir, grid-template-columns ve grid-template-rows ile sütun ve satır boyutlarını tanımlayabilirsiniz. grid-gap ile öğeler arasındaki boşluğu ayarlayabilirsiniz. grid-column ve grid-row özellikleri ile öğelerin yerleşimini kontrol edebilirsiniz. CSS Grid
Doğuhan ELMA

Doğuhan ELMA tarafından Flexbox - Grid kategorisinde yayınlandı

0
Flexbox - Grid

flex-* CSS özellikleri ve TailwindCSS Sınıf Karşılığı

flex-basis CSS özelliği, bir flex öğesinin ana eksen boyunca başlangıç boyutunu belirler. Bu boyut, öğenin içeriği veya başka özelliklerden bağımsız olarak, öğenin alması gereken varsayılan alanı tanımlar. Öğe daha sonra flex-grow ve flex-shrink özelliklerine göre esneyebilir. flex-basis için değer olarak auto, bir uzunluk (örn. px, %, em), veya content kullanılabilir. Bu, flex öğelerin nasıl dağıtılacağı ve yerleştirileceği üzerinde önemli bir etkiye sahiptir.   flex-grow CSS özelliği
Doğuhan ELMA

Doğuhan ELMA tarafından Flexbox - Grid kategorisinde yayınlandı

0
Flexbox - Grid

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

CSS'de gap özelliği, Flexbox veya Grid konteynerlerinde öğeler arasındaki boşluğu ayarlamak için kullanılır. Bu özellik, hem yatay (sütunlar arası) hem de dikey (satırlar arası) boşlukları belirlemek için tek bir değer olarak kullanılabilir. gap özelliği, daha önce grid-gap, grid-row-gap, ve grid-column-gap olarak bilinen özelliklerin yerini almıştır ve Flexbox düzeninde de kullanılabilir hale gelmiştir. Bu sayede, içerik öğeleri arasında tutarlı bir boşluk sağlamak ve düzenin görsel açıdan daha
Doğuhan ELMA

Doğuhan ELMA tarafından Flexbox - Grid kategorisinde yayınlandı

0
Flexbox - Grid

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

CSS'de order özelliği, Flexbox veya Grid konteyneri içindeki öğelerin görsel sıralamasını kontrol eder. Bu özellik, HTML yapısında öğelerin sıralamasını değiştirmeden, CSS ile görsel olarak öğelerin sırasını değiştirmenize olanak tanır. Özellikle duyarlı tasarımlar oluştururken, farklı ekran boyutlarında öğelerin sırasını değiştirmek için bu özellikten faydalanılır. Varsayılan olarak, tüm Flexbox veya Grid öğelerinin order değeri 0dır. order özelliğine pozitif veya negatif tam sayı değerler
Doğuhan ELMA

Doğuhan ELMA tarafından Flexbox - Grid kategorisinde yayınlandı

0
Flexbox - Grid

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

CSS'de align-self özelliği, Flexbox veya Grid konteyneri içindeki bireysel öğelerin, çapraz eksen (cross axis) boyunca nasıl hizalanacağını kontrol eder. Bu özellik, align-items özelliğinin belirlediği varsayılan veya genel çapraz eksen hizalamasını geçersiz kılar ve yalnızca özelliği uygulanan öğe üzerinde etkilidir. align-self özelliği, Flexbox ve Grid düzenlerinde kullanılabilir ve aşağıdaki değerleri alabilir: auto: Öğe, konteynerinin align-items özelliğine göre hizalanır (varsayıl
Doğuhan ELMA

Doğuhan ELMA tarafından Flexbox - Grid kategorisinde yayınlandı

0
Flexbox - Grid

CSS'de justify-content özelliği ve TailwindCSS Karşılığı

CSS'de justify-content özelliği, Flexbox ve Grid konteynerlerinde öğelerin ana eksen (main axis) boyunca nasıl hizalanacağını belirler. Bu özellik, özellikle birden fazla öğenin yatay (satırlar için) veya dikey (sütunlar için) hizalanmasını kontrol etmek istediğinizde kullanılır. Flexbox ve Grid'de justify-content özelliğinin kullanımı, içerdiği öğeler arasındaki boşluğu ve bu öğelerin konteyner içindeki konumunu ayarlamak için idealdir. Bu özellik aşağıdaki değerleri alabilir: flex-st
Doğuhan ELMA

Doğuhan ELMA tarafından Flexbox - Grid kategorisinde yayınlandı

0
Flexbox - Grid

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

CSS'de align-items özelliği, Flexbox ve Grid düzen sistemlerinde, bir konteyner içindeki öğelerin çapraz eksen (varsayılan olarak dikey eksen) boyunca nasıl hizalanacağını belirler. Bu özellik, bir konteynerin çocuk öğelerinin yüksekliği farklı olduğunda özellikle yararlıdır ve öğelerin dikey hizalanmasını kontrol etmek için kullanılır. Flexbox kullanıldığında, align-items özelliği flex konteynerin içindeki öğelerin dikey hizalanmasını kontrol eder. Grid kullanıldığında ise, grid alanlarını
Doğuhan ELMA

Doğuhan ELMA tarafından Flexbox - Grid kategorisinde yayınlandı

0
Flexbox - Grid

Split Background - Tailwind

HTML <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./output.css" rel="stylesheet"> </head> <body> <div class="grid min-h-screen place-items-center bg-cyan-500"> <div class="fixed inset-0 hidden elm-background-split min-[480px]:grid"> <div class="col-span-2 bg-cyan-600"></div> <div class="col-span-2
Doğuhan ELMA

Doğuhan ELMA tarafından Flexbox - Grid kategorisinde yayınlandı

0
×
×
  • Create New...