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

    Belajar CSS3
    apa kabar sobat?sehat kan?sebelum'a saya mengucapkan natal dan tahun baru 2011 ^^
    ok,kali ini saya mau share tentang dasar - dasar tentang trik CSS3 yang sudah kita coba selama ini
    ,mungkin sebagian dari sobat hanya copy paste css ke template,tanpa mengerti arti kode tersebut dan fungsinya,dan mengalami kesulitan untuk mengatur sendiri css'a.
    pertama kita harus tahu dulu apa itu CSS??


    Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengatur beberapa komponen atau elemen dalam sebuah web sehingga akan lebih terstruktur dan seragam dengan HTML/script.Untuk saat ini terdapat tiga versi CSS, yaitu CSS1,CSS2 dan saat ini yang sedang populer adalah CSS3 .CSS 1 dikembangkan berpusat pada pemformatan dokumen HTML,CSS 2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer.
    Selain itu CSS 2 mendukung penentuan posisi konten, downloadable, huruf (font), tampilan pada tabel (table layout) dan media tipe untuk printer.sedangkan CSS3 adalah gaya bahasa terbaru dan terbesar di cakrawala dari web, dan memiliki kemampuan design yang lebih baik daripada versi css sebelum'a

    apa saja yang bisa dilakukan CSS3?
    ini dia daftar Kemampuan CSS3:

    -Text shadow pada tulisan and box shadows pada background dan kotak = efek bayangan
    -Sudut bulat atau biasa disebut rounded corners
    -Gradient atau gradasi warna pada text dan background
    -Animasi dan transisi
    -Berbagai macam css font seperti google font api
    -Multi background images
    -rgba color
    -border style
    -multi colums count(untuk menentukan jumlah kolom)
    -column gap (untuk menentukan jarak antar kolom)
    -column rule (untuk menambahkan sebuah garis antar kolom)
    -content hover effect(hover efect*ituloh,bila kita arahkan kursor ke onject,akan muncul animasi'a)
    -kaleborasi CSS3 dengan jquery,mootools,yui,dan javascript.
    -photo slider,accordation,tabslider,dan masih banyak lagi yang akan dikembangkan.

    sobat sudah taukan apa saja yg bisa dilakukan css3?
    sekarang saya akan sharing beberapa tutorial css3 .
    pertama,kita belajar text shadow dulu ya ^^


    TEXT SHADOW
    Bayangan teks disusun dalam urutan sebagai berikut: x-offset, y-offset, kabur, dan warna
    berdasarkan keterangan gambar diatas,
    -syntax Text-shadow adalah perintah untuk menampilkan text shadow.
    -angka 2px(pixel) arah x-offset/horizontal maka posisi bayangan akan  ke kanan. sedangkan bila kita masukan nilai kurang dari -1,maka arah bayangan akan ke kiri.
    -angka 3px arah y-offset/vertikal maka posisi bayangan akan keatas,sedangkan bila kita masukan nilai kurang dari -1,maka arah bayangan akan ke bawah.
    -nilai ketiga 2px,adalah efek blur/bayangan/atau tingkat kekaburan.bila kita mempertinggi nilai blur tersebut,maka tingkat kekaburan'a akan meluas.
    -untuk kode warna,sperti yang sobat tahu menggunakan kode warna hexadecimal.

    pada inti'a,prinsip kerja text shadow sama dengan tabel grafik seperti gambar diatas.

    sama hal'a dengan trik 3DText.
    Contoh:


    pada prinsip 3Dtext,kita hanya mengubah posisi bayangan berdasarkan arah pada nilai yang kita tentukan.
    untuk shadow biasa kita hanya memasukan  text-shadow: 0px 1px 0 #000.
    tetapi untuk 3d text,kita tambahkan koma"," untuk memanjangkan shadow'a
    menjadi seperti ini
     text-shadow: 0px 1px 0 #152794,text-shadow: 0px 2px 0 #05a0aa;
    mengapa shadow pertama 1px sedangkan shadow kedua 2px?
    karena prisip kerja 3D text menggunakan layer shadow.untuk layer pertama dibuat posisi'a ke atas 1 px,shadow ke 2 diubah ke posisi yg lebih tinggi daripada shadow pertama.tingkat kekaburan pada text diberi nilai "0" agar lebih realistic efek 3Dnya...



    BORDER - RADIUS -CORNER


    Singkat'a untuk border radius mirip dengan properti padding dan margin (misalnya border-radius: 20px). Dalam rangka untuk browser untuk membuat jari-jari border radius, tambahkan "-webkit-" dalam font nama properti untuk browser webkit"google chrome,safari" dan "-moz-" untuk Firefox,dan O untuk browser Opera.
    Contoh:
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    kode diatas yang bernilai 8 px,artinya tingkat kebundaran pada bagian kiri dan kanan bernilai 8 px,bila kita naikan nilai'a,akan semakin bulat.

    untuk lebih specify css'a lihat Kotak 2 pada gambar diatas dan css dibawah ini:
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-bottomright: 15px;
    -webkit-border-top-left-radius: 15px;
    -webkit-border-bottom-right-radius: 15px;
    disini,saya hanya memasukan nilai radius untuk bagian atas,sebelah kiri dan bawah sebelah kanan,maka akan membulat di sudut tertentu saja.
    kenapa efek bundar hanya terlihat di bagian atas,kiri dan kanan,bawah?
    karena kita tidak memasukan nilai'a,otomatis menjadi "0".

    CSS3 ANIMATION KEY FRAME




    mungkin sudah pernah mencoba Efek animasi yang menggunakan -moz-transform yang sudah digunakan pada contoh yang sudah saya share sebelum'a di artikel 30 Trik menarik CSS3. Jika sebuah class menggunakan -moz-transform dan ditambah dengan -webkit-transition maka efek animasinya akan terlihat.dan yang terpenting,kita menggunakan -webkit-transition: all 0.6s ease-in-out dimana 0.6s adalah waktu gerak dan ease-in-out adalah tipe efek yang digunakan.

    Beda'a dengan CSS3 animation,kita bisa menentukan sendiri efek animasi'a di tiap frame/atau proses animasi itu berlangsung.contoh css3 animation ada di
    yang "infinity Bounce effect"besar/kecil terus menerus bila kita arahkan kursor ke objek" ,"Fade effect" , "Bounce effect" dan "multi animasi".

    ok deh,pertama saya jelaskan dari infinity Bounce effect.

    infinity Bounce effect

    Perhatikan CSS dibawah ini
    .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;
    }
    }


    pada .kotak14animasi adalah kode tetap untuk css style pada object,dengan warna,lebar dan tinggi yang sudah ditentukan,dengan -webkit-transition.
    lalu pada .kotak14animasi:hover,kita menambahkan
    -webkit-animation-name: scale;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: infinite;

    -yang pertama,-webkit-animation-name: scale; adalah nama keyframes yag sudah terikat dengan @-webkit-keyframes scale ,bila nama'a berbeda,css tidak akan bekerja.
    -yang kedua -webkit-animation-duration: 0.5s; adalah durasi animasi itu sendiri dan..
    -yang ketiga -webkit-animation-iteration-count: infinite; adalah css yang terpenting agar animasi berjalan tak terbatas.


    Selanjutnya..
    @-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;
    }
    }
    pertama,coba sobat perhatikan css ini
    -webkit-keyframes scale adalah nama keyframenya.
    -webkit-transform adalah efek animasinya.

    { from{-webkit-transform: scale(1);}
    kode di atas ini adalah posisi awal,dengan Scale (1) besarnya 100 % dengan objek aslinya.
    lalu pada css:
    50%{
    -webkit-transform: scale(0.85);
    animation-timing-function: ease-out;
    }

    adalah tengah prosesanimasi itu berlangsung dengan scale 0.85 = 85% object itu mengecil

    lalu membesar lagi ke posisi awal menjadi scale(1)
    to{
    -webkit-transform: scale(1);
    animation-timing-function: ease-out;

    itulah mengapa cara kerja infinity Bounce effect bisa tidak terbatas.


    selanjutnya...

    Fade effect
    sama dengan infinity Bounce effect,menggunakan -webkit-transition,hover dan keyframes.
    disini bedanya kita menggunakan effect yag berbeda.Fade effect adalah efek transparant,tapi aka kembali lagi menjadi timbul.
    fade efect menggunakan css opacity,yang membuat effect transparant pada object.

    perhatian css dibawah ini
    0% {
    opacity: 1.0;
    }
    50% {
    opacity: 0.5;
    }
    100% {
    opacity: 1.0;
    }
    }
    0% adalah posisi awal object tersebut,opacity 1.0= 100%,lalu..
    50 % posisi tengah animasi =0.5 =50% efek transparant..
    dan terakir pada posisi 100%,akan timbul kembali object tersebut.


    Bounce effect

    untuk Bounce effect,hanya beda di keyframesnya saja.
    @-webkit-keyframes bounce {
    from {
    margin-left: 0px;
    }
    to {
    margin-left: 250px;

    margin-left: 0px; adalah posisi/letak awal object.
    margin-left: 250px; akan berpindah posisi 250px dari letak awal object tersebut.

    dan yang terakhir...


    Link/background warna-warni
    @-webkit-keyframes pulsate {
    0% { background-color:#DEDEDE;color:#797979;}
    5% { background-color:#109F9D;color:#9EA9AF;}
    10% { background-color:#B19FD9;color:#797979;}
    15% { background-color:#D600AF;color:#EAEAEA;}
    20% { background-color:#E9E32E;color:#797979;}
    40% { background-color:#38374A;color:#9EA9AF;}
    45% { background-color:#711943;color:#797979;}
    50% { background-color:#3FFFF5;color:#EAEAEA;}
    55% { background-color:#1F67C5;color:#797979;}
    60% { background-color:#6541B3;color:#9EA9AF;}
    80% { background-color:#45002D;color:#797979;}
    90% { background-color:#109F9D;color:#EAEAEA;}
    100% { background-color:#DEDEDE;color:#797979;}
    }
    }
    untuk trik css3 warna warni,efek animasinya lebih banyak..
    tiap proses,efeknya hanya berganti warna di tiap framenya...
    sobat tinggal mengganti warna background yang sobat inginkan dengan pilihan warna yang bisa sobat pilih sendiri.

    Sekian penjelasan trik animasi dari saya,semoga sampai disini sobat bisa mengerti css3,dan dapat membuat kreasi sobat sendiri untuk menciptakan berbagai ide kreatif yang bisa kita kembangkan.terima kasih dan jangan lupa tinggalkan komentarnya ^^

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

    1. PERTAMAX GAN!!!

      kekeke~~

      Aku mengerti!!

      BalasHapus
    2. wah nice info sob, teruslah utk saling berbagi..
      =D

      BalasHapus
    3. Wow, jelas banget penjelasannya .... Baru sekarang ngerti sob

      BalasHapus
    4. Aku pusing X(

      BTW, font yang dipake itu apa sob?

      BalasHapus
    5. sudah lama aku cari2 blog yang mengulas css3 bahasa indonesia, ternyata nemu disini..
      thanks banget ilmunya bro

      BalasHapus
    6. subahanallah....!!!
      puyeng y.... hehehe

      thank's y infonya...

      BalasHapus
    7. mau tanya ? kalau kode CSSkan tempatnya seperti ]]>. Kalau CSS3 dmana?

      BalasHapus
    8. @nassef risman CSS3 itu cuma sebutan/versinya saja,jadi penempatan'a jg sama,CSS3 adalah hasil pengembangan dari CSS1, CSS2

      BalasHapus
    9. weleh.. ikut belajar ah...
      dah bosen sama CSS lama..

      BalasHapus
    10. Wah saya mengeri nih, namun penempatan kode cssnya dimana ya ?, dan gunanya apa saja CSS3 itu ?

      BalasHapus
    11. kalau pada umumnya di blogger,css itu berada di dalam

      b:skin
      ...
      isi css
      ...
      /b:skin


      gunanya sebagai penghias,atau pengatur style,tinggi,lebar pada html.
      klo html singkatnya hanya sebagai pondasi/kerangka tubuh template

      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 -