• Program Baru W3function

    Online Courses

    Premium tutorial pembelajaran tahap pembuatan website secara menyeluruh mulai dari desain grafis, desain web, pengembangan, publikasi website di internet sampai dengan tekhnik SEO

    Materi: Photoshop, HTML5, CSS3, jQuery, PHP, MySQL, Semantic template, Responsif desain

    Mendaftar
  • Paket Toko Online

    W3function Store ®

    Solusi paket website toko online murah dan berkualitas dengan fitur yang lengkap beserta tema design yang banyak dan menarik

    Selengkapnya
  • Desain dan Pengembangan Web

    Custom Project

    Kami mengerti jenis bisnis Anda berbeda dengan yang lain sehingga Anda membutuhkan website yang benar-benar mencitrakan bisnis anda. Apapun jenis website yang ingin Anda buat kami akan membuatnya bekerja untuk Anda

    Selengkapnya

Penerapan Berbagai Style pada Tampilan Gambar dengan menggunakan CSS 3

25‘11
October

info61.jpg

Apabila anda sedang bingung untuk menerapkan suatu style pada gambar dan ingin secara otomatis semua gambar yang anda pasang di web mempunyai tampilan yang menarik tanpa harus memanipulasi setiap gambar di photoshop, maka CSS 3 bisa menjadi jalan alternatif anda. Bagi yang belum mengetahui CSS 3 silahkan buka artikel saya tentang CSS 3 di CSS 3 untuk border dan background

Modul CSS 3 untuk border yaitu box-shadow atau border-radius bisa kita tambahkan pada elemen gambar supaya gambar yang ditampilkan bisa menarik. Namun untuk trik ini gambar harus diterapkan sebagai background-image karena jika anda langsung menerapkan box-shadow atau border-radius pada gambar <img> maka tidak semua browser menampilkan CSS secara sempurna, dengan menerapkan image sebagai background-image kita dapat menambahkan gaya apapun dan gambar akan di render dengan benar oleh semua browser.

Penerapan CSS 3 secara langsung pada Gambar

Seperti yang saya jelaskan di atas, penerapan langsung CSS pada gambar akan menghasilkan gambar seperti di bawah. Apabila anda menggunakan browser FireFox terbaru, saat saya menulis artikel ini saya menggunakan FireFox 8.0, masalah dibawah tidak akan muncul gambar di render dengan benar, namun bila anda gunakan FireFox lama atau browser lain maka seperti yang anda lihat sudut lengkung antara border dan image tidak di render dengan benar

<img src="http://www.w3function.com/images_tutor/info59.jpg" 
style="border:4px solid #333333; border-radius:2em; -moz-border-radius:2em;" />		

Penerapan CSS 3 pada Elemen sebagai Background Image

Supaya support pada berbagai jenis browser maka untuk memanipulasi gambar tersebut kita gunakan gambar sebagai background-image

<div style=" background:url(http://www.w3function.com/images_tutor/info59.jpg) no-repeat; 
border:4px solid #333333; border-radius:2em; -moz-border-radius:2em; height:170px; width:280px;"></div>

Penerapan Gaya secara Otomatis dengan jQuery

apabila anda sudah terlanjur dengan tag anda sebelumnya dimana anda menerapkan gambar dengan tag <img> dan malas untuk merubah tag maka anda bisa menggunakan jQuery untuk mengotomatisasi gambar anda menjadi elemen background

jQuery merupakan sebuah framework dan cara baru dalam menuliskan kode javascript, apabila anda belum paham dengan jQuery silahkan buka link berikutPengantar dan Penggunaan jQuery pada Website

Code jQuery yang bisa kita gunakan untuk mengotomatisasi tag <img> menjadi background adalah sebagai berikut

<script type="text/javascript">
$(document).ready(function(){
    $("img").load(function() {
      $(this).wrap(function(){
          return '<span class="image-style' + $(this).attr('class') + 
          '" style="position:relative; 
          display:inline-block; background:url(' + $(this).attr('src') + ') 
          no-repeat center center; width: ' + $(this).width() + 'px; height: ' 
          + $(this).height() + 'px;" />';
      });
      $(this).css("opacity","0");
    });
});
</script>

Dengan menambahkan script jQuery diatas pada halaman index anda maka semua tag <img> anda akan otomatis menjadi background-image pada elemen yang anda tunjuk, output dari jQuery diatas adalah sebagai berikut

<span class="image-style" 
	style="position:relative; display:inline-block; 
    background:url(image.jpg) no-repeat center center; width: 200px; 
    height: 200px;">
    <img src="image.jpg" style="opacity: 0;">  
</span>

Berbagai Style Gambar yang bisa Anda Terapkan

Apabila anda sudah paham dengan penjelasan diatas mari kita mulai menerapkab berbagai macam varian style untuk gambar anda

Gambar sebelum diberi style adalah sebagai berikut :

Tampilan gambar bundar

.circle .image-style {
	-webkit-border-radius: 50em;
	-moz-border-radius: 50em;
	border-radius: 50em;
}	

Tampilan gambar bentuk Kartu

.card .image-style {
	-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
	-moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
	box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);

	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

Tampilan gambar bentuk Kartu dengan style Emboss

.embossed .image-style{
	-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
	-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
	box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);

	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

Tampilan gambar bentuk Kartu dengan style Soft Emboss

.soft-embossed .image-style{
	-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
	-moz-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
	box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);

	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

Tampilan gambar bentuk Bayangan kedalam

.cut-out .image-style{
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
	box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);

	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

Penerapan style pada gambar pada saat di sorot (Morphing Glowing)

Style juga bisa diterapkan pada gambar yang disorot pointer dengan css berikut maka gambar akan berubah gaya pada saat disorot

.morphing-glowing .image-style{
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;

	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

.morphing-glowing .image-style:hover {
	-webkit-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
	-moz-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
	box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);

	-webkit-border-radius: 60em;
	-moz-border-radius: 60em;
	border-radius: 60em;
}

Silahkan sorot gambar berikut :

Penerapan style Glossy pada gambar

.glossy .image-style {
	-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
	-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);

	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

.glossy .image-style:after {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 50%;
	top: 0;
	left: 0;

	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;

	background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));
	background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
}

Penerapan style Refleksi / bayangan air pada gambar

.reflection .image-style:after {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 30px;
	bottom: -31px;
	left: 0;

	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;

	background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.3)), color-stop(100%,rgba(255,255,255,0)));
	background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 100%);
}

Dari serangkaian penerapan gaya pada gambar di atas anda bisa mencampur nya sendiri dan menciptakan gaya lain, semoga bermanfaat dan selamat berkreasi.

Anda juga mungkin suka dengan artikel ini :

  1. Belajar Cara Membuat Website Tanpa Table (tableless) dengan Photoshop dan Dreamweaver Bagian 3
  2. Tutorial Membuat Desain Website Responsif Bagian 2 - Content Website dan Tampilan Iklan Responsif
  3. Tutorial dan Penjelasan menggunakan Styling CSS ( Cascading Style Sheet) untuk Text, Fonts, Links, List dan Table
  4. Pengertian dan Tutorial Dasar CSS untuk Pemula (Newbie)
  5. CSS 3 untuk border dan background

Komentar

  • Iqbal (26 May 2016 05:36:16)

    toturialnya kurang lengkap, kalau sudah desain seperti itu terus bagaimana cara menerapkan nya ke blog kita? pliss jawab pertanyaan saya maklum newbie iqbalskadoosh@gmail.com

  • eriansyah (04 Mar 2016 05:44:02)

    mas saya mau tanya kalau gambar dalam postingan agar responsive gimana ya caranya, bukan gambar utama tp gambar hasil dari copy paste google terus di passte ke isi artikel nah pas saya tampilin biar responsive gmn caranya, mohon bantuannya ya mas ....terimakasih

  • Aditya Prabu (21 Feb 2016 12:42:18)

    baru tahu ane gan, thanks

  • b (12 May 2015 02:49:33)

    buat web kayak agan gimana ne??

  • arif (25 Nov 2014 09:49:10)

    mantappp gann tutorialnya ...

» Muat Komentar Sebelumnya (13 komentar) loading

Kode?

Telusuri dan Beritahu saya apabila ada komentar baru.

loading

Usulan Kontribusi dan Saran

Kami sangat terbuka dengan berbagai saran dan kontribusi positif dari Anda. Kami ingin membuat halaman blog di w3function.com ini terbuka untuk banyak penulis, sehingga kita bisa bersama-sama mendiskusikan banyak topik yang lebih luas dan lebih menarik lagi. Apabila Anda memiliki artikel yang ingin Anda kontribusikan untuk w3function.com mohon email kami.

Pemberitahuan Disclaimer © Copyright

Semua isi termasuk di dalamnya semua artikel dan gambar adalah hak cipta w3function.com, kecuali ada statement khusus yang di cantumkan (kontributor). Mohon tidak menyalin isi atau mempublikasikan kembali tanpa seizin w3function.com dan atau kontributor artikel lain

Semua sumber download dari w3function.com adalah untuk tujuan edukasi semata, bukan untuk tujuan komersial atau lainnya kecuali ada statement khusus yang di cantumkan.

Social Stuff