Cara merubah judul blog menjadi tulisan stroke murni CSS

Ada yang mengatakan itu stroke text, ada pula yang mengatakan sebagai font stroke. Boleh juga dikatakan sebagai huruf model atau gaya stroke.

Perhatikan Judul blog ini walau tidak terlihat garis pinggirnya, itu bukan image atau gambar, itu adalah text biasa atau jenis umum font yang kemudian dibentuk melalui CSS dan menampilkan huruf yang tulisan yang menyerupai logo dalam bentuk tulisan stroke. Demikian juga dengan huruf dan lingkaran berlatar merah itu, murni di bentuk menggunakan CSS, bukan gambar.

Oleh karena ia adalah font maka ia dapat dibaca oleh google bot, tidak seperti sebuah gambar yang memerlukan 'title dan alt-tag' agar di kenali (di identifikasi) oleh mesin pencari dan oleh karena itu judul dalam bentuk tulisan akan tetap menjadikan heading blog terstruktur dengan baik.

Nilai heading (mulai dari H1) akan merosot ketika Kalian mengganti judul blog dalam bentuk tulisan menjadi image. Sekali lagi itu terjadi karena sampai saat ini mesin hanya bisa membaca text namun masih belum bisa membaca dan mengenali gambar. Jika menggunakan gambar, kalian harus menggunakan trik HTML agar heading blog terlihat baik di mata mesin pencari.

Tentu saja kita dapat menandai gambar tersebut dengan tag dan alt, atau menambahkan tag H1 ke dalam HTML di dalam struktur header supaya Judul dalam bentuk gambar dapat di kenali sebagai Judul blog oleh mesin, namun itu akan menambah PR. Artinya bikin sakit kepala bagi kebanyakan orang.

Oleh karena itu saya mencoba membentuk LOGO dari text itu sendiri. Contohnya pada template essential, kita dapat menambahkan pengaturan CSS berikut dan meletakannya di atas tag penutup </head>:

  header{
font-family: &#39;Times&#39;, Calibri;
font-weight: 500;
font-size: 7vw;
line-height: 1;
color: #f0f0f0;
text-align: center;
-webkit-text-stroke: 2px #777;
text-stroke: 2px #fff;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
color: transparent;
}

Kita hanya perlu mengikuti ID yang telah ada, misal:

<b:widget id='Header1' ....

Untuk memastikan perintah atau pengaturan CSS berlaku Kalian bisa menambahkan titik sebelum id CSS header, misalnya:

.header{

atau menambahkan tanda pagar (#) sebelum id CSS header tadi, misalnya

#header{

Tergantung bagaimana ID header telah di tulis atau di tetapkan di dalam template yang kalian pergunakan, atau dengan kata lain tergantung jenis atau tipe template yang sedang kalian pakai. Lakukan eksprimen saja agar ketrampilan css kalian meningkat.

Pada template essential cukup hanya dengan:

header{

Namun saya meletakannya di atas kode </style>.

Apa itu tulisan stroke?

Stroke adalah tulisan dengan efek tulisan yang memliki goresan tepi sehingga meninggalkan ruang kosong di tengahnya. Saya mendapatkan gambar dari Dev Community sebagai berikut:

Stroke bukan jenis font tetapi ia adalah jenis tulisan seperti seni menulis kaligrafi. Lalu di zaman digital kita dengan mudah membuatnya termasuk menggunakan teknik CSS.

Walaupun ia hanyalah salah satu dari sekian banyak kemampuan CSS dalam memodifikasi tampilan text di web, namun dengan cara ini kita dapat membuat alternatif logo tulisan dengan teknik penulisan stroke. 

Kemampuan CSS dalam memanipulasi rangkaian text menjadi logo juga cukup baik. Misalnya melalui pengaturan CSS dan HTML kita dapat membuat:

See the Pen YzNQXXo by Sufyan Yaan (@sufyan-yaan) on CodePen.

Lingkaran bulat tersebut menggunakan sintaks sintaks umum pada CSS seperti:

background

color

border

border-radius

dst.

CSS Semakin power

Jadi apapun namanya, pada intinya kita dapat memanipulasi font agar tampak seperti logo. Dan apapun namanya tidak terbatas hanya pada style font stroke, text stroke, huruf model stroke, yang jelas kemampuan CSS terhadap pembentukan font sangatlah banyak tidak terbatas hanya pada model, warna, border style, background dll. Masih ada animasi, wave, stroke, overflow, flexbox dan berton ton kemampuan lainnya.

Dan kita tahu CSS memiliki kemampuan membuat efek padding, margin, z-index, berikut nilai nilai yang dapat di padukan dengannya. Masih ingin tahu?

Sintaks CSS sangat sederhana dan mudah di fahami namun ia mampu membuat sebuah halaman blog menjadi responsif dengan media queries, atau @media screen. Ia mampu membuat halaman menjadi grid, membuat animasi dan ia dalam beberapa hal berpotensi menggantikan beberapa pekerjaan penting javascript terhadap HTML. 

Sampai saat ini kita mengenal CSS - dan juga javascript sebagai bahasa front-end, dan peranannya yang sangat besar membuatnya begitu penting shingga tampak sejajar dengan bahasa bahasa pemrograman murni lainnya.

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share: