Membuat Tombol Sederhana dengan Teknik CSS Sprites

Mungkin banyak yang belum tahu istilah CSS Sprite ini? gampangannya CSS Sprites ini adalah menggabungkan gambar-gambar dijadikan 1 file dan cara ngeloadnya kita tinggal menentukan koordinat area gambar tersebut, Teknik ini banyak dipakai karena bisa mengoptimalkan proses rendering image, mengoptimalkan proses load gambar sehingga akan terasa lebih cepat.

Pada tutorial kali ini saya akan menerangkan bagaimana membuat sebuah tombol yang cantik dan keren sehingga akan kelihatan bagus dilihat pada website kita.

Buka Photoshop Anda dan buatlah file baru dengan ukuran 800×600 saja, kemudian pilih ToolsRounded Rectangel Tools

atur radiusnya menjadi 5px

dan buatlah sebuah kotak seperti ini, ukurannya terserah teman-teman

Pada layer kotak tadi, klik kanan kemudian pilih Blending Options

Pilih Gradient Overlay dan atur warnanya seperti ini

Pilih Stroke dan atur ketebalannya menjadi 1px dan warna #225385

Selanjutnya kita akan kasih efek Inner Shadow, Blend Mode = Normal, warna #ffffff, Opacity 28%, hilangkan centang di Use Global Light, Distance 1px, Choke 0%, Size 0px

Hasilnya akan seperti ini

Selanjutnya kita kasih tulisan Tombol diatas kotak, kasih warna putih dan atur dengan Blending Options, kasih efek Drop Shadow seperti dibawah ini

Baca Juga:  Membuat Golden Ratio Grid System

kita gandakan kotak beserta text tadi dan atur sedemikian rupa seperti ini

pada bagian duplikat kotak, kita atur lagi di Blending Options nya pada bagian Gradient Overlay

Sekarang pada bagian text hasil duplikat kita atur Blending Optionsnya agar memberikan efek tenggelam, Dibagian Inner Shadow atur seperti ini

Selanjutnya pada bagian Stroke atur seperti ini

Langkah terakhir dalam Photoshop kita Crop gambar tadi

Selesai!

Selanjutnya kita akan masuk pada bagian XHTML

<html>
<head>
    <title>Membuat Tombol sederhana dengan teknik CSS Sprite</title>
</head>
<body>
    <div class="box-tombol"><a href="#"></a></div>
</body>
</html>

Kemudian pada bagian CSS nya seperti ini

body {
    text-align: center;
}
.box-tombol {
    width: 402px;
    height: 89px;
    margin: 20px auto;
}
.box-tombol a {
    width: 402px;
    height: 89px;
    display: block;
    background: url(tombol.jpg) top no-repeat;
}
.box-tombol a:hover {

    background: url(tombol.jpg) bottom no-repeat;
}

Ukuran gambar yang saya gunakan adalah width:402px height:178px, maka tinggi gambar tadi dibagi dua menjadi height: 89px. Karena gambar ini hanya terbagi dalam 2 area yaitu atas dan bawah, maka saya hanya menggunakan top dan bottom untuk pengaturan di CSS nya.

Komentar

comments

zulsdesign

Seorang Web Designer, Web Developer, Wordpress Development dan independen Blogger. Spesialisasi Personal Branding. Selalu haus akan ilmu tentang perkembangan dunia Web Design, Social Media, Online Marketing. Kadang-kadang juga berprofesi sebagai konsultan Website dadakan :)

grain storage instagram türk takipçi satın al