CSS ilk harfi büyük (drop caps) nasıl yapılır?

1

CSS ilk harfi büyük (drop caps) nasıl yapabilirim?

CSS ilk harfi büyük paragraf nasıl oluşturulur?

CSS ilk harfi büyük (drop caps) nasıl yapılır?

resimdeki gibi bir yazım biçimini CSS ile yapabilir mi?

ergin ergin (2515)
5 yıl önce sordu

Toplam 1 Cevap


0

İlk harfi büyük yapma işi aslında dergilerde ve gazetelerde sık uygulanan bir yöntemdir. Genelde dergilerin ve gazete köşe yazılarının başlangıç paragrafının ilk harfi 2 veya daha fazla satır yüksekliğinde oluşturarak farklı ve güzel bir görünüm kazandırmaktadır. Bu durumu CSS ile yapabilmek mümkündür.

Biz bu şekilde görüntüleme işlemini first-letter seçicisi ile elde edebiliriz. Bu seçicinin diğer bir adı ise drop caps-ilk harfi büyük harf seçicisi diye geçmektedir. En büyük avantajı ie6 dahil tüm tarayıcıların bu özelliği desteklemesidir.

first-letter kullanımı
 

p{ 
    font-weight:bold; 
    font-size:18px;
}
p:first-letter
{
    color:#307891;
    font-size:400%;
}
<p>uzmanım.net</p>

 Kodumuzun çıktısı aşağıdaki şekilde olucaktır.

CSS ilk harfi büyük (drop caps)

:first-letter seçicisini tanımlanabilen diğer özellikler listesi;

  • font özellikleri
  • color özellikleri
  • background özellikleri
  • text-decoration
  • text-transform
  • line-height
  • margin özellikleri
  • padding özellikleri
  • border özellikleri
  • float
  • text-shadow
  • clear

bu özellilerin tamamını :first-letter seçisin kullanabiliriz.

 

ergin ergin (2515)
5 yıl önce cevaplandı

üyelik gerektirir

Cevap yazabilmek için üye girişi yapmalısınız.

Eğer uzmanim.net üyesiyseniz giriş yapabilirsiniz: üye girişi yap
uzmanim.net'e üye olmak çok kolaydır: hemen kayıt ol