Hai, ketemu lagi dengan kami 🙂 , Kali ini kami kursus web design grogol akan berbagi tutorial mengenai bagaimana Cara Membuat Kutipan Dengan HTML-CSS3, buat kalian yang suka membuat kutipan-kutipan ada baiknya kalian membuat kutipan yang lebih menarik lagi dengan desain CSS sederhana, berikut langkah-langkahnya.
Langsung saja, silahkan kalian buat satu buah paragraf seperti berikut.
|
1 2 3 4 5 |
<body> <blockquote> Lorem Ipsum </blockquote> </body> |
Untuk isi kutipan silahkan kalian isikan sesuai keinginan, diatas saya contoh kan dengan sebuah kalimat atau paragraf, setelah itu, kita percantik kutipan diatas dengan menggunakan CSS3 berikut. yuk ikuti tutotrial dari kursus web design grogol yah.
|
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 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
blockquote{ display:block; background: #fff; padding: 15px 20px 15px 45px; margin: 0 0 20px; position: relative; /*Font*/ font-family: Georgia, serif; font-size: 16px; line-height: 1.2; color: #666; text-align: justify; /*Borders - (Optional)*/ border-left: 15px solid #61D2D6; border-right: 2px solid #61D2D6; /*Box Shadow - (Optional)*/ -moz-box-shadow: 2px 2px 15px #ccc; -webkit-box-shadow: 2px 2px 15px #ccc; box-shadow: 2px 2px 15px #ccc; } blockquote::before{ content: "\201C"; /*Unicode for Left Double Quote*/ /*Font*/ font-family: Georgia, serif; font-size: 60px; font-weight: bold; color: #999; /*Positioning*/ position: absolute; left: 10px; top:5px; } blockquote::after{ /*Reset to make sure*/ content: ""; } blockquote a{ text-decoration: none; background: #eee; cursor: pointer; padding: 0 3px; color: #c76c0c; } blockquote a:hover{ color: #666; } blockquote em{ font-style: italic; } |
Kalo sudah semua, simpan terlebih dahulu, kemudian jalankan dibrowser masing-masing, dan lihat hasilnya.
Cukup mudah bukan ? silahkan kalian bisa modifikasi lagi menjadi lebih bagus lagi, baik sekian tutorial mengenani Cara Membuat Kutipan Dengan HTML-CSS3, semoga bermanfaat, amin.
Selamat mencoba atau mau mendalami web design bisa bergabung bersama kami Dumet School Kursus Web Design Grogol.