NEWS
Loading...
  • Posted by : Johanes Djogan 14 Des 2010

    30 Trik menarik CSS3
    ini dia kehebatan CSS3,effect'a yang keren dan mirip dengan effect jquery dan flash.menggunakan css3 tidak akan memberatkan blog sobat tergantung banyak'a pemakaian css pada blog sobat
    ,nah..kali ini saya akan share 30 Kreasi css3 dari saya yang unik2 n_n
     ,terdiri dari jenis CSS3 border radius atau corner,CSS3 gradient,dan CSS3 animation.untuk menikmati CSS3 ini,disarankan sobat menggunakan browser versi terbaru,dan mendukung CSS3 agar tidak ralat dalam menampilkan CSS3 ini sperti google chrome,safari,dan mozilla firefox,tetapi mozilla firefox saat ini belum mendukung 100% CSS3 animation.





    Kode HTML

    masukan kode html ini di elemen halaman sobat,tapi ganti class name pada kode html di bawah ini

    <div class="ganti dengan nama css/kotak"></div>


    Contoh:
    <div class="kotak2"></div>
    <div class="lingkaran"></div>

    CSS3 Border radius

    kotak1
    .kotak1 {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background:#00C4FD;
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    }

    Kotak2
    .kotak2 {
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-bottomright: 15px;
    -webkit-border-top-left-radius: 15px;
    -webkit-border-bottom-right-radius: 15px;
    background:#00C4FD;
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    }

    Segitiga atas

    segitiga bawah

    segitigakanan

    segitigakiri

    .segitigabawah {
    border-color:#333333 transparent transparent;
    border-style:solid;
    border-width:20px 20px 0;
    float:left;
    height:0;
    margin:0 10px;
    width:0;
    }
    .segitigaatas {
    border-color:transparent transparent #333333;
    border-style:solid;
    border-width:0 20px 20px;
    float:left;
    height:0;
    margin:0 10px;
    width:0;
    }
    .segitigakanan {
    border-color: transparent transparent transparent #333333;
    border-style:solid;
    border-width:20px 20px 0;
    float:left;
    height:0;
    margin:0 10px;
    width:0;
    }
    .segitigakiri {
    border-color:transparent #333333 transparent transparent;
    border-style:solid;
    border-width:20px 20px 0;
    float:left;
    height:0;
    margin:0 10px;
    width:0;
    }

    Lingkaran
    .lingkaran {
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    background:#00C4FD;
    width: 80px;
    height: 80px;
    line-height: 70px;
    text-align: center;
    }

    Kotak3
    .kotak3 {
    -webkit-box-shadow: 1px 1px 20px #781081, -1px -1px 20px #FFFF55;
    -moz-box-shadow: 1px 1px 20px #781081,-1px -1px 20px #FFFF55;
    box-shadow: 1px 1px 20px #781081, -1px -1px 20px #FFFF55;
    background:#00C4FD;
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;}

    Kotak4
    .kotak4 {
    background:-moz-linear-gradient(-90deg, #00C4FD, #FFFF55) repeat scroll 0 0 transparent;
    background:-webkit-gradient(linear, left top, left bottom, from(#00C4FD), to(#FFFF55));
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;}

    CSS3 Gradient

    Kotak5
    .kotak5 {
    background: -webkit-gradient(
    radial, 500 25%, 20, 500 25%, 40, from(blue), to(#eee)
    ) yellow;
    background: -moz-radial-gradient(
    500px 25%, 20px, 500px 25%, 40px, from(blue), to(#eee)
    ) yellow no-repeat;
    width: 500px;
    height: 200px;
    line-height: 50px;
    text-align: center;}

    Kotak6
    .kotak6 {
    background: -webkit-gradient(
    radial, 480 25%, 20, 500 25%, 40, from(blue), to(#eee)
    ) yellow;
    background: -moz-radial-gradient(
    480px 25%, 20px, 500px 25%, 40px, from(blue), to(#eee)
    ) yellow no-repeat;
    width: 500px;
    height: 200px;
    line-height: 50px;
    text-align: center;}

    Kotak7
    .kotak7 {
    background: -webkit-gradient(
    radial, 450 25%, 40, 500 25%, 20, from(blue), to(#eee)
    ) yellow;
    background: -moz-radial-gradient(
    450px 25%, 40px, 500px 25%, 20px, from(blue), to(#eee)
    ) yellow no-repeat;
    width: 500px;
    height: 200px;
    line-height: 50px;
    text-align: center;}

    Kotak8
    .kotak8 {
    background: -webkit-gradient(
    radial, 500 50%, 10, 500 50%, 80, from(orange), color-stop(0.6, #fff), to(lightblue)
    );
    background: -moz-radial-gradient(
    500px 50%, 10px, 500px 50%, 80px, from(orange), color-stop(0.6, #fff), to(lightblue)
    ) no-repeat;
    width: 500px;
    height: 200px;
    line-height: 50px;
    text-align: center;}

    Kotak9
    .kotak9 {
    background: -webkit-gradient(
    radial, 500 50%, 20, 500 50%, 100, from(red), color-stop(0.2, orange), color-stop(0.4, yellow), color-stop(0.6, green), color-stop(0.8, blue), to(#fff)
    );
    background: -moz-radial-gradient(
    500px 50%, 20px, 500px 50%, 100px, from(red), color-stop(0.2, orange), color-stop(0.4, yellow), color-stop(0.6, green), color-stop(0.8, blue), to(#fff)
    ) no-repeat;
    width: 500px;
    height: 200px;
    line-height: 50px;
    text-align: center;}

    Kotak10
    .kotak10 {
    background: -moz-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(50%,#bfe8f9), color-stop(51%,#9fd8ef), color-stop(100%,#2ab0ed));
    width: 500px;
    height: 200px;
    line-height: 50px;
    text-align: center;}

    Kotak10
    .kotak11 {
    background: -moz-linear-gradient(top, #f3e2c7 0%, #c19e67 50%, #b68d4c 51%, #e9d4b3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3e2c7), color-stop(50%,#c19e67), color-stop(51%,#b68d4c), color-stop(100%,#e9d4b3));
    width: 500px;
    height: 200px;
    line-height: 50px;
    text-align: center;}

    CSS3 Animation

    horizontal
    .kotak1animasi {
    border-radius: 8px;
    background:#00C4FD;
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    -webkit-transition: all 0.6s ease-in-out;
    }
    .kotak1animasi:hover {-moz-transform:translate(4em, 0pt);
    -webkit-transform:translate(4em, 0pt);}

    berputar
    .kotak2animasi {
    border-radius: 8px;
    background:#00C4FD;
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    -webkit-transition: all 0.6s ease-in-out;
    }
    .kotak2animasi:hover {
    -moz-transform:rotate(30deg);
    -webkit-transform:rotate(30deg);}

    horizontal+vertikal
    .kotak3animasi {
    border-radius: 8px;
    background:#00C4FD;
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    -webkit-transition: all 0.6s ease-in-out;
    }
    .kotak3animasi:hover {
    -moz-transform:translate(-3em, 1em);
    -webkit-transform:translate(-3em, 1em);}

    Ukuran
    .kotak4animasi {
    border-radius: 8px;
    background:#00C4FD;
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    -webkit-transition: all 0.6s ease-in-out;
    }
    .kotak4animasi:hover {
    -moz-transform:scale(1.3);
    -webkit-transform:scale(1.3);}

    border
    .kotak5animasi {
    background:#00C4FD;
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    -webkit-transition: all 0.6s ease-in-out;
    }
    .kotak5animasi:hover {
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomright: 20px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;}

    Lingkaran
    .kotak6animasi {
    background:#00C4FD;
    width: 100px;
    height: 100px;
    line-height: 50px;
    text-align: center;
    -webkit-transition: all 0.6s ease-in-out;
    }
    .kotak6animasi:hover {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;}

    ukuran box
    .kotak7animasi {
    background:#00C4FD;
    width: 100px;
    height: 100px;
    line-height: 50px;
    text-align: center;
    -webkit-transition: all 0.6s ease-in-out;
    }
    .kotak7animasi:hover {
    width: 300px;}

    Warna
    .kotak8animasi {
    background:#00C4FD;
    width: 100px;
    height: 100px;
    line-height: 50px;
    text-align: center;
    -webkit-transition: all 0.6s ease-in-out;
    }
    .kotak8animasi:hover {
    background:#D2506C;}

    shadow+background trasparant
    .kotak9animasi {
    background:#00C4FD;
    width: 100px;
    height: 100px;
    line-height: 50px;
    text-align: center;
    -webkit-transition: all 0.6s ease-in-out;
    }
    .kotak9animasi:hover {
    -moz-box-shadow:0 0 20px #D2506C;
    -webkit-box-shadow:0 0 20px #D2506C;
    background-color:rgba(255, 255, 255, 0.8);}

    Shadow 2 warna
    .kotak10animasi {
    background:#00C4FD;
    width: 100px;
    height: 100px;
    line-height: 50px;
    text-align: center;
    -webkit-transition: all 0.6s ease-in-out;
    }
    .kotak10animasi:hover {
    -webkit-box-shadow: 1px 1px 20px #781081, -1px -1px 20px #FFFF55;
    -moz-box-shadow: 1px 1px 20px #781081,-1px -1px 20px #FFFF55;
    box-shadow: 1px 1px 20px #781081, -1px -1px 20px #FFFF55;
    }

    multi animasi
    .kotak11animasi {
    background:#00C4FD;
    width: 100px;
    height: 100px;
    line-height: 50px;
    text-align: center;
    -webkit-transition: all 0.6s ease-in-out;
    }
    .kotak11animasi:hover {
    -webkit-animation-name: pulsate;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: ease-in-out;
    }
    @-webkit-keyframes pulsate {
    0% { width:100px; }
    5% { width:150px; left:-25px; }
    10% { width:100px; left:0px; }
    15% { width:150px; left:-35px; }
    20% { width:100px; left:0px; }
    40% { width:100px; background-color:#38374A; }
    45% { width:150px; left:-25px; background-color:#FFFF55; }
    50% { width:100px; left:0px; background-color:#FFFF55; }
    55% { width:150px; left:-25px; background-color:#FFFF55; }
    60% { width:100px; left:0px; background-color:#3FFFF55; }
    80% { width:100px; background-color:#45002D; }
    100% { width:100px; background-color:#00C4FD; }
    }

    Bounce effect
    .kotak12animasi {
    background:#00C4FD;
    width: 100px;
    height: 100px;
    line-height: 50px;
    text-align: center;
    -webkit-transition: all 0.6s ease-in-out;
    }
    .kotak12animasi:hover {
    -webkit-animation-name: bounce;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-direction: alternate;
    }
    @-webkit-keyframes bounce {
    from {
    margin-left: 0px;
    }
    to {
    margin-left: 250px;
    }
    }

    Fade effect
    .kotak13animasi {
    background:#00C4FD;
    width: 100px;
    height: 100px;
    line-height: 50px;
    text-align: center;
    -webkit-transition: all 0.6s ease-in-out;
    }
    .kotak13animasi:hover {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 3s;
    }
    @-webkit-keyframes fade {
    0% {
    opacity: 1.0;
    }
    50% {
    opacity: 0.5;
    }
    100% {
    opacity: 1.0;
    }
    }

    infinity Bounce effect
    .kotak14animasi {
    background:#00C4FD;
    width: 100px;
    height: 100px;
    line-height: 50px;
    text-align: center;
    -webkit-transition: all 0.6s ease-in-out;
    }
    .kotak14animasi:hover {
    -webkit-animation-name: scale;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: infinite;
    }
    @-webkit-keyframes scale {
    from{
    -webkit-transform: scale(1);
    }
    50%{
    -webkit-transform: scale(0.85);
    animation-timing-function: ease-out;
    }
    to{
    -webkit-transform: scale(1);
    animation-timing-function: ease-out;
    }
    }

    rotate
    .kotak15animasi {
    background:#00C4FD;
    width: 100px;
    height: 100px;
    line-height: 50px;
    text-align: center;
    -webkit-transition: all 1.0s ease-in-out;
    }
    .kotak15animasi:hover {
    -moz-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    }

    Hello
    apa kabar n_n
    .kotak16animasi {
    background: #e3e3e3;
    border: 1px dashed #666;
    margin: auto;
    width: 400px;
    height: 200px;
    cursor: pointer;
    position: relative;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
    }
    .kotak16animasi::after {
    content: '';
    position: absolute;
    width: 70%;
    height: 10px;
    bottom: 0;
    left: 15%;
    z-index: -1;
    -webkit-box-shadow: 0 9px 20px rgba(0,0,0,.4);
    -moz-box-shadow: 0 9px 20px rgba(0,0,0,.4);
    box-shadow: 0 9px 20px rgba(0,0,0,.4);
    }
    .kotak16animasi > div {
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
    background: #e3e3e3;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    font: 45px/200px bold helvetica, arial, sans-serif;
    text-align: center;
    text-shadow: 0 1px 0 white;
    }
    .kotak16animasi > div:first-child {
    position: relative;
    z-index: 2;
    }
    .kotak16animasi:hover {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
    }
    .kotak16animasi:hover > div:first-child {
    opacity: 0;
    }
    .kotak16animasi:hover div:last-child {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
    }

    Khusus untuk trik ini,kode html'a seperti dibawah ini
    <div class="kotak16animasi">
    <div>
    Hello</div>
    <div>
    apa kabar n_n </div>
    </div>
    moving
    .kotak17animasi {
    background:#00C4FD;
    width: 100px;
    height: 100px;
    line-height: 50px;
    text-align: center;
    -webkit-transition: all 1.0s ease-in-out;
    }
    .kotak17animasi:hover {
    -webkit-transform: translate(540px,-200px);
    }


    Keterangan:
    -webkit-transition: all 0.6s ease-in-out; *waktu effect animasi*
    -moz-transform:translate(3em, 0pt); *moving effect/berpindah tempat/horizontal*
    -moz-transform:rotate(30deg); *rotate effect/berputar*
    -webkit-transform:translate(-3em, 1em); *moving effect/berpindah tempat/horizontal+vertikal*
    -webkit-transform:scale(1.3); *scale effect/mengubah ukuran*
    -webkit-box-shadow: 0 9px 20px rgba(0,0,0,.4); *effect shadow/bayangan*
    background:-moz-linear-gradient(-90deg, #00C4FD, #FFFF55) repeat scroll 0 0 transparent; *effect gradient*


    Webkit :Google Chrome

    Moz : Mozzila firefox






    Selamat mencoba,semoga bermanfaat dan jangan lupa tinggalkan komentar'a ya n_n

    { 32 comments... read them below or Comment }

    1. keren gan ! bisa nambah ilmu !ane bookmark dulu gan...

      jangan lupa kunjungi blog ane

      BalasHapus
    2. Keren-keren banget triknya, saya coba ya.

      Boleh request ga ? Cara bikin kotak komentar (comment list) seperti blog ini (pke css) .. Tolong ya

      BalasHapus
    3. BLognya memang manthap,..tak kalah dengan Artikel-artikelnya

      BalasHapus
    4. Komentar ini telah dihapus oleh pengarang.

      BalasHapus
    5. hya...
      saya coba di chrome saya koq gak berfungsi ....

      BalasHapus
    6. mantab sekali gan. btw link anda sudah saya pasang, cek disini http://www.nidh8.co.cc/2007/12/tuker-link.html

      BalasHapus
    7. keren tutornya!
      aku save dah page halaman ini! sankyu..

      jfan admin,

      BalasHapus
    8. komplit bgt nih tutorialnya,izin praktek gan

      BalasHapus
    9. JO...atau Nes (Panggilannya apa?)

      Saya rencana mau buat tombol buat blog aku, ingat pernah baca tombol CSS di sini, jadi numpang izin sedot ilmunya. Tararankyu.

      BalasHapus
    10. Kelupaan.....

      Templatenya KEREEEENNNN. Buat sendiri kah?

      BalasHapus
    11. panggil aja jo ^^
      silakan bro,sama2..
      thanks ya..iya,buat sendiri,tapi msh belum sempurna design'a

      BalasHapus
    12. agan JO thx ilmunya sangat berguna

      BalasHapus
    13. okeee... akhirnya kode untuk membuat hover ketemu...
      makasih banyak

      BalasHapus
    14. oke saya akan coba. aq br dlm maslah blogger jadi my blog msh kacau. tipsx sangat menarik...

      BalasHapus
    15. untuk kotak animasi 11 (multi animasi) hasilnya ngak sesuai dengan contoh?

      BalasHapus
    16. Wah bagus2 mas, aq suka yang bolak balik ntu. Hehehehe ditunggu kunjungannya ya?

      BalasHapus
    17. Maaf . . .

      saya boleh nanya gak . . .


      CSS3 Border radius dimana naruhnya . . .

      maaf kalau saya nanya begini . . .



      soalnya saya baru di blogger . . .
      terima kasih . . .

      BalasHapus
    18. @fvonnyxcqwusz_la

      CSS border radius:

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


      ditaro di cssnya,

      diantara kode { isi css }

      BalasHapus
    19. Berhasil menerapkan beberapa..,
      Fiiuuhh.., ada sedikit eror tadi, tapi untung berhasil.

      Visit from : rifaldhiaw.blogspot.com

      BalasHapus
    20. thank's banget nes (fb) udah ngasih tau. Cara nambahin a:hover, thanks banget ya...

      Kunjungin balik nes ramadhandarkness.com

      BalasHapus
    21. ada ga trick gambarnya awalnya fade effect, terus pas di arahin kursor terus effect'a jadi ilang alias contrast gtu deh hheee

      BalasHapus
    22. Kak Johanes bikinin video tutorial buat css yang horizontal. soalnya ingin buat style css sendiri.
      http://yoga-tc.blogspot.com/

      BalasHapus

    "Maaf komentar anda tidak akan dibalas, karena blog ini sudah tidak aktif. Terima kasih"

    "Sorry your comment will not be replied, because this blog has been inactive. Thank you"

  • Translate

    Thank you for choosing Blogger Template from Blog Johanes! (*≧∇≦*)

    - Copyright ©DJogzs 2009-2013 - Some Right Reserve. - DJogzs - Powered by Blogger - Designed by Johanes Djogan -