Seorang praktisi online baik itu blogger atau developer website sudah tentu harus selalu memperhatikan estetika konten. Salah satu objek penting pada sebuah konten adalah Gambar. Setiap post kalau tidak memiliki gambar rasanya jadi hambar, katanya sih gambar mengungkapkan 1000 kata.
Keindahan sebuah postingan sangat ditentukan oleh gambar, ketertarikan pengunjung pun banyak yang datang dari sini. Sehingga banyak orang yang sebelum mengupload gambar untuk ditampilkan pada situsnya mengedit gambar tersebut terlebih dulu dengan aplikasi editor hasil crack.
Sebenarnya, gambar pada sebuah web dapat di desain langsung menggunakan kode CSS lho. Tentu trik yang bisa dilakukan terbatas, tapi bukan berarti hasilnya kalah keren dengan hasil editan. Belum lagi prosesnya jauh lebih simpel dibanding menggunakan aplikasi yang banyak pilihan.
Ada beberapa manfaat memakai CSS untuk desain gambar ketimbang mengedit pakai software:
- Tidak merusak gambar original atau aslinya, karena tampilannya bersifat semu alias tidak tersimpan.
- Praktis untuk diganti-ganti karena cuma memainkan kode-kode saja, ganti tiap haripun gak ada masalah.
- Sangat mudah diterapkan jika Agan paham trik atau tekniknya, dan bakalan ketagihan.
- Lebih user friendly karena desain CSS memang dikhususkan untuk diaplikasikan pada blog atau web.
Bagi yang bingung apa sih CSS itu, simpelnya CSS (Cascading Style Sheet) merupakan himpunan kode untuk proses desain serta pengaturan struktur dan gaya pada sebuah situs. CSS ini pasti selalu ditemukan ketika Agan membuka web tertentu misalnya blog Syams ini. Kalau seorang blogger tidak paham soal CSS, parah itu.
Kalau begitu hitung-hitung yang belum tahu tengah belajar disini. Karena dari awal Syams ngoceh panjang lebar soal gambar, jadi tutorial CSS yang akan dijabarkan disini adalah implementasi pada gambar. Bermacam-macam trik lengkap siap dibagikan, jadi silahkan simak dengan saksama.
Pertama-tama siapkan terlebih dahulu gambar atau foto yang ingin dijadikan bahan percobaan.
Ada yang kenal doi siapa? Jangan lupa tinggalkan di kolom komentar buat bahan penelitian. Haha..
Dan sebelum memulai triknya, harap pahami dulu cara kerja CSS dan tentunya HTML. HTML dan CSS merupakan pasangan abadi, tidak bisa dipisahkan. Tanpa kode HTML yang berupa tag dan syntax, maka CSS tidak ada gunanya.
Syntax HTML dasar untuk gambar adalah seperti berikut:
<img src="--- URL Gambar ---" />
Jika ingin mengaplikasikan kode CSS pada gambar tersebut maka afdolnya ditambah tag class. Perubahannya simpel:
<img class="desain" src="--- URL Gambar ---" />
Kode HTML dengan syntax img ditambah tag class "desain" diatas sekarang bisa diberikan style keren melalui kode CSS. CSS sendiri baru bisa dihasilkan jika kodenya diapit oleh <style></style>. Jadinya nanti untuk setiap trik yang ingin diterapkan sendiri bentuknya akan seperti ini.
<style>
.desain{
--- Desain CSS ---
}
</style>
<img class="desain" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6aRSm24KRrO4Jhe4F2TuBju1Lxg3-d1zBtxXU_wB56t6T6lJDFHdQPjZamWMYSInmyz7ZzTtj-PCqk8f4Dyi5LyYsjfEd7RmgSt2uXApqWkCnGhG9KMVeVdkIXKR-WogiaUqdxZWygmM/s700/foto.jpg"/>
Untuk lebih mudahnya langsung ikuti saja trik-trik berikut.
1. Bingkai Dobel Interaktif
Trik CSS pertama yaitu memberi foto sebuah bingkai berdobel di sekelilingnya. Kode CSS yang dibutuhkan adalah border, penerapannya bisa langsung dilihat di bawah.
<style>
.desain {
border:10px double red
}
</style>
|
|
<img class="desain" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6aRSm24KRrO4Jhe4F2TuBju1Lxg3-d1zBtxXU_wB56t6T6lJDFHdQPjZamWMYSInmyz7ZzTtj-PCqk8f4Dyi5LyYsjfEd7RmgSt2uXApqWkCnGhG9KMVeVdkIXKR-WogiaUqdxZWygmM/s700/foto.jpg"/> |
- Keterangan:
- Kode CSS memanggil tag class "desain" yang ada pada syntax img dengan memakai .desain.
- Border adalah kode untuk bingkai, urutan desainnya yakni: ukuran (10px) model (double) warna (red).
- Untuk model sendiri bisa diubah bermacam-macam seperti solid, dashed, dotted.
Sebenarnya ada cara lain untuk membuat bingkai berdobel dengan tampilan yang sedikit berbeda. Berikut cara kedua yang bisa digunakan untuk fungsi yang sama.
<style> border: 20px solid #3e2b14; padding: 10px; </style> |
|
<img class="desain" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6aRSm24KRrO4Jhe4F2TuBju1Lxg3-d1zBtxXU_wB56t6T6lJDFHdQPjZamWMYSInmyz7ZzTtj-PCqk8f4Dyi5LyYsjfEd7RmgSt2uXApqWkCnGhG9KMVeVdkIXKR-WogiaUqdxZWygmM/s700/foto.jpg"/> |
-
Keterangan:
- Border memiliki desain: ukuran (20px) model (solid) warna (orange).
- Padding adalah teknik untuk memberi ruang antara bingkai dan foto.
Bagaimana cukup simpel bukan bingkai berdobel ini? Kalau sudah berhasil maka kita lanjut ke trik selanjutnya.
2. Bayang-bayang Melayang
Trik CSS kedua yaitu menampilkan foto pakai efek bayang-bayang sehingga gambar tampak seperti melayang. Macam 3D gitulah. Hehe.. Tanpa banyak basa-basi kita langsung praktek saja.
<style>
.desain {
box-shadow: 8px 8px 8px #aaa;
}
</style>
|
|
<img class="desain" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6aRSm24KRrO4Jhe4F2TuBju1Lxg3-d1zBtxXU_wB56t6T6lJDFHdQPjZamWMYSInmyz7ZzTtj-PCqk8f4Dyi5LyYsjfEd7RmgSt2uXApqWkCnGhG9KMVeVdkIXKR-WogiaUqdxZWygmM/s700/foto.jpg"/> |
-
Keterangan:
- box-shadow adalah kode untuk memberikan bayangan pada objek. Urutan desainnya yakni ukuran sekeliling (8px 8px 10px) dan warna (#aaa).
Silahkan dicoba dan atur sesuka hati antara mengubah ukuran atau mengganti warna bayangannya.
3. Sudut Hanya Mitos
Setiap gambar yang dihasilkan pasti memiliki 4 sudut siku-siku. Melalui trik CSS ketiga kita bisa menghapuskan sudut -sudut ini jadinya gambar kelihatan elegan dan tampak lebih imut. Hehe..
<style>
.desain {
border-radius:10px;
}
</style>
|
|
<img class="desain" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6aRSm24KRrO4Jhe4F2TuBju1Lxg3-d1zBtxXU_wB56t6T6lJDFHdQPjZamWMYSInmyz7ZzTtj-PCqk8f4Dyi5LyYsjfEd7RmgSt2uXApqWkCnGhG9KMVeVdkIXKR-WogiaUqdxZWygmM/s700/foto.jpg"/> |
-
Keterangan:
- border-radius adalah kode untuk mengatur ketajaman sudut setiap gambar. Semakin besar ukuran yang ditambahkan, maka sudutnya semakin tumpul.
Coba saja agan praktikkan demi mengetahui seberapa tumpul sudut yang bisa agan implementasikan pada sebuah gambar.
4. Mode Hantu Transparan
Trik CSS selanjutnya adalah menjadikan gambar nampak transparan. Dengan penerapan CSS hasilnya akan lebih elegan dan manis dibanding pakai software editing. Karena transparansinya langsung mengikuti background halaman web.
<style>
.desain {
opacity: 0.5;
}
</style>
|
|
<img class="desain" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6aRSm24KRrO4Jhe4F2TuBju1Lxg3-d1zBtxXU_wB56t6T6lJDFHdQPjZamWMYSInmyz7ZzTtj-PCqk8f4Dyi5LyYsjfEd7RmgSt2uXApqWkCnGhG9KMVeVdkIXKR-WogiaUqdxZWygmM/s700/foto.jpg"/> |
-
Keterangan:
- Opacity adalah kode untuk mengatur tingkat transparansi objek. Semakin ditambah ukurannya semakin transparan, tapi jangan kelebihan soalnya gambarnya bisa hilang. Nanti kasihan pengunjung nyarinya dimana. Hehe..
Coba diterawang gan, keren kan? Iya dong. Gambar foto jadi seperti hantu-hantu yang suka tembus pandang.
5. Efek Filter Emejing
Untuk trik CSS terakhir pada tema ini adalah mengaplikasikan beragam filter effect pada gambar web. Mungkin banyak yang belum tahu kalau kode CSS menyimpan beragam perintah filter yang bisa digunakan dalam menampilkan sebuah gambar.
<style>
.desain{
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
</style>
|
|
| Grayscale |
|---|
<style>
.desain{
-webkit-filter: sepia(1);
filter: sepia(1);
}
</style>
|
|
| Sepia |
|---|
<style>
.desain{
-webkit-filter: saturate(8);
filter: saturate(8);
}
</style>
|
|
| Saturasi |
|---|
<style>
.desain{
-webkit-filter: hue-rotate(90deg);
filter: hue-rotate(90deg);
}
</style>
|
|
| Rotasi |
|---|
<style>
.desain{
-webkit-filter: invert(.8);
filter: invert(.8);
}
</style>
|
|
| Invers |
|---|
<style>
.desain{
-webkit-filter: brightness(3);
filter: brightness(3);
}
</style>
|
|
| Brightness |
|---|
<style>
.desain{
-webkit-filter: contrast(4);
filter: contrast(4);
}
</style>
|
|
| Contrast |
|---|
<style>
.desain{
-webkit-filter: blur(5px);
filter: blur(5px);
}
</style>
|
|
| Blur |
|---|
Mantap kan gan hasilnya, keren-keren pula. Pasti sekarang Agan nafsu banget buat nyobain sendiri. Coba efek CSS-nya maksudnya, bukan yang di foto. Haha..
Jadi siapa bilang menambah efek filter menarik nan unik hanya bisa dilakukan menggunakan aplikasi profesional?
Demikian trik-trik CSS keren untuk gambar yang bisa Agan praktikkan secara pribadi untuk diterapkan pada blog atau halaman web, guna memperindah konten dan memberi nilai tambah sehingga pengunjung merasa lebih nyaman dan antusias ketika menyimak postingan.
Kalau dirasa belum lengkap, artikel ini akan diupdate jika Syams memiliki trik CSS lain yang bisa diaplikasikan pada gambar. Tentunya trik yang memiliki gaya yang unik, tampilan yang keren, serta simpel atau mudah diikuti oleh siapa saja.
Gambar adalah elemen penting pada sebuah konten, dan perhatian terhadap gambar menjadi faktor penentu banyak visitor untuk betah dan berlama-lama dalam website yang kita kelola. Maka jangan sepelekan penggunaan desain pada gambar untuk meningkatkan kualitas postingan.
Syalams Desain!
0 Comments