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

Bu blogdaki Makaleler

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
Layout

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

CSS'de box-sizing özelliği, bir öğenin boyutlandırılma şeklini kontrol eder. Bu özellik, bir öğenin genişlik ve yükseklik değerlerinin, sınırlayıcı çerçeve (border) ve dolgu (padding) boyutlarını içerip içermeyeceğini belirler. box-sizing özelliği ile, geliştiriciler daha tutarlı ve tahmin edilebilir bir şekilde öğe boyutlandırması yapabilirler. box-sizing özelliğinin alabileceği iki ana değer vardır: content-box: Bu varsayılan CSS kutu modelidir. Öğenin genişlik ve yükseklik değerleri
Doğuhan ELMA

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

0
Layout

CSS'de clear özelliği ve TailwindCSS Karşılığı

CSS'de clear özelliği, bir öğenin kendisinden önce gelen yüzdürülmüş (floated) öğelerin etkisinden nasıl etkileneceğini belirler. Bir öğeye clear özelliği uygulandığında, bu öğe yüzdürülmüş öğelerin yanında değil, altında yer alacak şekilde konumlandırılır. Bu özellik, yüzdürme kullanıldıktan sonra oluşabilecek düzensizlikleri düzeltmek için sıklıkla kullanılır. clear özelliği aşağıdaki değerleri alabilir: none: Öğe yüzdürülmüş öğelerin etkisinden etkilenmez. Bu varsayılan değerdir.
Doğuhan ELMA

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

0
Layout

CSS'te "float" Layout ve TailwindCSS Sınıf Karşılığı

CSS'te "float" düzeni, bir öğenin sayfadaki normal akıştan çıkarılmasını ve sayfa içeriğinde sağa veya sola yaslanmasını sağlar. Bu, metin veya diğer öğelerin yüzen öğenin etrafında akmasını sağlar. "Float" özelliği, web sayfalarında düzen oluşturmak, görselleri metinle hizalamak veya sütun bazlı tasarımlar oluşturmak için sıkça kullanılır. CSS'de "float" özelliği şu şekilde kullanılabilir: .element { float: left; /* ya da right */ } Bu örnekte, .element sınıfına sahip bir HTML öğes
Doğuhan ELMA

Doğuhan ELMA tarafından Layout 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
Layout

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

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

0
Display

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

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

0
Sizing

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

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

0
Spacing

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

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

0
Background

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

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

0
Interactivity

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

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

0
Typography

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

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

0
Border

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

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

0
Typography

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

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

0
Typography

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

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

0
Icon

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 tarafından Icon kategorisinde yayınlandı

0
Typography

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

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

0
Typography

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

Doğuhan ELMA tarafından Typography 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
Typography

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

Doğuhan ELMA tarafından Typography 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
Typography

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

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

0
Typography

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

Doğuhan ELMA tarafından Typography 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
×
×
  • Create New...