CSS trick text efect tutorial

Menggunakan text efect pada website sudah tidak asing lagi bahkan sudah menjadi sebagian dari kebutuhan untuk keindahan visual website tersebut.

Kali ini kita akan mencoba menggunakan berbagai macam trick dasar untuk text efect, namun hanya untuk jenis “INLINE CSS” saja, dan bukan untuk Text Efect Animasi.
Untuk CSS Text Efect Animasi kita akan bahas pada article berikutnya.

Bahasan terkait: Tutorial Dasar CSS

Simak css trick text efect tutorial dasar dan singkat ini beserta contoh penggunaanya berikut dibawah.

1. Perintah dasar jenis huruf, warna dan style.

Di bawah ini adalah dasar dalam menggunakan perintah CSS untuk menampilkan text yang di inginkan dalam website.

Perhatikan contoh dibawah:

/* Jenis huruf */
/* gunakan jenis huruf yang anda inginkan */
font-family: "Times New Roman", Times, serif;

/* Warna huruf menggunakan nama warna */
/* gunakan warna huruf yang anda inginkan */
color: red;

/* warna huruf menggunakan kode warna */
/* gunakan kode warna yang anda inginkan */
color: #000;

/* warna huruf menggunakan RGB kode */
/* gunakan kode warna RGB yang anda inginkan */
color: rgba(0,0,0);

/* style huruf miring */
font-style: italic;

/* style untuk menggaris bawahi huruf */
font-style: underline;

/* style huruf capital semua */
font-style: uppercase;

/* style huruf kecil semua */
font-style: lowercase;

/* style huruf tebal */
font-weight: bold;

/* style jarak antar text */
/* gunakan jarak yang anda butuhkan, dalam satuan px */
letter-spacing: 1px;

/* style shadow (bayangan) text */
text-shadow: 1px 0px 0px #666;

2. Perintah dasar penggunaan Text Efek di dalam DIV atau SPAN.

Menggukan DIV atau SPAN akan membuat text menjadi lebih terstruktur dan selaras, Anda bisa menggunakan trick ini untuk membuat text terlihat lebih menarik.

Menambahkan Background, border dan berbagai macam efect lainya pada DIV atau SPAN.

Perhatikan contoh dan perintah CSS-nya di bawah ini.

/* Menambahkan background pada DIV atau SPAN */
background: #000;

/* Membuat border (bingkai disekitar element) pada DIV atau SPAN */
border: 1px solid red;

Keterangan:

• Perintah di atas adalah memformat DIV atau SPAN dengan “warna background hitam”.
• CSS selanjutnya adalah membuat bingkai pada DIV atau SPAN yang di format dengan “ketebalan garis bingkai 1px dan menggunakan warna merah”

Untuk perintah “border” ini banyak beragam, semisal bingkai menggunakan titik (dotted), bingkai ganda (double), ataupun warna yang berbeda dalam tiap sisinya. Selain itu Anda juga bisa membuat “radius” (garis lengkung) pada border di tiap-tiap sisinya.

Tool terkait untuk membuat box shadow dan border radius: https://my-id.site/cssme

Perhatikan contoh berikut di bawah.

/* Menambahkan background gambar */
background-image: url(https://my-id.site/ryukein/bg6.gif);

/* Mengatur posisi background */
background-position: center;

/* Mengatur warna text */
color: #ff0;

/* Menentukan jenis font yang digunakan */
font-family: courier;

/* Mengatur spasi atau jarak pada sisi kiri text */
padding-left: 2px;

/* Mengatur spasi atau jarak pada sisi kanan text */
padding-right: 2px;

/* Menentukan jenis border yang digunakan */
border-style: double;

/* Menentukan warna pada border */
border-color: #00FF9B;

/* Menentukan jenis cursor yang digunakan dengan gambar tertentu */
cursor: url(https://my-id.site/ryukein/linux28.png) 24 24, pointer;

Sebagai bahan latihan dan contoh CSS lain-nya tentang Text Efect yang bisa Anda Copy dan Edit secara online, silahkan lihat di: https://my-id.site/editor/?r=Wm1kamMzTT0=#cobalt

Beberapa Tag Dasar CSS beserta fungsinya yang perlu Anda ketahui.

Sampai disini dulu pembahasan tentang Free script kali ini, sampai jumpa di free script selanjutnya, dan salam sukses selalu buat Anda semuanya.