Cara merubah judul blog menjadi tulisan stroke murni CSS

Diposting Oleh: konstributor
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.

salah satu model font model stroke

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:

Baca Juga:

Komentar

  1. wah ini yang di tunggu , boleh comot g nih coding nya min , punten madih newbie .

    BalasHapus
  2. dah lama tak 'bermain' dengan code HTML ni ;-)

    BalasHapus
  3. serasa menggunakan gambar padahal pakai html...ntar bikin ilustrasi pake html juga nih.

    BalasHapus

Posting Komentar

Jika Anda mau menuliskan, menyisipkan atau mem"pastekan" suatu kode HTML, JS dll kedalam kotak komentar terlebih dahulu, silahkan mengkopi seluruh kode tersebut dan mem"parse"kannya kedalam kotak parse online yang banyak tersedia di Google, silahkan kunjungi:

BLOGCROWDS

Pastekan terlebih kode disana dan lalu klik tombol "PARSE" berada dibawah kanan kotak parse tersebut, setelah hasil parse muncul copy seluruh kode tersebut dan pastekan kedalam kotak komentar blogspot dan lalu publish.

Labels

adwords aibo ajax alexa algoritma alternative Am I Responsive amazon ambigu Amerika AMP Andorid Android Android 10 Angular animasi apple ARM Art Of War artikel sabtu asesories autodidact avatar avatar penulis awesome awsome back to top backdoor backlink bahasa bank btn batam beautiful beginning belajar belajar koding berita bing web master biografi blackberryOS blackhat blockquote blog blogcomments blogger bloggerhelp blogging Blogging mobile bloging blogspeed blogspot bluetooth bootstrap border dash breadcrumb browser btn mobile bugs Buku business capital letter cara catatan catatan awal tahun Cek IMEI Cerita cerpen cewek chimpense chipset chrome chrome 76 Cina cinta clickjacking codepen coding compose contact form contempo contempo base contempo blackmagic contempo hibrida contempo hybrid converter coolest copy-paste copyright covid 19 covid_19 cowok CPC credit footer css CTR cuitan curhat cybercrime Dahlan Iskan dark mode dasbor data default Demo desain diblokir dirtylink disway DOM domain domain authority Donald Trump download download template terbaru dropdown earn money edisi minggu edit editblogtema editor HTML ekonomi elektronik Elle Darby embed emoji emporio emporio hybrid english error essential expires header expires headers facebook fakta fanpage fast loading template fastloading template favicon featured posts feed burner firefox fitur fixed fixed sidebar font font awsome footer footer link Footer navigasi forbes Free friendship fuchsia full stacks furure g-suite gadget gagdet galeri gambar gambar bergoncang gambar profile penulis gambar responsive game generasi Alpha Generasi Z geng motor genius gerhana girl gmail Gmetrix gong xi fa cai good news google google chrome Google Domain google drive google font Google honemoon google Plus google search console google webmaster Googlewebmaster gradasi warna grafik gramedia gratis grid style GTmetrix h1 Habibie hack hacker halaman web hamburger menu hanya opini hapus hari bumi harimau heading headings heart secret hewan hoax hobi hotpink HTM5 html huawei hukum human Idulfitri Iklan ikon Imlek in memories indie Indonesia Indonesia darurat corona indosat infinite color infinity war informasi instagram intel inteligensia internal link internasional internet internt interntet interntt intert iOS iPad iPadOS iPhone isu IT italia Jaime Ocabo java JavaScript jimdo jin Ping jingling Jokowi jQuery JSitor kaca pembesar kafe kalimantan kalkulus kamera kanonis kartun keamanan keamanan blogger kebijkan kecepatan blog mobile kehidupan kemanusiaan kesehatan keyakinan keyboard keyword kiata G+ klasik klik kode warna koding komentar komentar blog komputer konsipirasi konten konversi kopi kota kotak navigasi menu blog kotak pencarian kotlin kriminalitas kualitas kucing label laptop lay out lay out version 3 theme layarlipat layout lazyload lifehack lingkungan logitech logo love Macbook Macbook Air machine learning MacOS magnifier maintenance makmur manusia margasatwa masa depan masonry matahari matematika medsos mega menu mengganti tempa menu menu navigasi menu pencarian menulis merombak metafisika Microsoft microsoft edge Minggu minify misteri mitos mobile modal modern modifikasi monetisi morality motivasi motivation moz myths nasehat terbaik navbar navigasi navigasi menu blog ngeblog nibbler notable office Omnibus online online editor operating sistem opini otodidak pagelist pagerank paginator Pandora panduan panduan mobile paradox parameter parasit parse pembatasan pemilu 2019 Pemilu Indonesia 17 April 2019 pemrograman pemula pendidikan pengalaman pengaturan pengusaha Penulis perang dagang Cina vs Amerika perang dunia ketiga perangdagang perceraian perihal perubahan pexel phablet PHP plagiat plagiator PlagScan play store polemik politik ponsel popularitas popularposts portable powered by blogger Powerpoint prediksi premium privasi produk profesi profile programmer programming programming. prosesor pseudo-sains psikologi Python rahasia ramalan ranking faktor rawgit re-desain re-desain tema blogger React Reactions read more recentPosts redesain related posts remaja resolusi responsinator responsive review robot robot.txt sains samsung sanggahan saran temaplate blogger saran template search secrets security sederhana sejarah seken selegram semrush SEO share button sharing buttons I.O sidebar sidenav siginifikan silikon simple simpson singularity sitelink sitemap smartphone snippet soho solusi somadmorroco spesial spoiler star wars sticky sidebar sticky widget Strategi SEO Student study study online style submenu subscriber success sudut cerita SVG SVG icon syimbian tab s2 tabel tablet tabs2 tagging takdir takhyul talenta tataletak Teen teka teki teknik teknologi TELKOMSEL tema tema kesederhanaan template template premium template premium gratis template SOHO template versi ke-2 terkemuka tes popularitas testimoni testmysite text theme Thucydides tip tips toggle tokoh tombol berbagi tombol pengalihan tombol reply komentar tops traffik trafic trafik translator tribun tricks Trik triks troubleshooting Tutorial Tutorial Anissa tutorialKhusus twitter uang UAS unduh unik update urang utan ustazd Abdul Somad vanilla Script video viomagz viral virus corona vlogging vue w3-css w3school W3Shool wabah warna web web story WebAssembly webdesign WEBP website whatsapp widget wifi ID windows Windows Mobile wisata WIX wordpress X-Frame xiomi xml yandex youtube youtuber z-index
Tampilkan selengkapnya

Populer

Cara memperbaiki add numbering dan add bullets yang tidak bisa tampil pada postingan blog

Downoad Notable simple yang pas buat blog curhat

Feed Burner akan di non aktifkan pada bulan Juli 2021

Follow by Email