Cara Membuat Dropcap Teks dengan CSS3
Pernahkah kalian melihat huruf awal di sebuah teks lebih besar dari teks yang lain nya ? biasanya kita dapat melihat teks ini di koran atau di konten laman. Nah teks ini dapat kita sebut dengan dropcap, dropcap sendiri adalah sebuah istilah dimana tulisan atau teks lebih besar ukuran nya daripada teks yang lain nya. Di kasus ini saya akan saya jelaskan bagaimana Cara Membuat Dropcap Teks dengan CSS3. Sesungguhnya membangun dropcap tak mesti dengan menggunakan Cascading Style Sheet (CSS), tapi pun dapat kita bikin di microsoft word atau yang lain nya.Di penyusunan dropcap dengan CSS3 ini kita akan menggunakan selector CSS3 yakni :first-of-type dengan guna selector ini kita dapat kreasikan huruf pertama-tama dalm sebuah kalimat menjadi lebih besar. Dengan adanya dropcap seperti ini karenanya tampilan tulisan akan semakin menarik bagi dilihat. Berikut ini yaitu strategi pada penyusunan dropcap teks dengan CSS3.
Langkah pertama-tama bikin satu file HTML dan bikin struktur HTML seperti berikut.
<body>
<article>
<hr class=border>
<h1>What is Lorem Ipsum?</h1>
<p>
<span class=dropcap>L</span>orem Ipsum is simply dummy text
</p>
<hr class=border>
</article>
</body>
Di sintak diatas silahkan kalian tambahkan beberapa paragraf nya, kemudian setelah itu kita akan desain dan bikin dropcap teks dengan CSS3. Berikut sintak nya.
@import url('https://fonts.googleapis.com/css?family=Pacifico');
* {
margin: 0;
padding: 0;
}
body {
font-size: 16px;
font-family: 'Pacifico', cursive;
}
.border {
background-color: #d35400;
border: none;
height: 2px;
width: 100%;
}
article {
margin: 0 auto;
max-width: 31rem;
min-width: 15rem;
width: 75%;
top: 1.375rem;
position: relative;
}
h1 {
color: #222;
font-size: 2.618rem;
font-weight: 400;
line-height: 0.573rem;
margin-bottom: 1.5rem;
margin-top: 3rem;
}
p {
color: #444;
font-size: 1rem;
line-height: 1.5rem;
text-indent: 2.5rem;
margin-bottom: 30px;
text-align: justify;
}
article p:first-of-type {
margin-top: 3rem;
text-indent: 0;
}
.dropcap {
background-color: #95a5a6;
color: #d35400;
float: left;
font-size: 50px;
margin-right: 5px;
margin-top: .25rem;
padding: 20px 10px;
}Bagi melihat atau ingin memodifikasi dropcap teks nya silahkan kalian dapat menej di bagian sintak CSS3 berikut.
article p:first-of-type {
margin-top: 3rem;
text-indent: 0;
}
.dropcap {
background-color: #95a5a6;
color: #d35400;
float: left;
font-size: 50px;
margin-right: 5px;
margin-top: .25rem;
padding: 20px 10px;
}Di sintak diatas kalian dapat menentukan besar kecilnya dropcap teks sesuai keinginan, setelah segala sintak diatas diketikan silahkan kalian tes dan jalankan di browser masing-masing dan lihat hasilnya.
Bagaimana, lumayan gampang yah ? Bagus demikian artikel dan pembahasan mengenai Cara Membuat Dropcap Teks dengan CSS3. semoga bermanfaat dan selamat mencoba 🙂
Sumber https://kursuswebsite.org
