Simple CSS Trik - Embossing Text CSS

Membuat efek text umumnya dilakukan pada object text gambar, baik itu menggunakan program image editor Adobe Photoshop, Adobe Illustrator maupun menggunakan software image editor lainnya. Namun pada posting kali ini saya akan mencoba membuat embossing text effect menggunakan simple css trik.

Terdapat dua opsi yang dapat digunakan untuk membuat emboss text effect, pertama efek teks timbul dan kedua efek teks tenggelam.

Pertama membuat text effect tenggelam. Ilustrasi; background text berwarna abu-abu (silver/#666), warna text hitam. Pertama buat dahulu class selector css seperti ilustrasi di bawah ini:

p.tenggelam {
 color: #000;
 text-shadow: 0px 1px 0px #999;
 font-weight:bold;
}

Untuk membuat effect text tenggelam dengan asumsi background latar berwarna abu-abu (#666), maka text yang digunakan harus lebih gelap dari warna background latar. Text Shadow (text-shadow: 0px 1px 0px #999;) harus lebih terang dari warna text dan warna background latar.

Sedikit teori:.

0px yang pertama, merupakan koordinat X (atau bisa dibilang posisi vertikal / posisi ke kanan atau ke kiri). Jika nilainya 0 maka sama artinya dengan tidak ada perpindahan posisi. Jika nilainya "+" (positif) maka posisi akan bergeser ke arah kanan, jika "-" posisi bergeser ke arah sebaliknya (bergeser ke kiri).

1px yang kedua, merupakan koordinat Y (posisi horizontal / posisi ke atas atau ke bawah). Jika nilainya positif, posisi akan bergeser ke bawah, jika negatif posisi berada pada wilayah sebaliknya.

0px yang ketiga, merupakan radius blur dari text efek yang akan dihasilkan. Nilai "0" sama artinya dengan tidak efek blur sama sekali. Semakin besar nilainya, maka akan semakin buram efek blurnya.

Penerapan pada dokumen html, seperti ilustrasi di bawah:

<div style="background-color:#666; padding:5px;">
 <p class="tenggelam">
  Ini adalah text berwarna hitam, background berwarna abu-abu dengan ditambahkan effect text bayangan berwarna abu-abu cerah
 </p>
</div>

Hasilnya akan tampak seperti contoh di bawah ini:

Ini adalah text berwarna hitam, background berwarna abu-abu dengan ditambahkan effect text bayangan berwarna abu-abu cerah

Kedua text effect timbul. Warna background latar sama, warna text biru (#09F), properti text-shadow css yang diterapkan sama seperti di atas namun warna bayangan menggunakan warna yang lebih gelap dari warna background latar maupun warna text yang digunakan (hitam / #000). Maka class selector CSS yang digunakan adalah seperti ilustrasi di bawah ini:

p.timbul {
 color:#09F;
 text-shadow: 0px 1px 0px #000;
 font-weight:bold;
}

Penerapan pada dokumen html, seperti ilustrasi di bawah:

<div style="background-color:#666; padding:5px;">
 <p class="timbul">
  Ini adalah text berwarna biru, background berwarna abu-abu dengan ditambahkan effect text bayangan berwarna hitam.
 </p>
</div>

Maka hasilnya akan tampak seperti di bawah ini:

Ini adalah text berwarna biru, background berwarna abu-abu dengan ditambahkan effect text bayangan berwarna hitam.

Nah.. Bisa kan. Silahkan bereksperimen dengan warna dan property text-shadow css menurut selera kamu masing-masing.

Selengkapnya

Rollover Image CSS - Hemat Space & Bandwidth

Umumnya rollover image (gambar rollover) CSS biasa menggunakan 2 gambar terpisah atau 2 gambar pada satu file image.

Jika menggunakan dua gambar terpisah, contohnya seperti berikut. Pertama harus ada dua gambar yang akan dijadikan objek rollover image (contoh: logo Facebook). Terdapat 2 gambar, pada gambar di bawah masing-masing gambar normal dan rollover / hover mouse.

Gambar Normal



Gambar Hover



CSS yang dipakai adalah seperti di bawah ini:

[css]
.fbDua {
width:125px;
height:125px;
margin:20px auto;
}

.fbDua a {
display: block;
width: 125px;
height: 125px;
background: url(http://linggihnote.blogspot.com/images/css/rollover-image-facebook-hover.jpg);
text-decoration: none
text-indent: -9000px;
}

.fbDua a:hover {
background:url(http://linggihnote.blogspot.com/images/css/rollover-image-facebook.jpg)
}

.fbDua a img {
border: none
}
[/css]

Code HTML yang dipakai pada CSS di atas adalah:

[html collapse="false"]
<div class="fbDua">
<a href="#" title="Rollover image hemat space &amp; Bandwidth">Keyword anda tulis di sini.</a>
</div>
[/html]

Maka hasilnya akan seperti ini:

Keyword anda tulis di sini.

Jika menggunakan dua gambar yang terdapat pada satu file image, pertama siapkan dahulu file gambar yang ingin dipakai. Contoh seperti gambar di bawah ini dengan dimensi ukuran lebar 125px dan tinggi 250px.



Kemudian buat properties CSS seperti di bawah

[css]
.fbDuasatu {
width:125px;
height:125px;
margin:20px auto;
}

.fbDuasatu a {
display: block;
width: 125px;
height: 125px;
background: url(http://linggihnote.blogspot.com/images/css/rollover-image-facebook-dua-satu.jpg) left top no-repeat;
text-decoration: none
text-indent: -9000px;
}

.fbDuasatu a:hover {
background-position: left bottom
}

.fbDuasatu a img {
border: none
}
[/css]

Code HTML yang dipakai pada properties CSS di atas:

[html collapse="false"]
<div class="fbDuasatu">
<a href="#" title="Rollover image hemat space &amp; Bandwidth">Keyword anda tulis di sini.</a>
</div>
[/html]

Hasilnya akan tampak seperti di bawah ini:

Keyword anda tulis di sini.

Nah yang terakhir menggunakan trik yang menjadi fokus utama artikel kali ini, adalah hanya dengan menggunakan satu gambar saja untuk membuat rollover image css yang irit space dan bandwidth. Pertama siapkan dahulu satu gambar yang ingin dibuat rollover. Contoh seperti logo facebook yang satu ini:



Kemudian buat properties CSS seperti di bawah ini:

[css]
.fbSave {
width:125px;
height:125px;
margin:20px auto;
}

.fbSave a {
background:url(http://linggihnote.blogspot.com/images/css/rollover-image-facebook.jpg);
margin:0;
opacity: 0.5;
-moz-opacity:0.5;
display: block;
width: 125px;
height: 125px;
overflow: hidden;
float: left;
text-indent: -9000px;
margin-right: 7px;
clear:left
}

.fbSave a:hover {
opacity: 1;
-moz-opacity:1
}
[/css]

Code HTML sama seperti sebelumnya, namun sesuaikan dengan properties Class CSSnya

[html collapse="false"]
<div class="fbSave">
<a href="#" title="Rollover image hemat space &amp; Bandwidth">Keyword anda tulis di sini.</a>
</div>
[/html]

Hasilnya akan tampak seperti di bawah ini

Keyword anda tulis di sini.

Pada properties CSS di atas, untuk mengatur tingkat kecerahan gambar, edit "opacity" & "-moz-opacity". Semakin kecil nilainya, maka akan semakin pudar objek gambar.

Untuk "width" & "height" pada properties css, ganti dengan ukuran dimensi sesuai gambar yang anda pakai. Bagian text yang bertuliskan "Keyword anda tulis di sini." isikan dengan keyword (kata kunci) anda, tulisan keyword ini tidak akan muncul ketika dibuka pada halaman browser karena Selector text link disetting tidak munculkan oleh property (text-indent: -9000px;).

Selengkapnya