Cara Membuat Dropcap Teks dengan CSS3

Pernahkah kalian melihat huruf awal pada sebuah teks lebih besar dari teks yang lain nya ? biasanya kita bisa melihat teks ini pada koran atau pada konten website. Nah teks ini bisa kita sebut dengan dropcap, dropcap sendiri merupakan sebuah istilah dimana tulisan atau teks lebih besar ukuran nya daripada teks yang lain nya. Pada kasus ini saya akan saya jelaskan bagaimana Cara Membuat Dropcap Teks dengan CSS3. Sebenarnya membuat dropcap tidak harus dengan menggunakan Cascading Style Sheet (CSS), tapi juga bisa kita buat pada microsoft word atau yang lain nya.Pada pembuatan dropcap dengan CSS3 ini kita akan menggunakan selector CSS3 yakni :first-of-type dengan fungsi selector ini kita bisa kreasikan huruf pertama dalm sebuah kalimat menjadi lebih besar. Dengan adanya dropcap seperti ini maka tampilan tulisan akan semakin menarik untuk dilihat. Berikut ini adalah langkah-langkah dalam pembuatan dropcap teks dengan CSS3.

Langkah pertama buat satu file HTML dan buat 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>

Pada sintak diatas silahkan kalian tambahkan beberapa paragraf nya, kemudian setelah itu kita akan desain dan buat 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;
}

Untuk melihat atau ingin memodifikasi dropcap teks nya silahkan kalian bisa edit pada 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;
}

Pada sintak diatas kalian bisa menentukan besar kecilnya dropcap teks sesuai keinginan, setelah semua sintak diatas diketikan silahkan kalian tes dan jalankan pada browser masing-masing dan lihat hasilnya.

Bagaimana, cukup mudah yah ? Baik sekian artikel dan pembahasan mengenai Cara Membuat Dropcap Teks dengan CSS3. semoga bermanfaat dan selamat mencoba 🙂

DEMO

Kategori