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

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
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
Temel İşlemler

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
Doğuhan ELMA

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

0
Temel İşlemler

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))',
Doğuhan ELMA

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

0
Temel İşlemler

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ç
Doğuhan ELMA

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

0
Temel İşlemler

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
Doğuhan ELMA

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

0
Temel İşlemler

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
Doğuhan ELMA

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

0
Temel İşlemler

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; }    
Doğuhan ELMA

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

0
Temel İşlemler

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
Doğuhan ELMA

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

0
Temel İşlemler

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
Doğuhan ELMA

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

0
Temel İşlemler

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
Doğuhan ELMA

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

0
×
×
  • Create New...