CSS Text-Transform, Makale yazarken yada front-end kodlaması yaparken bazıları kelimelerin tamamı büyük-küçük veya ilk karakterleri büyük olmasına dikkat edebilir bu gibi durumlarda CSS’de basit bir şekilde bu işlemin nasıl yapıldığını makalenin devamında örnekli olarak görebileceksiniz.
İçerik
göster
CSS Text-Transform Nedir, Nasıl Kullanılır?
Text-transform özelliğine none, capitalize, uppercase, lowercase gibi değerler verebiliyoruz şimdi bu değerleri örneğimizde kullanalım ve sonucunu canlı olarak görelim.
HTML
1 2 3 4 5 6 7 8 | <html lang="tr"> <body> <p class="none">bu bir paragraftır(none)</p> <p class="capitalize">bu bir paragraftır(capitalize)</p> <p class="uppercase">bu bir paragraftır(uppercase)</p> <p class="lowercase">bu bir paragraftır(lowercase)</p> </body> </html> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 | .none{ text-transform: none; } .capitalize{ text-transform: capitalize; } .uppercase{ text-transform: uppercase; } .lowercase{ text-transform: lowercase; } |
Sonuç
📚 Diğer CSS Makaleleri
- Doğal CSS değişkenlerini kullanalım!
- CSS Display Kullanımı ve Örnekleri
- CSS3 Görsele Hover Olayı İle Efekt Verme
📚 Kaynaklar
✍ Makalemiz ile ilgili lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.
🔗 Makalemizi sosyal medya kanallarından paylaşarak destek olursanız çok sevinirim.
👋 Bir sonraki makalede görüşmek dileğiyle.
