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

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

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


Doğuhan ELMA

50 views

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üşüm uygulamaz.

capitalize: Her kelimenin ilk harfini büyük yapar.

uppercase: Tüm harfleri büyük harfe çevirir.

lowercase: Tüm harfleri küçük harfe çevirir.

 

.text-normal {
  text-transform: none;
}

.text-capitalize {
  text-transform: capitalize;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}
<p class="text-normal">Normal metin. Bu metin dönüşüme uğramaz.</p>
<p class="text-capitalize">capitalize metin. her kelimenin ilk harfi büyük olur.</p>
<p class="text-uppercase">uppercase METİN. TÜM HARFLER BÜYÜK OLUR.</p>
<p class="text-lowercase">LOWERCASE METİN. tüm harfler küçük olur.</p>

 

Tailwind CSS:

 

uppercase text-transform: uppercase;
lowercase text-transform: lowercase;
capitalize text-transform: capitalize;
normal-case

text-transform: none;

 

<p class="normal-case ...">The quick brown fox ...</p>
<p class="uppercase ...">The quick brown fox ...</p>
<p class="lowercase ...">The quick brown fox ...</p>
<p class="capitalize ...">The quick brown fox ...</p>

 

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...