November 19, 2020
CSS trick text efect tutorial

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 CSSFungsi
font-sizeDigunakan untuk menentukan ukuran font
font-weightDigunakan untuk ketebalan huruf
font-familyDigunakan untuk menentukan jenis font
font-styleDigunakan untuk menentukan style font
text-decorationDigunakan untuk dekorasi text
directionDigunakan untuk mengatur direksi teks
text-shadowDigunanakan untuk menambahkan efek bayangan pada teks
text-transformDigunakan untuk menentukan besar kecilnya huruf (uppercase/lowercase)
letter-spacingDigunakan untuk mengatur space antara huruf
word-spacingDigunakan untuk mengatur space antara kata
line-heightDigunakan untuk menetukkan tinggi baris diantara text
text-alignDigunakan untuk mengatur posisi text pada element secara horizontal
text-indentDigunakan untuk mengatur indent baris pertama
vertical-alignDigunakan untuk mengatur posisi text pada element secara vertical
colorDigunakan untuk mengatur warna pada teks
backgroundDigunakan untuk membuat perintah dasar latar background
background-imageDigunakan untuk menentukan background dengan gambar
backgorund-colorDigunakan untuk menentukan warna latar belakang background
backgournd-repeatDigunakan untuk menentukan perulangan penampilan image pada background
background-positionDigunakan untuk menentukkan posisi dari background
background-attachmentDigunakan untuk menentukan apakah background dapat di scroll bersama dokumen atau tidak
borderProperty ini digunakan untuk membuat bingkai pada element seperti DIV, SPAN dan TABLE
border-widthDigunakan untuk menetukkan ketebalan bingkai
border-styleDigunakan untuk menetukkan bentuk bingkai
border-colorDigunakan untuk menentukkan warna bingkai
contentDigunakan untuk memasukkan isi sebelum ataupun sesudah element
cursorDigunakan untuk menetukkan jenis kursor yang akan digunakan
overflowDigunakan untuk menentukan apakah isi dari element block level dipotong ketika lebih besar dari element induk
table-layoutDigunakan untuk menentukan jenis table yang akan ditampilkan
visibilityDigunakan untuk menetukkan apakah element tersebut dapat terlihat atau tidak
heightDigunakan untuk menentukkan tinggi suatu element
widthDigunakan untuk menentukkan lebar suatu element
marginDigunakan untuk memberikan spasi pada sisi luar sebuah element
paddingDigunakan untuk memberikan spasi pada sisi dalam sebuah element
writing-modeDigunakan untuk mode penulisan baris teks diletakkan secara horizontal atau vertikal
word-breakDigunakan untuk memberikan batasan penggunaan pada area tertentu
word-wrapMemungkinkan 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.