:first-letter.Khusus untuk metode ke dua, Saya tidak menjamin bahwa hasil final tampilannya akan tampak sama pada semua jenis peramban sama menyerupai apa yang beberapa tutorial sejenis katakan dalam artikelnya.
Cara Pertama: Gunakan Tag <span> untuk Menyeleksi Huruf Pertama
Kita tahu bahwa elemen yang paling umum diterapkan dalam teks ialah <span>, maka langkah pertama untuk menerapkan konsep drop cap ialah dengan mengapitkan aba-aba <span> pada karakter pertama, lalu menamambahkan atribut berupa class dengan nilai yang spesifik. Misalnya class='drop-cap' menyerupai ini:
<span class="drop-cap">L</span>orem ipsum dolor sit amet-amet jabang bayi oek-oek. Consetetur kampuang nan jauh di mato ambo-ambo tempe goreng yummy rasanya. Sed membisu nonumy ummi-ummi eirmod tempor kuch-kuch hota hai. Poligami nehi-nehi aishiteru mereketehe hajimeteiru. Ut labore et dolore et rupiahe et mahal banget et gak punya duit. Ciluk babara hotras bagong. Bang-bang-tut bau jigong. Kolor ijo naik haji gajarimo gazaba-gazaba. Ciluk bagong cus ciluk baaa!!! Et dagingo et sabarapa et ditawara et boleh kaga. Mogo morodoko saligobagos cus brot. Cihong! Cihong! Umeeeyyy!!! Magna aliquyam alhamdulillah. Sed membisu et justo jus tomat bubur ketek duo gelaso piringo sabarapo dolores et rebum udang rebon. Ayam! Ayam! Ayam! Jus! Yes! Hoooo!!! DHUARRR!!!Setelah itu kau buat deklarasi-deklarasi CSSnya menyerupai ini:
span.drop-cap { font-size:300%; font-weight:bold; font-family:Georgia,Serif; float:left; margin-right:10px; padding:2px 5px; border:3px double #777; background:#ECE9D8; }Letakan aba-aba tersebut di atas ]]></b:skin> atau </style>, maka hasilnya akan menjadi menyerupai ini:
Lorem ipsum dolor sit amet-amet jabang bayi oek-oek. Consetetur kampuang nan jauh di mato ambo-ambo tempe goreng yummy rasanya. Sed membisu nonumy ummi-ummi eirmod tempor kuch-kuch hota hai. Poligami nehi-nehi aishiteru mereketehe hajimeteiru. Ut labore et dolore et rupiahe et mahal banget et gak punya duit. Ciluk babara hotras bagong. Bang-bang-tut bau jigong. Kolor ijo naik haji gajarimo gazaba-gazaba. Ciluk bagong cus ciluk baaa!!!
Et dagingo et sabarapa et ditawara et boleh kaga. Mogo morodoko saligobagos cus brot. Cihong! Cihong! Umeeeyyy!!! Magna aliquyam alhamdulillah. Sed membisu et justo jus tomat bubur ketek duo gelaso piringo sabarapo dolores et rebum udang rebon. Ayam! Ayam! Ayam! Jus! Yes! Hoooo!!! DHUARRR!!! (Hasil tampilan penerapan tag <span class="drop-cap">)
Deklarasi-deklarasi font-size:300%, float:left dan margin-right:10px ialah deklarasi-deklarasi yang paling mempunyai tugas penting dalam terbentuknya pengaruh drop cap:
- font-size:300% menyatakan ukuran teks sebesar 300% dari ukuran teks normal. Saya lebih menyarankan memakai satuan persentase untuk mendapat perbandingan ukuran yang proporsional.
- float:left menyatakan bahwa teks akan cenderung mengarah ke samping kiri dengan peraturan bahwa elemen-elemen lain di sekelilingnya akan meliputinya.
- margin-right:10px diterapkan untuk memastikan bahwa kerenggangan sebelah kanan dari drop cap tidak bertabrakan dengan teks yang meliputiya.
Cara ke Dua: Gunakan CSS Pseudo-Element :first-letter
Cara yang ke dua ini jauh lebih praktis, sebab di sini kita memanfaatkan kemampuan CSS Pseudo-Element, sehingga kita tidak perlu lagi menerapkan tag <span> untuk menyeleksi huruf-huruf pertama. Dengan CSS Pseudo-Element, semua karakter pertama sanggup terseleksi secara otomatis.
Untuk menerapkan cara yang ke dua ini, hal yang paling penting kau lakukan terlebih dahulu ialah menemukan elemen induk yang mencakup artikel dalam situsmu. Untuk template blogspot standar, sebuah konten posting biasanya akan diapit oleh tag <div> dengan atribut berupa class='entry-content' atau class='post-body'. Nah, dengan modal kelas tersebut kita buat aba-aba CSS menyerupai ini:
.post-body:first-letter { font-size:300%; font-weight:bold; font-family:Georgia,Serif; float:left; margin-right:10px; padding:2px 5px; border:3px double #777; background:#ECE9D8; }Kode di atas pada akibatnya nanti akan memperlihatkan hasil tampilan yang hampir sama, hanya penerapannya saja yang berbeda. Setiap metode niscaya mempunyai laba dan kerugiannya masing-masing. Tugasmu ialah mencari tahu.
Lorem ipsum dolor sit amet-amet jabang bayi oek-oek. Consetetur kampuang nan jauh di mato ambo-ambo tempe goreng yummy rasanya. Sed membisu nonumy ummi-ummi eirmod tempor kuch-kuch hota hai. Poligami nehi-nehi aishiteru mereketehe hajimeteiru. Ut labore et dolore et rupiahe et mahal banget et gak punya duit. Ciluk babara hotras bagong. Bang-bang-tut bau jigong. Kolor ijo naik haji gajarimo gazaba-gazaba. Ciluk bagong cus ciluk baaa!!!
Et dagingo et sabarapa et ditawara et boleh kaga. Mogo morodoko saligobagos cus brot. Cihong! Cihong! Umeeeyyy!!! Magna aliquyam alhamdulillah. Sed membisu et justo jus tomat bubur ketek duo gelaso piringo sabarapo dolores et rebum udang rebon. Ayam! Ayam! Ayam! Jus! Yes! Hoooo!!! DHUARRR!!! (Hasil tampilan penerapan CSS Pseudo-Element)