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'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

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

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

CSS'de display özelliği, bir HTML öğesinin belge içinde nasıl görüntüleneceğini belirler. Bu özellik, öğelerin düzenini ve kutu modelinin davranışını kontrol etmek için çok önemlidir. display özelliği sayesinde, bir öğenin blok düzeyinde, satır içi, flex, grid gibi çeşitli gösterim şekilleri arasında geçiş yapılabilir veya öğeyi tamamen gizleyebilirsiniz. Ana display Değerleri block: Öğe blok düzeyinde görüntülenir. Yeni bir satıra başlar ve kullanılabilir maksimum genişliği kaplar. di

CSS Height, Width ve TailwindCSS Sınıf Karşılığı

CSS'de height ve width özellikleri, bir öğenin yüksekliğini ve genişliğini belirlemek için kullanılır. Bu özellikler, web sayfasındaki öğelerin boyutunu kontrol etmenize olanak tanır ve öğelerin nasıl görüneceği üzerinde doğrudan bir etkiye sahiptir. Width (Genişlik) width özelliği, bir öğenin genişliğini belirler. Değer olarak piksel (px), yüzde (%), em, vw (viewport'un genişliğinin bir yüzdesi) gibi birimler kullanılabilir. Örneğin: div { width: 200px; } Bu örnek, div öğeleri

CSS'de padding ve margin - TailwindCSS Sınıf Karşılığı

CSS'de padding ve margin, bir web sayfasının düzenini kontrol eden önemli özelliklerdir. Bu iki özellik, öğeler arasındaki boşlukları ayarlayarak sayfanın görsel yapısını ve okunabilirliğini iyileştirir. Hem padding hem de margin özellikleri, tüm dört kenar için tek bir değer belirleyebileceğiniz gibi, her bir kenar için ayrı ayrı değerler de belirleyebilirsiniz. Padding padding, bir öğenin içeriği ile sınırı (border) arasındaki boşluğu belirtir. Başka bir deyişle, öğenin iç kenar boşl

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

CSS'de background özelliği, bir öğenin arka planını ayarlamak için kullanılır. Bu özellik, renkler, resimler, gradientler (renk geçişleri) ve bu özelliklerin nasıl yerleştirileceği ve ölçekleneceği gibi birden çok alt özelliği tek bir deyimde birleştirmenize olanak tanır. background kısa bir yazım biçimidir ve şu alt özellikleri içerir: background-color: Arka plan rengini belirler. background-image: Bir veya daha fazla arka plan resmini belirtir. background-position: Arka plan res

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

CSS'de cursor özelliği, bir öğe üzerine fare işaretçisi geldiğinde gösterilecek imleç tipini belirlemenize olanak tanır. Bu, kullanıcı arayüzünde gezinirken kullanıcıya ekstra görsel ipuçları sağlayarak, öğelerin etkileşimli olduğunu veya belirli bir işlevi yerine getirdiğini belirtmek için kullanışlıdır. cursor özelliği için çeşitli değerler kullanılabilir, bunlar arasında en yaygın olanları şunlardır: auto: Tarayıcının duruma göre otomatik olarak bir imleç seçmesini sağlar. defa

CSS'de "text-decoration" özelliği ve TailwindCSS Sınıf Karşılığı

CSS'de "text-decoration" özelliği, metnin nasıl görüneceğini belirlemek için kullanılır. Bu özellik, metin üzerinde çizgi çekme, altını çizme, üstünü çizme ve çizgi tarzını değiştirme gibi çeşitli dekorasyonlar uygulamanıza olanak tanır. "text-decoration" özelliği genellikle metin bağlantılarının görünümünü özelleştirmek için kullanılır, ancak herhangi bir metin üzerinde de kullanılabilir. "text-decoration" özelliği aşağıdaki alt özellikleri içerebilir: text-decoration-line: Bu alt öze

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

CSS'te border özelliği, HTML elementlerinin kenar çizgilerini stilize etmek için kullanılır. Bu özellik, kenar çizgilerinin kalınlığını, stilini ve rengini tanımlamanıza olanak tanır. border özelliği kısa bir şekilde tüm kenar çizgileri için ortak değerleri ayarlayabileceğiniz gibi, border-width, border-style, ve border-color özelliklerini ayrı ayrı da belirtebilirsiniz. Ayrıca, border-top, border-right, border-bottom, ve border-left özellikleri ile elementin sadece belirli kenarlarına kenar çiz

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

CSS'te font-weight özelliği, bir metnin kalınlığını veya ağırlığını belirlemek için kullanılır. Bu özellik, metnin daha ince veya daha kalın görünmesini sağlayarak tipografik vurgu ve hiyerarşi oluşturmada önemli bir rol oynar. font-weight özelliği çeşitli değerler alabilir, bunlar arasında sayısal değerler, anahtar kelimeler ve bazı durumlarda göreli değerler bulunur. font-weight Değerleri Sayısal Değerler 400: Normal veya kitap ağırlığı olarak da bilinir ve çoğu tarayıcının vars

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

CSS'te text-align özelliği, bir elementin içindeki inline veya inline-block içeriklerin (örneğin, metin) nasıl hizalanacağını belirlemek için kullanılır. Genellikle paragraflar, div'ler veya başlık elementleri gibi blok seviyesindeki elementlerin metin içeriğini hizalamak için kullanılır. text-align özelliği aşağıdaki değerlerden birini alabilir: left: İçeriği sol tarafa hizalar. Bu varsayılan değerdir. right: İçeriği sağ tarafa hizalar. center: İçeriği ortalar. justify: İçer

RemixIcon

Tasarımcılar ve geliştiriciler için özenle hazırlanmış açık kaynaklı nötr stil sistem simgeleri. Tüm simgeler hem kişisel hem de ticari kullanım için ücretsizdir. npm install remixicon --save   main.js import 'remixicon/fonts/remixicon.css'     Size: <div style="font-size: 24px;"> <i class="ri-admin-line ri-fw"></i> <!-- fixed width --> <i class="ri-admin-line ri-xxs"></i> <!-- 0.5em --> <i class="ri-admin-li

Doğuhan ELMA

Doğuhan ELMA in Icon

CSS'te font-style ve TailwindCSS Sınıf Karşılığı

CSS'te font-style özelliği, metnin font stilini belirlemek için kullanılır. Genellikle italik, normal veya oblik (eğik) metin görünümleri uygulamak için kullanılır. Bu özellik, metin üzerinde vurgu yapmak, alıntıları veya teknik terimleri belirtmek için sıkça kullanılır. font-style Değerleri normal: Metin normal stil ile gösterilir. Bu varsayılan değerdir. italic: Metin italik olarak gösterilir. İtalik stil, fontun italik versiyonunu kullanır. oblique: Metin eğik olarak göste

CSS text-transform ve TailwindCSS Sınıf Karşılığı

CSS'te text-transform özelliği, bir metnin harflerinin nasıl gösterileceğini belirlemek için kullanılır. Bu özellik, metni büyük harfe çevirme, küçük harfe çevirme veya her kelimenin ilk harfini büyük yapma gibi çeşitli dönüşümler uygulamanıza olanak tanır. text-transform özelliği genellikle başlıklar, düğme metinleri veya herhangi bir metin bloğunda tutarlı bir yazım biçimi sağlamak için kullanılır. text-transform Değerleri none: Bu değer, metni olduğu gibi bırakır ve herhangi bir dön

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 Font ve TailwindCSS Sınıf Karşılığı

Web tasarımında font yönetimi, sitenin okunabilirliğini, erişilebilirliğini ve estetik değerini büyük ölçüde etkiler. İyi bir font yönetimi stratejisi, marka kimliğini desteklerken kullanıcı deneyimini de iyileştirmelidir. İşte web tasarımında font yönetimiyle ilgili bazı önemli noktalar: 1. Font Seçimi Marka Uyumu: Fontunuz, markanızın kişiliği ve sektörünüzle uyumlu olmalıdır. Örneğin, bir hukuk firması için geleneksel ve profesyonel bir serif font uygun olabilirken, bir yaratıcı aja

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ç

CSS Font-Size ve TailwindCSS Sınıf Karşılığı

CSS: font-size: TailwindCSS: text- <p class="text-sm ...">The quick brown fox ...</p> <p class="text-base ...">The quick brown fox ...</p> <p class="text-lg ...">The quick brown fox ...</p> <p class="text-xl ...">The quick brown fox ...</p> <p class="text-2xl ...">The quick brown fox ...</p>   Satır yüksekliğini ayarlama: Herhangi bir yazı tipi boyutu yardımcı programına bir satır yüksekliği değiştiricisi ekleyerek yazı

CSS Color Özelliği ve TailwindCSS Sınıf Karşılıkları

Örnek: <p class="text-blue-600">The quick brown fox...</p>   Opaklığı değiştirme: Renk opaklığı değiştiricisini kullanarak bir öğenin metin renginin opaklığını kontrol edin. <p class="text-blue-600/100">The quick brown fox...</p> <p class="text-blue-600/75">The quick brown fox...</p> <p class="text-blue-600/50">The quick brown fox...</p> <p class="text-blue-600/25">The quick brown fox...</p> <p class="text-blue-600/0"&

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...