Jump to content
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

Entries in this blog

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

CSS'de pseudo-sınıflar (pseudo-classes) ve TailwindCSS Sınıf Karşılıkları

CSS'de pseudo-sınıflar (pseudo-classes), bir öğenin belirli bir durumunu stilize etmek için kullanılır. Öğenin yapısı ya da konumu yerine, kullanıcı etkileşimi gibi duruma bağlı değişiklikleri tanımlarlar. Bu, öğelerin farklı durumlarına göre farklı stiller uygulamanızı sağlar, örneğin bir bağlantının üzerine gelindiğinde, odaklandığında veya bir form elemanının kontrol edildiğinde. Yaygın Kullanılan Pseudo-sınıflar :hover: Bir kullanıcı bir öğenin üzerine fare ile geldiğinde uygulanır

TailwindCSS'de app.css den tailwind.config.js Değişken Değeri Aktarımı

Bazen birden fazla *.css dosyasını tek bir tailwindcss konfigrasyon dosyası üzerinden kullanmak isteyebiliriz. Bu durumda *.css dosyasındaki oluşturduğımız değerleri şu şekilde oluştururz.  *.css @tailwind base; @tailwind components; @tailwind utilities; :root { --primary: 236 253 245; --secondary: 209 250 229; }   tailwind.config.js: ... theme: { extend: { colors: { 'primary': 'rgb(var(--primary))', 'secondary': 'rgb(var(--secondary))',

CSS Ölçü Birimleri

1. PX (Piksel) Tanım: Ekranın bir noktasını temsil eder. Kullanım: Genellikle sabit boyutlar için kullanılır. Örneğin, bir butonun genişliği. Sınırlılık: Cihazın çözünürlüğüne bağlı olarak değişmez, bu yüzden responsive (duyarlı) tasarımlarda esneklik sağlamak zordur.   2. EM Tanım: Ebeveyn (parent) elemanının font-boyutuna göre ölçülür. Kullanım: Ebeveyn elemanın boyutuna bağlı olarak ölçeklenmek istenen durumlar için kullanılır. Örneğin, bir iç içe yapıda, iç

Satır Sayısı Sınırı(Line Clamp) - Tailwind

line-clamp sınıfı, Tailwind CSS'de çok satırlı metinleri belirli bir satır sayısında kesebilmenizi sağlar. Bu genellikle metinlerin çok uzun olması durumunda, metni belirli bir satır sayısında kesip "..." gibi bir işaret ile sonlandırmak için kullanılır. Özellikle kartlar, gönderiler veya liste öğeleri gibi yerlerde metinleri belirli bir uzunlukta göstermek istediğinizde kullanışlıdır. <div class="m-20 w-80"> <div class="line-clamp-3"> Lorem ipsum dolor sit amet, conse

Typography - Tailwind

Typography, metinleri düzenleme ve biçimlendirme sanatı ve bilimidir. Yazı tipleri (fontlar), yazı boyutları, satır aralıkları, yazı karakterleri ve metin düzenleri gibi unsurları içerir. Bir metin parçasının tipografik düzeni, okunabilirliği artırmak, estetik bir görünüm sağlamak ve metnin amacına uygun olarak iletişimi güçlendirmek için önemlidir. Tipografi, yazı tipleri ve bunların kullanımıyla ilgili tasarım ilkeleri ve kuralları içerir. Metinlerin görsel olarak düzenlenmesi, okuyucunun

Scrollbar Stil Değiştirme - Tailwind

app.css: @tailwind base; @tailwind components; @tailwind utilities; /* width */ ::-webkit-scrollbar { width: 10px; } /* Track */ ::-webkit-scrollbar-track { background: #f1f1f1; } /* Handle */ ::-webkit-scrollbar-thumb { background: #888; border-radius: 5px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #555; }    

rotate - Tailwind

HTML: <div class="min-h-screen bg-blue-500 p-8"> <div class="relative mx-auto bg-white rounded-xl shadow-xl h-56 w-80"> <div class="bg-amber-100 w-32 h-32 absolute -top-2 -right-2"> <a class=" absolute bg-amber-300 block origin-bottom-right rotate-45 bottom-0 right-0">elmacademy.net</a> </div> </div> </div>   Açıklama: origin-bottom-right:  origin-bottom-right sınıfı, Tailwind CSS'in dönüşüm

Block - Tailwind

HTML: <div class="min-h-screen bg-blue-500 p-8"> <div class="relative mx-auto bg-white rounded-xl shadow-xl h-56 w-80"> <div class="bg-amber-100 w-32 h-32 absolute -top-2 -right-2"> <a class="bg-amber-300 block ">elmacademy.net</a> </div> </div> </div> Açıklama: Yukarıdaki örnekte, block sınıfı, elementin display: block; stilini uygular. Bu, elementin kendisinden sonra bir sonraki içeriğin yeni bir sat

Relative ve Absolute - Tailwind

HTML: <div class="min-h-screen bg-blue-500 p-8"> <div class="relative mx-auto bg-white rounded-xl shadow-xl h-56 w-80"> <div class="absolute bg-amber-300 w-32 h-32 -top-2 -right-2"></div> </div> </div>   Açıklama: Tailwind CSS'de "absolute" ve "relative", CSS'de pozisyon belirleme için kullanılan iki yaygın değerdir. Bu değerler, öğelerin yerini ve yerleşimini belirlemede kullanılır. Tailwind CSS, bu pozisyon değerlerini hızlı b
×
×
  • Create New...