Rabu, 30 Juni 2010

CSS3 Rounded Image With jQuery Plugin

Duh ngebleng nih ide mo mosting apaan ampe meuleuneung ~X( Ternyata BW benar-benar melelahkan :-S Berhubung lagi hot-hotnya CSS3, ya sudah mari kita membahas sedikit masalah yang ada pada browsingan mengenai webkit rounded corner :-/ Lebih spesifiknya kode pada inset box shadow yg kurang tampil secara sempurna pada Mozilla Firefox. Secara pecinta browsingan tersebut maka aku posting deh ;)) :D

Demo Rounded Images

Itu demo bagaimana kita akan meng-fixed CSS3 rounded images with jQuery plug-in :-" Dengan sentuhan span tag sederhana membuat gambar kita akan bertambah GAYA :)) Nah mari kita eksplore, how to do it :">

  1. CSS
    2. .rounded {
    display: inline-block;
    border: solid 1px #000;
    overflow: hidden;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    }
    Letakan kode CSS itu sebelum kode ]]></b:skin>
    Jika sobat hanya memakai CSS tersebut maka hasil akan tampak...
    Perhatikan sudut-sudutnya tuh, enggak smooth :-S bertubrukan yah ;))
  2. Untuk mengfixed kita membutuhkan javascript!
    3. <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
  3. Plug-in
    4. <script type="text/javascript">
    $(document).ready(function(){
    $(".rounded,").load(function() {
    $(this).wrap(function(){
    return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
    });
    });
    </script>
    Letakan kedua script tersebut setelah tag <head>
  4. HTML
    5. <img src="http://link-gambar.gif" height="" width="" alt="" class="rounded" />
    Hanya dengan meletakan atribut class="rounded" apabila kita akan membuat link pada gambar :)
  5. Save.
Original posted :-bd

Webdesignerwall

See yah :-h

Diposting oleh di
Label: ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)