Mie's Notes » css

Membuat Text Effect Dengan CSS

Hielmy — Sat, 21 Nov 2009 16:24:04 +0000

Mumpung lagi semangat bikin tutorial nih, sekalian saja sekarang saya lanjutkan tutorial singkat CSS-nya. kali ini kita akan belajar membuat text effect sederhana dengan CSS. text effect yang akan kita coba adalah text shadow, dengan menambahkan properti text-shadow pada selector, maka text yang terpilih akan ditambahkan efek berupa bayang2 di bagian belakangnya.

Simple Shadow Effect

Untuk tutorial pertama kita akan membuat efek bayangan sederhana, anggap saja text yang ingin kita beri bayangan adalah text “Hielmy Zaenun Nafsi” dengan format h1, bayangan yang diinginkan berupa bayangan sebesar 2 pixel ke kanan bawah berwarna abu-abu. caranya cukup menambahkan kode CSS sebagai berikut:

1
2
3

h1 {
text-shadow: 2px 2px grey;
}

Angka 2px pertama merupakan pergeseran bayangan sebanyak 2 pixel ke kanan, jika ingin bergeser ke kiri anda tinggal memasukan angka negatif, misal -2px. sedangkan 2px kedua menunjukan pergeseran 2 pixel kebawah, jika ingin merubah arahnya tinggal tambahkan angka negatif juga. grey sendiri adalah keterangan warna bayangan, warna bayangan bisa ditulis dengan nama warna seperti grey, blue, red, dll. atau dengan kode hex misal #a3a3a3. Intinya format penulisannya seperti ini {text-shadow: (koordinat-X) (koordinat-Y) (radius blur) (warna)}. Ketika dirender di browser maka hasilnya akan seperti berikut:

Hielmy Zaenun Nafsi

Neon Light Effect

Dengan sedikit variasi, shadow effect bisa dikreasikan menjadi efek lain, misal efek lampu neon pada text. contohnya seperti berikut:

Hielmy Zaenun Nafsi

Untuk membuat efek seperti itu, cukup membuat kode CSS sebagai berikut:

1
2
3

h1 {
text-shadow: 0px 0px 7px #FF0000;
}

untuk membuat efek lampu neon, bayangan harus berada sejajar dengan text utama, oleh karena itu kedua angka pertama biarkan dalam posisi 0px, kemudian untuk angka ketiga yaitu 7px merupakan angka tingkat kekaburan bayangan (blur radius). kode #FF0000 adalah kode hex untuk warna merah.

Emboss Effect

Efek ketiga yang akan kita coba adalah efek emboss atau seperti huruf timbul. namun untuk menerapkan efek ini, kita harus bermain dengan 3 unsur yaitu warna huruf, bayangan dan latar belakang. ketiga bagian tersebut harus disesuaikan warnanya agar tercipta efek emboss yang diinginkan. contoh efek emboss pada huruf sebagai berikut:

Hielmy Zaenun Nafsi

Untuk membuat efek seperti diatas, buatlah kode CSS seperti berikut:

body {
background: #ccc;
}
h1 {
color:#ccc;
text-shadow: -1px -1px #fffff, 1px 1px #333;
}

karena harus menyesuaikan dengan warna background juga maka warna pada body ataupun bagian lain yang menjadi tempat text itu berada harus ditentukan pula warnanya, pada contoh ini warna background pada body adalah #ccc, kemudian warna text h1 pun harus disamakan yaitu #ccc, nah sekarang agar efek timbul itu bisa tercipta dibutuhkan dua buah bayangan, oleh karena itu pada properties text-shadow diatas, value untuk shadow dibuat dua buah yang dipisahkan dengan tanda koma, keduanya mengarah ke arah yang berbeda, yang satu di set -1px -1px dengan warna #ffffff (putih), sedangkan yang satu 1px 1px dengan warna #333, dengan kombinasi tersebut maka akan tercipta efek emboss atau text timbul.

Shadow effect ini mulai diimplementasikan pada CSS3, oleh karena itu, efek ini hanya akan bisa ditampilkan dengan baik oleh browser yang mendukung CSS3 secara penuh, apabila anda membukanya dengan browser yang sudah “uzur” kemungkinan besar tampilannya akan berantakan.

Akhir kata, semoga tutorial ini bisa bermanfaat bagi anda, mohon maaf kalau banyak kekurangan, namanya juga masih belajar

Selamat Mencoba…

Tulisan lain yang mungkin berkaitan:

Membuat Rounded Box dengan CSS

Hielmy — Sat, 21 Nov 2009 14:03:51 +0000

Jika anda menggunakan browser Mozilla Firefox, Safari, atau Google Chrome, ketika anda melewatkan kursor pada salahsatu menu navigasi yang ada diatas (home, about, dll) pasti tombol pada menu tersebut akan menampilkan background kotak merah dengan sudut yang agak membulat. kotak warna merah tersebut bukanlah sebuah image, melainkan hasil render dari style yang sudah ditentukan dari stylesheet theme blog ini. untuk membuatnya cukup dengan menuliskan beberapa baris kode pada stylesheet (CSS) dari halaman web.

Saya bukan web designer dan pengetahuan saya tentang HTML+CSS masih sangat minim, tp saya hanya ingin berbagi sedikit tips untuk membuat hover button dengan rounded box (kotak dengan pinggiran membulat). kita asumsikan kita akan membuat sebuah link yang ketika dilewati kursor (hover) akan berubah menjadi bentuk tombol dengan rounded corner. kode HTML untuk linknya misal sebagai berikut:

<a href="http://blog.hielmy.web.id">Mie's Notes</a>

Nah sekarang mari kita buat stylesheet untuk hover button-nya, dalam syntax HTML tag untuk link adalah antara maka kita harus membuat selektor untuk tag ini, kemudian diberi properties untuk jenis huruf dan warna text. secara default, sebuah link akan diberi garis bawah, untuk menghilangkannya bisa ditambahkan properties text-decoration:none;, berikut kode lengkapnya:

a {
color: black;
font-family: georgia;
text-decoration:none;
}

Nah sekarang kita buat stylesheet untuk hover button-nya dengan membuat lagi selektor a:hover. kita asumsikan ketika kursor lewat, tombol tersebut akan berwarna merah dan text akan berubah warna menjadi putih, agar kotak tersebut tidak terlalu mepet ke text, maka perlu diberi jarak misal 5 pixel dengan menambahkan properties padding:5px;. berikut kode CSS-nya:

a:hover {
color:white;
background-color: red;
padding: 5px;
}

Sebenarnya sampai sini anda sudah bisa membuat sebuah hover button untuk link, namun jika anda ingin tampilan yang lebih artistik dengan sudut kotak yang membulat, maka kita bisa tambahkan properties pada selektor a:hover sebagai berikut:

-moz-border-radius: 5px;
-webkit-border-radius: 5px:

Penambahan properties border-radius akan membuat browser merender kotak tersebut menjadi membulat (rounded), angka 5px adalah ukuran bulatan dalam satuan pixel. namun yang perlu diingat, agar rounded box ini bisa dirender dengan benar oleh browser, maka kita harus menuliskan secara spesifik browser engine untuk properties ini yaitu -moz untuk keluarga Mozilla (yang menggunakan engine Gecko), dan -webkit untuk browser yang menggunakan engine WebKit seperti Safari dan Chrome.

Opera sendiri secara native belum mendukung properties border-radius ini, jadi jika kita membukanya dengan Opera kotak tersebut akan tetap bersudut lancip. untuk mengatasinya, kita bisa menggunakan SVG sebagai alternatif background box. SVG adalah gambar vector yang dihasilkan dengan menggunakan kode XML, untuk membuatnya tidak perlu bersusah payah mempelajari bahasa XML, cukup dengan menggunakan Rounded corner SVG Generator yang bisa diakses disini. setelah jadi copy kode yang ada di bagian CSS with SVG output ke selector a:hover pada stylesheet kita, seperti berikut:

a:hover {
color:white;
background-color: red;
padding: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px:
background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IGZpbGw9IiNGRkYiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48cmVjdCBmaWxsPSJyZWQiIHJ4PSI2IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIi8+PC9zdmc+);
}

berikut adalah kode lengkap untuk HTML dan CSS dari contoh diatas:

 

 
<a href="http://blog.hielmy.web.id">Mie's Notes</a>

Nah jika anda ingin tahu seperti apa hasilnya, silakan klik DISINI.

Dengan demikian, hampir semua browser populer bisa membuka desain kita dengan benar, kecuali Internet Explorer 6, saya sudah mencobanya dan properties SVG pun tidak bisa di render dengan baik, makanya saya tidak menyarankan membukanya dengan menggunakan IE 6.

Itulah tutorial singkat dan tidak jelas dari saya, mohon maaf kalau banyak kesalahan, saya masih sangat awam dalam HTML+CSS, saya hanya ingin berbagi, semoga bermanfaat

Tulisan lain yang mungkin berkaitan: