Tambahkan Efek Bayangan Ke Gambar Dengan CSS3 Auto Code Generator

CSS memungkinkan Anda menata laman web dengan mudah, sangat mudah. Anda dapat mendefinisikan lebih dari seratus gaya teks dalam satu halaman (tentu saja halaman Anda akan terlihat seperti tenda sirkus) tetapi ini tentang kemudahan dan fleksibilitas yang datang dengan menggunakan CSS di halaman web.ThemeShock memiliki generator coder CSS yang akan membantu Anda menambahkan efek drop shadow yang berbeda ke gambar Anda dalam beberapa klik sederhana. Anda memilih efek dan menulis kode; efek dapat ditambahkan ke bawah, samping, atas & bawah, kiri bawah, kanan bawah, kanan atas dan kiri bawah atau di sudut diagonal.

Sebelum kamu memulai; periksa dimensi gambar Anda (yang ingin Anda tambahkan efeknya). Pembuat kode memiliki batas atas dan bawah yang telah ditentukan sebelumnya yaitu 130 - 347px untuk lebar dan tinggi gambar. Jika dimensi gambar Anda melebihi ini, Anda selalu dapat mengedit lebar dan tinggi nanti. Kode juga memungkinkan Anda menentukan opacity dan blur dari bayangan. Anda tidak dapat mengunggah gambar Anda di generator kode, gambar default akan digunakan sehingga Anda dapat melihat efeknya.

Dari menu drop-down, pilih efek bayangan yang Anda suka, setiap kali Anda mengubah salah satu pemilih, kode baru dihasilkan jadi pastikan Anda menggunakan yang terbaru. Setelah Anda memilih efek yang Anda suka, atur lebar dan tinggi untuk gambar Anda menggunakan bilah gulir horizontal. Gunakan tombol panah kanan dan kiri ketika Anda ingin sedikit menekan tombol. Atur blur dan opacity dan kode akan dihasilkan. Menambah atau mengurangi salah satu dari parameter ini akan membuat kode baru.

Setelah semuanya diatur, salin kode CSS ke file CSS dan beri nama untuk halaman web Anda (atau tema). Kode HTML yang masuk di halaman web Anda juga dihasilkan (unik untuk setiap efek yang Anda pilih dari menu drop-down), salin dan letakkan kode gambar (img src = "") di tempat yang tertulis ‘kode Anda sini'.

Hal terbaik tentang pembuat kode ini adalah ia berfungsi dan gratis. Itu memang memiliki batasan dimensi untuk gambar, tetapi mereka dapat diedit dari kode. Jika Anda menggunakan gambar transparan (seperti yang di atas), itu akan memberikan latar belakang abu-abu kusam. Anda dapat mengedit warna latar belakang nanti dari kode. (Edit latar belakang garis kode: #ccc). Kode juga memberikan bingkai 5px ke semua gambar, Anda dapat mengedit bingkai juga tetapi menambah dan mengurangi lebar akan menyembunyikan atau mengungkapkan bayangan lebih dari yang diperlukan sehingga sebaiknya dibiarkan sendiri.

Kunjungi ThemeShock CSS Drop Shadow Generator