Mempercantik Tampilan Blog dengan CSS Text Gradient

 CSS Tutorial

Mempercantik tampilan blogMempercantik tampilan blog atau website merupakan suatu kewajiban bagi sang pemilik blog tersebut. Untuk sebuah blog atau website tidak cukup hanya dengan isi postingan yang berbobot melainkan tampilan blog atau website yang menarik juga menjadi salah satu penunjang utama untuk menarik pengunjung.

Bagian mendasar yang perlu anda ketahui dalam mempercantik tampilan blog yang menarik adalah dengan memodifikasi bagian text. Baik itu di bagian header, judul, postingan, sidebar, footer, link dan bagian lainnya.

Salah satu cara modifikasi  text yang dapat anda gunakan adalah text gradient menggunakan CSS. Dengan menggunakan CSS anda dapat memodifikasi warna, bayangan, bentuk dan lain-lain, tinggal tergantung bagaimana anda mengkreasikannya. Jenis font yang anda gunakan juga sangat mempengaruhi tampilan, maka pilihlah jenis font yang sesuai. Ok langsung aja, akan saya jelaskan bagaimana memodifikasi text.

Cara mempercantik tampilan blog dengan CSS Text Gradient

Disini akan saya berikan cara dan contoh-contoh tampilan text gradient yang dapat anda gunakan.

Contoh dengan text shadow:

Mempercantik Tampilan BLOG

Contoh dengan Text Gradient:

TEXT GRADIENT

<div style="font-family: arial black; font-size: 63px; background: -webkit-gradient(linear, left top, left bottom, from( #00FF99), to( #000099)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">TULIS TEKS DI SINI</div>

TEXT GRADIENT

<div style="font-family: arial black; font-size: 63px; background: -webkit-gradient(linear, left bottom, right top, from(red), color-stop(15%,orange), color-stop(30%,yellow), color-stop(45%,green), color-stop(60%,blue), color-stop(80%,#DA15CA), to(violet)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">TULIS TEKS DI SINI</div>

Contoh Text Gradient dengan Stroke

TEXT GRADIENT

<div style="font-family: Verdana; font-size: 63px;font-weight:bold; -webkit-text-stroke: 2px grey; font-family: Arial black; font-size: 55px;font-weight:bold; -webkit-text-stroke: 2px grey; background:-webkit-gradient(radial, 185 56, 0, 218 -298, 448, from(#26CEA6), to(#FF0A39)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">TULIS TEKS DI SINI</div>

TEXT GRADIENT

<div style="font-family: Georgia; font-size: 63px;font-weight:bold; -webkit-text-stroke: 2px grey; background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#006e2e), color-stop(53%,#8f0222), color-stop(100%,#f1da36)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">TULIS TEKS DI SINI</div>

Silahkan anda memodifikasi kembali contoh-contoh text gradient diatas sesuai dengan selera anda.  Semoga contoh-contoh text gradient diatas dapat menjadi refrensi bagi anda. Selain itu, untuk mempercantik tampilan blog atau website juga dapat dilakukan dengan menambahkan tombol social media share.

Author: 

Saya adalah pemilik Kaplik.Com, Tujuan saya menulis adalah untuk berbagi pengetahuan maupun pengalaman kepada semua pembaca. Buat yang ingin tanya-tanya bisa langsung Contact ke Google +1, atau bisa melalui facebook. Thanks...

No Responses

Leave a Reply