Cara mudah menambah efek glossy dengan CSS 3

Jika kita terinspirasi dengan tampilan iDevice yang silau. Kini kita dapat menerapkannya di blog kita sendiri.

langsung saja kita mulai membuat efek glossy dengan CSS. Saya akan menggunakan cara yang termudah karena saya sendiri tidak ada latar belakang webdesain.

1. Sekarang kita menuju Gradient Editor

2.

Pilih salah satu template gradien yang anda suka. Jika tidak ada yang sesuai keinginan kita bisa membuat gradien dengan warna pilihan sendiri. 

Kita ambil contoh yang hitam saja. Biar lebih mudah, kita mulai dari awalr saja. Hapus titik-titik yang dibawah sehingga menjadi hitam seperti gambar dibawah ini. Cara menghapusnya klik pada penunjuk lalu klik tombol delete. Penunjuk yang di atas untuk mengatur transparansi sedangkan penunjuk yang dibawah adalah batas untuk warna.

Menambah efek glossy putih.
Kita akan membuat glossy hitam dengan putih.

Klik penunjuk kiri bawah lalu klik Color kemudian pilih warna putih. Buat penunjuk kedua beri warna hitam.

Untuk memperlebar jangkauan glossy kita set nilai Location titik kedua.

Sekarang kita sudah bisa menambah efek glossy yang sederhana. Untuk efek lebih banyak anda bisa menambahkannya lagi.

Sekarang kita sudah mendapatkan kode CSS glossy. Centang IE9 Support agar bisa tampil bagus pada peramban Internet Explorer. 

Kita sudah mendapatkan kode CSS glossy. Sekarang kita tinggal menambahkan class pada kode CSS tersebut. misal .glossy { kode css }. Untuk menerapkannya dengan HTML berikut <div class="glossy"> kode HTML</div>

Tweet