İç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

Background

box-shadow CSS özelliği

box-shadow CSS özelliği, HTML elementlerine gölge eklemek için kullanılır. Bu özellik sayesinde kullanıcı arayüzlerinde derinlik ve görsel ilgi katmanları oluşturulabilir. box-shadow kullanırken belirtilen dört ana parametre vardır: Yatay konum (horizontal offset): Gölgenin yatay olarak ne kadar uzakta olacağını belirtir. Pozitif değerler gölgeyi sağa, negatif değerler sola taşır. Dikey konum (vertical offset): Gölgenin dikey olarak ne kadar uzakta olacağını belirtir. Pozitif değerler
Doğuhan ELMA

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

0
Effects

CSS filter Özelliği

CSS filter özelliği, HTML elemanlarına görsel efektler uygulamak için kullanılır. Bu özellik, görüntü düzenleme yazılımlarında bulunan bazı temel efektleri doğrudan CSS ile uygulamanıza olanak tanır. filter özelliği, resimler, arka planlar ve hatta metin gibi her türlü HTML elemanı üzerinde kullanılabilir. CSS Filter Fonksiyonları CSS filter özelliği bir dizi fonksiyon içerir: TailwindCSS: Class Properties fi
Doğuhan ELMA

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

0
Animasyon

CSS Transitions

CSS Transitions, HTML elemanlarının bir durumdan diğerine geçerken (örneğin, hover durumu veya bir elemana tıklanınca) görsel değişikliklerin zaman içinde nasıl gerçekleşeceğini belirlemek için kullanılır. Bu özellik, özellikle animasyonlar ve dinamik kullanıcı arayüzleri oluştururken oldukça faydalıdır. CSS Transitions Kullanımı CSS Transitions'ı kullanmak için, geçiş yapılacak CSS özelliği, geçiş süresi, zamanlama fonksiyonu ve geçişin ne zaman başlayacağını belirtmek gerekir. Bu değ
Doğuhan ELMA

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

0
Temel İşlemler

CSS Object Model

CSSOM, yani CSS Object Model, web sayfalarını stilize etmek için kullanılan CSS’in tarayıcı tarafından nasıl anlaşıldığını ve işlendiğini temsil eden bir yapıdır. CSSOM, web geliştirmesinde önemli bir parçası olan DOM (Document Object Model) ile yakından ilişkilidir. DOM, HTML ve XML dokümanlarının içerik yapısını bir ağaç şeklinde modelleyen bir yapıyken, CSSOM ise bu dokümanları stilize etmek için kullanılan CSS kurallarını bir ağaç yapısında modelleyen bir yapıdır. CSSOM'un İşlevleri
Doğuhan ELMA

Doğuhan ELMA tarafından Temel İşlemler kategorisinde yayınlandı

0
Kütüphaneler

Animate.style - CSS ile Animasyonlar

Animate.style, önceden Animate.css olarak bilinen, web projelerinizde kullanıcı arayüzü etkileşimlerini artırmak için kolayca uygulayabileceğiniz çeşitli CSS animasyonları sunan popüler bir kütüphanedir. Slayt, solma, zıplama ve daha fazlası gibi animasyon efektlerini web sayfalarınızdaki elementlere yalnızca birkaç satır kod ile eklemenizi sağlar. Animate.style kullanırken, genellikle animasyon yapmak istediğiniz HTML elementlerine belirli sınıflar eklersiniz. Bu sınıflar animasyonun türün
Doğuhan ELMA

Doğuhan ELMA tarafından Kütüphaneler kategorisinde yayınlandı

0
SVG

CSS fill, stroke , stroke-width Özellikleri ve TailwindCSS Sınıf Karşılığı

CSS'de stroke ve fill özellikleri, SVG (Scalable Vector Graphics) öğelerinin çizgi (stroke) ve dolgu (fill) renklerini belirlemek için kullanılır. Bu özellikler, HTML içinde doğrudan SVG öğeleri üzerinde veya CSS ile SVG öğelerine stil verirken kullanılabilir. Ancak, bu özellikler geleneksel HTML öğeleri üzerinde doğrudan uygulanamaz. SVG Öğesinde stroke ve fill Kullanımı: SVG içerisinde, stroke ve fill özellikleri, SVG'nin <path>, <circle>, <rect> gibi şekil öğelerin
Doğuhan ELMA

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

0
Temel İşlemler

CSS Fonksiyonları

CSS transform fonksiyonları, bir HTML öğesinin şeklini, boyutunu ve konumunu, sayfa yeniden yüklenmeden değiştirmek için kullanılır. Bu fonksiyonlar, öğeleri döndürme, ölçeklendirme, taşıma (translate), eğme (skew) ve matris dönüşümleri yapma gibi işlemleri gerçekleştirebilir. Transform fonksiyonları, kullanıcı arayüzlerine dinamik animasyonlar ve etkileşimler eklemek için oldukça güçlü araçlardır. CSS'de transform fonksiyonlarını kullanmak için transform özelliği kullanılır. İşte bazı yayg
Doğuhan ELMA

Doğuhan ELMA tarafından Temel İşlemler kategorisinde yayınlandı

0
Effects

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

opacity CSS özelliği, bir öğenin (ve onun çocuklarının) şeffaflık seviyesini belirler. Bu özellik, öğenin görünürlüğünü azaltmak için kullanılır, böylece öğe ve onun alt öğeleri daha şeffaf hale gelir. opacity özelliği 0.0 (tamamen şeffaf) ile 1.0 (tamamen opak) arasında bir değer alır. .transparent-box { opacity: 0.5; } Bu örnekte, .transparent-box sınıfına sahip bir öğe %50 şeffaflıkta olacak şekilde ayarlanmıştır. Bu, öğenin arka planın bir kısmını göstermesini sağlar, fakat öğenin ke
Doğuhan ELMA

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

0
Effects

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

box-shadow CSS özelliği, bir öğeye gölge eklemenizi sağlar. Bu özellik, kullanıcı arayüzlerinde derinlik hissi oluşturmak, öğeleri vurgulamak veya basit estetik amaçlar için kullanılabilir. box-shadow özelliği, bir veya birden fazla gölge tanımlayabilir ve her gölge için yatay konum, dikey konum, bulanıklık yarıçapı, yayılma yarıçapı ve renk olmak üzere birkaç farklı değer alabilir. box-shadow: [yatay konum] [dikey konum] [bulanıklık yarıçapı] [yayılma yarıçapı] [renk]; Yatay konum ve dike
Doğuhan ELMA

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

0
Layout

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ı

0
Layout

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ı

0
Layout

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ı

0
Layout

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ı

0
Layout

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ı

0
Layout

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ı

0
Layout

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ı

0
Layout

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ı

0
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
×
×
  • Create New...