Minggu, 09 Desember 2012

Penerapan Berbagai Style pada Tampilan Gambar dengan menggunakan CSS 3


Penerapan Berbagai Style pada Tampilan Gambar dengan menggunakan CSS

HTML & CSS Categories
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
?
1
2
<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
?
1
2
<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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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
?
1
2
3
4
5
6
<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

?
1
2
3
4
5
.circle .image-style {
    -webkit-border-radius: 50em;
    -moz-border-radius: 50em;
    border-radius: 50em;
}  

Tampilan gambar bentuk Kartu

?
1
2
3
4
5
6
7
8
9
.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

?
1
2
3
4
5
6
7
8
9
.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

?
1
2
3
4
5
6
7
8
9
.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

?
1
2
3
4
5
6
7
8
9
.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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.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.
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)