Sunday, July 8, 2012

Membuat Text Shadow Efek Blur
Membuat Text Shadow Efek Blur
Cara Membuat Text Shadow Efek Blur ~ Tutorial CSS 3 Efek Shadow Text On Mouse Blur sekarang kita belajar lagi menggunakan CSS dengan memanfaatkan fasilitas Text Shadow menjadi Blur. Efek Shadow ini banyak digunakan pada Blogazine untuk lebih menghidupkan Blog / Web mereka.

Tutorial CSS 3 Efek Text Shadow On Mouse Blur ini akan menjadi berubah ketika cursor didekatkan ke Text. Memanfaatkan Hover yang ada pada CSS Tutorial ini bagus untuk Blog bercitra Dark atau Gelap sehingga kelihatan menyala. Namun tidak menutup kemungkinkan untuk dipasang pada Blog bergaya simple dengan dasar putih.

Anda bisa melihat contohnya seperti pada gambar diatas, tulisan yang menyamping dengan aturan kemiringan dan efek shadow juga Blur yang terkombinasi dengan baik.

Demo klik [+]

HTML 
<div id="wrapper" contenteditable="true" spellcheck="false">      
        <p>Where</p>
        <p>are the</p>
        <p>trees</p>
</div>
​CSS

/* Wrapper ------------------------------------------------------ */
body {
    margin: 0;
    width: 100%;
    height: 100%;
    text-align: center;
 
    background-color: hsla(30,20%,95%,.9);
 
    /* Pixel pattern only enabled for WebKit because of performance */  
    background-size: 2px 3px;
    background: hsla(30,20%,95%,.9) -webkit-linear-gradient(45deg, hsla(0,0%,0%,0)  0px,
                                                                    hsla(0,0%,0%,0)  1px,
                                                                    hsla(0,0%,0%,.1) 2px,
                                                                    hsla(0,0%,0%,.1)  3px);
    display: -webkit-box;
    display:    -moz-box;
    display:     -ms-box;
    display:      -o-box;
    display:         box;
 
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-box-align: center;
         -o-box-align: center;
            box-align: center;
 
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-box-pack: center;
         -o-box-pack: center;
            box-pack: center;
    }
#wrapper {
    position: relative;
    background :#333;
    /z-index: 0;
    text-align: center;
    font-weight: bold;
    font-family: "Yanone Kaffeesatz", "Lucida Grande", Lucida, Verdana, sans-serif;
    margin: 0 auto;
    width: 600px;
    padding: 7em 0;
    background: url(bg.jpg) no-repeat center center;
    border-radius: 4px;
    box-shadow: inset 0 -1px 0  hsla(0,0%,0%,.2), 0 21px 8px -12px rgba(0,0,0,.2);
 
    -webkit-perspective: 350;
       -moz-perspective: 350;
        -ms-perspective: 350;
         -o-perspective: 350;
            perspective: 350;
    }
 
    #wrapper:focus {
        outline: none;
        }

#wrapper p {
    font-size: 10em;
    margin: 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-shadow:     rgba(0,0,0,0.1) 0 20px 80px;
    -webkit-transition: -webkit-transform .1s ease-in; /* only WebKit because of performance */
    }

/* Hover ------------------------------------------------------ */
#wrapper:hover p {
    color: hsla(0,0%,0%,0);
 
    -webkit-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
       -moz-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
        -ms-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
         -o-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
            transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
 
    -webkit-transition: -webkit-transform .1s ease-out; /* only WebKit because of performance */
    }
#wrapper:hover p:nth-child(1) {
    font-size: 9em;
    text-shadow:     #fff 0 0 10px,
                    #fff 0 4px 3px, #ddd 0 9px 3px,  #ccc 0 12px 1px,
                    rgba(0,0,0,0.2) 0 14px 5px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,100,0.2) 0 15px 80px;
    text-indent: 0.3em;
    }
#wrapper:hover p:nth-child(2) {
    font-size: 10em;
    text-shadow:     #fff 0 0 1px,
                    #eee 0 4px 3px, #ddd 0 9px 3px,  #ccc 0 12px 1px,
                    rgba(0,0,0,0.2) 0 14px 3px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,100,0.2) 0 15px 80px;
    }
#wrapper:hover p:nth-child(3) {
    font-size: 11em;
    text-shadow:     #fff 0 0 2px,
                    #fff 0 4px 5px, #ddd 0 9px 5px,  #ccc 0 12px 10px,
                    rgba(0,0,0,0.2) 0 14px 5px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,100,0.2) 0 15px 80px;
    }

/* Middle ------------------------------------------------------ */
#wrapper p:nth-child(2):hover {
    text-shadow:     #fff 0 -5px 1px,
                    #eee 0 -1px 3px, #ddd 0 4px 3px,  #ccc 0 7px 1px,
                    rgba(0,0,0,0.2) 0 15px 5px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,0,0.2) 0 15px 80px;
    }
 
#wrapper p:nth-child(2):active {
    text-shadow:     rgba(0,0,0,0.2) 0 14px 5px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,0,0.2) 0 15px 80px;
    }
/*effand bocah nozh*/
#wrapper p::selection {
    background-color: red;
    }
Silahkan dicomot dan dimodifikasi gan, jangan lupa Es Degan nya di tinggalin dibawah biar tambah Brrrr ..
Ref : http://simurai.com

Saturday, July 7, 2012

Cara Membuat List Styles Dengan CSS
Cara Membuat List Styles Dengan CSS
Cara Membuat List Styles Dengan CSS ~ Tutorial Membuat List Menu Hover berikut adalah tutorial CSS untuk membuat List Menu Hover, triks ini saya dapat dari http://designshack.net anda bisa mencobanya dan tentunya tetap untuk mampercantik blog kita.

Tutorial Membuat List Menu Hover sudah banyak juga diterangkan di blog-blog lain sehingga jika disini beda bisa anda terapkan di blog anda.

Tidak ada salahnya juga anda memodifikasinya agar lebih jan jos tenan.

Oke sekarang anda bisa mencobanya, berikut ini script yang bisa anda pakai dan modifikasi :
HTML :
<div>
  <h2>List Hover</h2>
  <ul>
    <li><a href="#">Demo 1</a></li>
    <li><a href="#">Demo 2</a></li>
    <li><a href="#">Demo 3</a></li>
    <li><a href="#">Demo 4</a></li>
    <li><a href="#">Demo 5</a></li>
  </ul>
</div>​
CSS :
div {
  width: 200px;
}

h2 {
  font: 400 40px/1.5 Helvetica, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
  border-bottom: 1px solid #ccc;
}

li:last-child {
  border: none;
}

li a {
  text-decoration: none;
  color: #000;
  display: block;
  width: 200px;

  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
}

li a:hover {
  font-size: 30px; color:#026aba;
  background: #f6f6f6;
}​
Selesai sudah agan-agan, silahkan dicomot dan jangan lupa tinggalkan baunya dibawah untuk mempererat jalinan blogger Indonesia.

Demonya : Klik [+]

Tutorial Membuat Text Shadow menggunakan CSS
Tutorial Membuat Text Shadow menggunakan CSS 
Cara Membuat Text Shadow Dengan CSS ~ Tutorial Membuat Text Shadow menggunakan CSS lanjutan tutorial sebelumnya tentang text shadow, Kali ini untuk text shadow lanjutan untuk tambahan koleksi text shadow yang saya punya dan saya share saja agar temen-temen tahu bagi yang belum tahu dan yang sudah tahu harap di buat baca-baca saja, hee..

Tutorial Membuat Text Shadow menggunakan CSS ini saya adopsi dari tutorial dari website luar negeri yang menurut saya perlu saya share untuk pengetahuan kita semua.

Sekarang ayo kita lihat beberapa demonya :



CSS :
.shadow  { position:relative; display:block; color:#fff; }
.shadow span { position:absolute; display:block; top:0px;  }
.shadow:before { display:block; padding:1px; content: attr(title); color:#666;  } 
 HTML :
<p class="shadow" title="This is white text, on a white background. Yet with CSS Drop Shadows, you can read this, because of the black text-shadow."><span>This is white text, on a white background. Yet with CSS Drop Shadows, you can read this, because of the black text-shadow.</span></p>
Diatas hanya untuk contoh saja.

Sekarang Kita Belajar Membuat text Shadow Dengan CSS


1. Double Text
Belajar Membuat text Shadow Dengan CSS
Double Text Shadow
Script : text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);










2. Close and Heavy
Membuat Text Shadow Dengan CSS
Text Shadow  Close and Heavy
Script : text-shadow: 0px 4px 3px rgba(0,0,0,0.4),             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);









3. Text Shadow 3D
Membuat Text Shadow Dengan CSS 3d
Text shadow 3 dimensi (3D)
Script : text-shadow: 0 1px 0 #ccc,   0 2px 0 #c9c9c9,  0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa,  0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3),  0 3px 5px rgba(0,0,0,.2),   0 5px 10px rgba(0,0,0,.25),  0 10px 10px rgba(0,0,0,.2),  0 20px 20px rgba(0,0,0,.15);




4. Text Shadow Glowing
Membuat Text Shadow Dengan CSS
Text Shadow Glowing
Script : text-shadow: 0px 0px 6px rgba(255,255,255,0.7);











5. Text Soft Embos
Membuat Text Shadow Dengan CSS emboss
Membuat Text Shadow Dengan CSS
Script : color: rgba(0,0,0,0.6);
            text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
            0px -5px 35px rgba(255,255,255,0.3);









6. Text Shadow Down
Membuat Text Shadow Dengan CSS
Shadow and down
Script : text-shadow: 0px 3px 0px #b2a98f,
                 0px 14px 10px rgba(0,0,0,0.15),
                 0px 24px 2px rgba(0,0,0,0.1),
                 0px 34px 30px rgba(0,0,0,0.1);



Oke kawand, diatas 6 tutorial CSS untuk membuat efek shadow dan masih bisa kamu modifikasi lagi. Tutorial sejenis akan saya lanjutkan ditutorial part ke-2.
Coming Soon...

Thursday, July 5, 2012

Membuat Menu Blog Hover Dengan CSS
Membuat Menu Blog Hover Dengan CSS
Membuat Menu Blog Hover Dengan CSS ~ Tutorial Cara Membuat Menu di Blog ini bisa kita pakai di blog kita sebagai variasi untuk mempercantik blog kita. Menu yang ada diatas blog bisa kita tambahi script ini untuk memperindah blog kita tentunya.

Anda bisa membuat tampilannya dengan sedikit perubahan mungkin menambahi Hover, Text Shadow dan Box Efek shadow dengan CSS.

Anda bisa melihat contohnya di bawah ini.

  • Button 1
  • Button 2
  • Button 3
  • Button 4
  • Button 5
Anda bisa melihat demonya diatas dan anda bisa memodifikasi nya agar sesuai dengan template blog Anda.

Script nya bisa anda copy dibawah ini
Embed Script CSS
ul {
  display: table;
  width: 400px;
}
li {
  display: table-cell;
  width: 20%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
}
ul:hover li {
  width: 15%;
}
li:hover {
  width: 40% !important;
  opacity: 0.7;
}
ul li:nth-of-type(1) { background: #FF4C4C; }
ul li:nth-of-type(2) { background: #FFBF49; }
ul li:nth-of-type(3) { background: #444444; }
ul li:nth-of-type(4) { background: #6FDC6F; }
ul li:nth-of-type(5) { background: #3AADFE; }
 HTML
 <ul>
        <li>Button 1</li>
        <li>Button 2</li>
        <li>Button 3</li>
        <li>Button 4</li>
        <li>Button 5</li>
</ul>
Langsung Praktek Gan. .


Wednesday, July 4, 2012

Membuat Text 3D dengan CSS [3 Dimensi] - Text 3 Dimensi dengan CSS ini adalah kita memanfaatkan shadow yang terkombinasi sekian rupa sehingga bisa membentuk gambar / tulisan 3D. Banyak hal yang bisa dilakukan jika kita menggunakan fasikitas CSS ini, dari edit untuk box hingga Text.

Membuat Text 3D dengan CSS [3 Dimensi]
Membuat Text 3D dengan CSS [3 Dimensi]
Oke Sekarang kita terapkan code CSS nya :

Embed Script :
h1 {
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}
Dan sekarang kamu lihat hasilnya seperti berikut ini :

3D TEXT CSS

Hmm, gimana hasilnya lumayan kan, mangtabs jaya atau jan joss tanan, hee..
Oke sekian dulu turorial kali ini, lanjut lagi kapan-kapan. Selamat mencobanya.

Tuesday, July 3, 2012

Tutorial Membuat Bingkai Border dengan CSS - Bingkai dengan CSS di blogspot ini menggunakan fungsi border-corner yang ada dalam CSS. Bingkai Border ini didalamnya bisa kita isi text maupun Foto, anda tinggal mengisi dengan tulisan atau dengan URL Image anda. Sesuaikan dengan kebutuhan saja.

Membuat Bingkai Border dengan CSS bisa kalian lihat contoh imagenya dibawah ini :

Membuat Bingkai Border dengan CSS
Membuat Bingkai Border dengan CSS
















Seperti itulah contohnya dari Membuat Bingkai Border dengan CSS 

DEMO :


TEXT silahkan Anda disini, silahkan anda isi misalnya "Membuat Bingkai Border dengan CSS" atau yang lain juga bisa. Bisa dijadikan modifikasi untuk template blog kamu, tinggal gimana kamu mengkreasikan ini. Membuat Bingkai Border dengan CSS ada 4 kertas dipojok yang digunakan untuk mengapit pigora ini, seperti ditempeli dengan Kertas.


1. HTML
<div class="tucked-corners top-corners">
    <span class="tucked-corners bottom-corners">
             Textmu atau Url Image    </span>
</div>
2. CSS
div.tucked-corners {
    background: #f6f6f6;
    height: 380px;
    margin: 50px auto;
    padding: 10px;
    position: relative;
    width: 580px;
    -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
       -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
            box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
}
span.tucked-corners {
    background: #999;
font-family: Arial, Helvetica, Sans-serif;
    font-size:14px;
    color:#FFF;
    display: block;
    height: 380px;
    position: relative;
    width: 580px;
    -webkit-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
       -moz-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
            box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
}
/* Top Corner Effect */
.top-corners:after,
.top-corners:before {
    background: #e6e6e6;
    content: '';
    height: 50px;
    position: absolute;
    top: -25px;
    width: 100px;
    z-index: 10;
    -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
       -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
            box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
}
.top-corners:after {
    left: -50px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
.top-corners:before {
    right: -50px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
/* Bottom Corner Effect */
.bottom-corners:after,
.bottom-corners:before {
    background: #e6e6e6;
    content: '';
    height: 50px;
    position: absolute;
    bottom: -25px;
    width: 100px;
    -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
       -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
            box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
}
.bottom-corners:after {
    left: -50px;
    -webkit-transform: rotate(-135deg);
       -moz-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
         -o-transform: rotate(-135deg);
            transform: rotate(-135deg);
}
.bottom-corners:before {
    right: -50px;
    -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
         -o-transform: rotate(135deg);
            transform: rotate(135deg);
}
Oke sekian dulu cara membuat Bingkai dengan CSS, tunggu tutorial selanjutnya.

Salam Blogger Donomulyo.

Monday, July 2, 2012

Membuat Slider Otomatis Dengan JQuery - Cara membuat Slider otomatis menggunakan Jquery ini bisa anda manfaatkan untuk mempercantik Blog Anda. Slider Otomatis dengan J-Query dibawah ini mungkin cukup agag semrawut demonya, yang bisa anda lihat dibawah.

Berikut ini contoh Membuat Slider Otomatis Dengan JQuery:




Oke anda sudah melihat contohnya, jika anda tertarik silahkan ikuti caranya di bawah ini.

1. HTML

<div id="gallery">
    <a href="#" class="show">    <img src="images/flowing-rock.jpg" alt="Flowing Rock" alt="" title="" width="580" height="360" rel="<h3>Flowing Rock</h3>You can put html element
    inside the REL attribute."/></a>
    </a>
    <a href="#">        <img src="images/grass-blades.jpg" alt="Grass Blades" alt="" title="" width="580" height="360" rel="<h3>Grass Blades</h3>description"/>
    </a>
     ......    ......
    ......
   <div class="caption"><div class="content"></div></div>/div>
<div class="clear"></div>
2. CSS
#gallery {
    position:relative;
    height:360px
}
    #gallery a {
        float:left;
        position:absolute;
    }
   
    #gallery a img {
        border:none;
    }
   
    #gallery a.show {
        z-index:500
    }

    #gallery .caption {
        z-index:600;
        background-color:#000;
        color:#ffffff;
        height:100px;
        width:100%;
        position:absolute;
        bottom:0;
    }

    #gallery .caption .content {
        margin:5px
    }
   
    #gallery .caption .content h3 {
        margin:0;
        padding:0;
        color:#1DCCEF;
    }
 3. Javascript
$(document).ready(function() {    
   
    //Execute the slideShow
    slideShow();

});

function slideShow() {

    //Set the opacity of all images to 0
    $('#gallery a').css({opacity: 0.0});
   
    //Get the first image and display it (set it to full opacity)
    $('#gallery a:first').css({opacity: 1.0});
   
    //Set the caption background to semi-transparent
    $('#gallery .caption').css({opacity: 0.7});

    //Resize the width of the caption according to the image width
    $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
   
    //Get the caption of the first image from REL attribute and display it
    $('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
    .animate({opacity: 0.7}, 400);
   
    //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
    setInterval('gallery()',6000);
   
}

function gallery() {
   
    //if no IMGs have the show class, grab the first image
    var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));
   
    //Get next image caption
    var caption = next.find('img').attr('rel');
   
    //Set the fade in effect for the next image, show class has higher z-index
    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);

    //Hide the current image
    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');
   
    //Set the opacity to 0 and height to 1px
    $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });
   
    //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
    $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
   
    //Display the content
    $('#gallery .content').html(caption);
       
}
 Selesai, tutorial Membuat Slider Otomatis Dengan JQuery silahkan Anda coba semoga berhasil. ^_^

Sunday, July 1, 2012

CSS 3 Animasi Lingkaran Zoom - Efek Zoom Animation dengan CSS 3 merupakan tutorial yang saya bagikan di awal bulan Juli 2012 ini. Tidak banyak yang bisa saya bagikan, jadi silahkan di analisis sendiri code beserta scriptnya.


DEMO :
Ganti Disini
CSS 3 Animasi Lingkaran Zoom Lucu ya lingkarannya bisa berputar dan Zooming otomatis seperti Demo diatas, kalian bisa lihat bahwa lingkaran tersebut melakukan efek rotate dan skala secara otomatis.


CSS3 ini masih bisa anda kembangkan, silahkan anda manipulasi sesuka anda.
Script Embed
<style type="text/css">
#contenido{
width:700px;
margin:0 auto;
padding:50px;
position:relative;
background:#FFF;
}
.circulo {
display:table-cell;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
height:100px;
width:100px;
background:#dedede;
text-align:center;
vertical-align:middle;
}
.circulo span{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
@-webkit-keyframes rotar
{
0% {-webkit-transform:scale(1) rotate(0deg);}
50% {-webkit-transform:scale(1.5) rotate(180deg);}
100% {-webkit-transform:scale(1) rotate(360deg);}
}
@-moz-keyframes rotar
{
0% {-moz-transform:scale(1) rotate(0deg);}
50% {-moz-transform:scale(1.5) rotate(180deg);}
100% {-moz-transform:scale(1) rotate(360deg);}
}
.circulo
{
-webkit-animation:rotar 4s infinite;
-moz-animation:rotar 4s infinite;
}
</style>
<div id="contenido">
<div class="circulo"><Ganti Disini</div>
</div>
Oke Selamat Mencobanya.
Salam Blogger Donomulyo.