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.
|
1 2 3 4 5 6 7 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
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.