Halo, ketemu lagi dengan Kursus Web Design Grogol, kali ini kami akan berbagi tutorial sederhana mengenai bagaimana Cara Membuat Drop-Caps Dengan CSS3,  buat kalian kalian yang ingin membuat Drop-caps tapi masih bingung cara buatnya, alangkah baik nya untuk menyimak langkah-langkah berikut ini.
Langsung saja, silahkan ketikan atau salin kode HTML berikut ini.
<h1> Drop-Caps Dengan CSS3 </h1> <div> <p>Lorem Ipsum</p> <p>Lorem Ipsum</p> </div>
Untuk paragraf silahkan kalian bisa isikan sesuai keinginan, atau kami kursus web design grogol menyalin dari di lipsum.com
Setelah itu, kita buat dropcap dengan kode CSS3 berikut.
body {
width: 100%;
background-color: #f1c40f;
font-family: source-sans-pro, sans-serif;
}
h1 {
color: #e67e22;
font-size: 80px;
font-weight: 200;
text-align: center;
margin-bottom: 35px;
text-shadow: #d35400 -1px 0, #d35400 0 -1px, #d35400 0 1px, #d35400 -1px -2px;
}
p {
color: #ffffff;
width: 80%;
margin: auto;
margin: 20px auto;
text-align: justify;
}
p:first-child:first-letter {
float: left;
color: #1abc9c;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: Georgia;
text-shadow: #16a085 -1px 0, #16a085 0 -1px, #16a085 0 1px, #16a085 -1px -2px;
}
Kalo sudah semua diketikan, simpan terlebih dahulu, kemudian jalankan dibrowser masing-masing, dan lihat hasilnya. Selesai
Baik sampai disini tutorial mengenai Cara Membuat Drop-Caps Dengan CSS3, cukup simple yah ? semoga bermanfaat dan sampai ketemu ditutorial selanjutnya dari kami kursus web design grogol.