Efek Highlight Pada Input Form dengan CSS

Hampir setiap website memiliki element form di dalamnya. Baik itu berupa form login, sign up, order, dan masih banyak lagi contoh pemakaian form pada HTML. Dalam artikel ini kita akan membuat efek highlight pada input form, untuk memperkaya tampilan form itu sendiri. Kabar baiknya, kita tidak perlu menggunakan JavaScript yang rumit. Dengan memakai satu pseudo class pada CSS saja kita bisa mendapatkan efek highlight pada input form.
Sebelumnya kita buat terlebih dahulu form pada HTML:

<form>
    <fieldset>
        <input class="highlight" name="username" type="text" />
        <input class="highlight" name="password" type="password" />
        <input type="submit" value="Login" />
    </fieldset>
</form>

Membuat Emboss Text Effect Menggunakan Simple CSS Trik

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:

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

Cara Membuat Efek Transparan Pada Gambar Blog (CSS Image Opacity)

Efek transparan pada gambar (image transparency/opacity) sering digunakan di Blog/web sebagai efek hover (mouse over) yaitu tampilan transparansi gambar (atau sebaliknya) ketika mouse diarahkan di atas gambar. Transparansi gambar merupakan salah satu efek yang dapat dibuat dengan CSS dan dimodifikasi sedemikian rupa.

Dasar CSS Transparansi Gambar (CSS Image Transparency/Opacity)

Properti CSS yang digunakan sebagai perintah efek transparansi gambar adalah opacity:x. Properti ini digunakan oleh Mozilla Firefox dan beberapa browser lain. Sedang pada IE (Internet Explorer) digunakan properti filter:alpha(opacity=x). X adalah nilai transparansi, pada Mozilla Firefox dan beberapa browser lain, nilai defaultnya adalah 1.0, sedangkan pada IE adalah 100. Untuk memberikan besaran efek transparan, kecilkan nilai x-nya. Pengurangan dengan value yang sama antara browser lain dengan IE adalah 1/10, jadi kurangi 0.1 pada opacity dan kurang 10 pada filter untuk mendapatkan efek transparansi yang sama. Semakin kecil nilai x semakin besar transparansinya.

Membuat menu dropdown bertingkat dengan CSS

Struktur dasar dari menu dropdown yang akan kita buat menggunakan stuktur XHTML misalnya seperti dibawah ini:

<ul id="nav">

    <li><a href="#">Beranda</a></li>

    <li><a href="#">Kontak</a></li>

    <li><a href="#">Arsip</a>

        <ul>

            <li><a href="#">jQuery</a>

                <ul>

                    <li><a href="#">Download</a></li>

                    <li><a href="#">Tutorial</a></li>

                </ul>

            </li>

            <li><a href="#">Bloghack</a></li>

            <li><a href="#">JavaScript</a></li>

        </ul>

    </li>

</ul>

Lihat hasil langkah 1 disini

Cara Membuat Efek Text 3D Dengan CSS

Ada banyak cara untuk mempercantik tampilan font untuk website/blog, ada yang menggunakan gambar dari hasil Photoshop, beberapa diantaranya menggunakan CSS. Dengan CSS pun ada bermacam-macam variasi yang bisa dilakukan untuk memperindah tampilan text, salah satunya adalah menampilkan efek 3D seperti contoh berikut.

SELAMAT DATANG

<h4 style="text-shadow:  1px 0px #ccc, 0px 1px #ccc, 2px 1px #ddd, 1px 2px #bbb, 3px 2px #ddd, 2px 3px #bbb, 4px 3px #ddd, 3px 4px #bbb, 5px 4px #ddd, 4px 5px #bbb, 6px 5px #ddd, 5px 6px #bbb, 7px 6px #ddd, 6px 7px #bbb, 8px 7px #ddd, 7px 8px #bbb, 8px 8px #ddd; font-size: 50px; color: #666; text-align:center; text-height:font-size;">SELAMAT DATANG</h4>