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 |
Sekian penjelasan singkat tentang css trick text efect tutorial, semoga bermanfaat dan selamat belajar.