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 diatas adalah memformat DIV atau SPAN dengan “warna background hitam”.
Perintah CSS selanjutnya adalah membuat bingkai pada DIV atau SPAN yang di format dengan “ketebalan garis bingkai 1px dan menggunakan warna merah”

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.

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

Perhatikan contoh berikut dibawah.

/* 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.

Nama Tag CSS	Fungsi
font-size	Digunakan untuk menentukan ukuran font
font-weight	Digunakan untuk ketebalan huruf
font-family	Digunakan untuk menentukan jenis font
font-style	Digunakan untuk menentukan style font
text-decoration	Digunakan untuk dekorasi text
direction	Digunakan untuk mengatur direksi teks
text-shadow	Digunanakan untuk menambahkan efek bayangan pada teks
text-transform	Digunakan untuk menentukan besar kecilnya huruf (uppercase/lowercase)
letter-spacing	Digunakan untuk mengatur space antara huruf
word-spacing	Digunakan untuk mengatur space antara kata
line-height	Digunakan untuk menetukkan tinggi baris diantara text
text-align	Digunakan untuk mengatur posisi text pada element secara horizontal
text-indent	Digunakan untuk mengatur indent baris pertama
vertical-align	Digunakan untuk mengatur posisi text pada element secara vertical
color	Digunakan untuk mengatur warna pada teks
background	Digunakan untuk membuat perintah dasar latar background
background-image	Digunakan untuk menentukan background dengan gambar
backgorund-color	Digunakan untuk menentukan warna latar belakang background
backgournd-repeat	Digunakan untuk menentukan perulangan penampilan image pada background
background-position	Digunakan untuk menentukkan posisi dari background
background-attachment	Digunakan untuk menentukan apakah background dapat di scroll bersama dokumen atau tidak
border	Property ini digunakan untuk membuat bingkai pada element seperti DIV, SPAN dan TABLE
border-width	Digunakan untuk menetukkan ketebalan bingkai
border-style	Digunakan untuk menetukkan bentuk bingkai
border-color	Digunakan untuk menentukkan warna bingkai
content	Digunakan untuk memasukkan isi sebelum ataupun sesudah element
cursor	Digunakan untuk menetukkan jenis kursor yang akan digunakan
overflow	Digunakan untuk menentukan apakah isi dari element block level dipotong ketika lebih besar dari element induk
table-layout	Digunakan untuk menentukan jenis table yang akan ditampilkan
visibility	Digunakan untuk menetukkan apakah element tersebut dapat terlihat atau tidak
height	Digunakan untuk menentukkan tinggi suatu element
width	Digunakan untuk menentukkan lebar suatu element
margin	Digunakan untuk memberikan spasi pada sisi luar sebuah element
padding	Digunakan untuk memberikan spasi pada sisi dalam sebuah element
writing-mode	Digunakan untuk mode penulisan baris teks diletakkan secara horizontal atau vertikal
word-break	Digunakan untuk memberikan batasan penggunaan pada area tertentu
word-wrap	Memungkinkan kata-kata yang panjang untuk dapat dipecah dan digabungkan ke baris berikutnya