Posts

Showing posts with the label Animasi CSS

Trik Membuat Animasi Cortana Windows 10 CSS3

Image
Trik Membuat Animasi Cortana Windows 10 CSS3 ~ pada tutorial kali ini saya membahas yaitu trik membuat animasi cortana. Inspirasi membuat animasi ini saya dapatkan dari windows 10 yang terlihat sangat menakjubkan, Cortana merupakan sebuah system bantuan dari windows 10 yang bisa berbicara layaknya seorang manusia. Ok, dalam pembuatan animasi ini kita hanya membutuhkan bantuan dari sintak CSS3 yaitu   animation dan @keyframes , disini saya memberikan efek zoomin dan zoomout dalam pembuatan animasi cortana ini. Nah, mari teman-teman perhatikan langkah-langkah pembuatannya dibawah ini : 1. Langkah Pertama, buat dahulu sintak html seperti berikut atau teman bisa copas langsung : DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Animasi Cortana Windows 10</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="cortana"> <span><...
Post a Comment
Location: Ubud, Gianyar, Bali, Indonesia
Read more

Membuat Animasi Loading Keren Google

Image
Membuat Animasi Loading Keren Google  ~ Pada Tutorial kali ini saya membahas bagaaimana cara membuat animasi loading layaknya google. Nah tutorial kali ini kita akan menggunakan properti dari CSS3 untuk pembuatan animasi tersebut yaitu kita menggunakan animation dan @keyframes.   Animasi Loading Keren Google ini nantinya akan bergerak naik turun seperti ombak. Ok Langsung  saja teman-teman perhatikan langkah pembuatan loading dibawah : 1. Langkah yang pertama silahkah buat dulu kode htmlnya seperti berikut atau langsung saja copas ke text editor : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Animasi Spinner With CSS3</title> <link rel="stylesheet" href="Assets/css/style.css"> </head> <body> <h3>Animasi Loading Keren Google</h3> <div class="circle"> <span></span> <span></span> <span></span> ...
Post a Comment
Read more

Membuat Menu Sidebar Keren

Image
     Tutorial Kali ini saya memberikan teman-teman sebuah tutorial yaitu Membuat Menu Sidebar Keren dan beserta Effect Animasinya . Menu Sidebar merupakan sebuah menu navigasi yang sama seperti menu lainnya tetapi penempatan menu ini lebih cenderung di bagian kiri atau kanan dari content sebuah website.      Nah, ditutorial ini saya hanya menggunakan sintak html5 dan css3 untuk pembuatanya. Pada bagian animasi saya menggunakan kode dari CSS3 yaitu keyframes, fungsi dari keyframes ini sendiri ialah untuk mengatur waktu /timming sebuah animasi yang akan kita buat nantinya dan juga menggunakan sintak animation untuk penamaan animasi tersebut. Ok langsung saja perhatikan kode dibawah ini : 1. Langkap pertama silahkan teman-teman buat terlebih dahulu sintak htmlnya, seperti berikut : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sidebar Menu</title> <link rel="stylesheet" href="Assets/css/s...
Post a Comment
Read more

Membuat Sticky Menu dengan HTML CSS dan JQuery

Image
Membuat sticky menu dengan html,css dan jquery.  Pada tutorial kali ini saya ingin membagikan sebuah tutorial yaitu cara membuat sticky menu dengan menggunakan Html,Css dan Jquery. Apa sih sticky menu ?? oke saya akan menjelaskan apa itu sticky menu ialah sebuah animasi pada navigasi yang digunakan agar navigasi berada paling atas saat scrollbar di scroll ke bawah. Ok langsung saja teman-teman perhatikan kode dibawah ini : 1. Langkah pertama silahkan teman-teman buat terlebih dahulu sintak htmlnya seperti berikut : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Membuat Sticky Menu dengan Jquery dan CSS</title> <link rel="stylesheet" href="Assets/css/style.css"> </head> <body> <header> <h1>Sticky Menu</h1> </header> <nav> <div class="container"> <div class="brand"><img src="Assets/img/logo3.png...
Post a Comment
Location: Ubud, Gianyar, Bali, Indonesia
Read more

Trik Membuat Animasi Down HTML CSS3

Image
Tips Membuat Animasi Down HTML dan CSS3 ~Pada tutorial kali ini saya ingin membagikan sebuah tutorial yaitu mengenai Tips membuat animasi menggunakan CSS3 , di css3 ini saya banyak menggunakan kode animasi @keyframes dan animation beserta durasinya yang nantinya bisa memunculkan sebuah animasi pada website teman-teman. Animasi Down ini berarti animasi yang turun dari atas ke bawah, Ok langsung saja teman-teman perhatikan tahap-tahapnya : 1. Pertama teman-teman buat dahulu tag html-nya, seperti dibawah ini : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Membuat Animasi Turun</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="title"> <h2 class="caption">Animasi Down CSS3</h2> </div> <div class="bounce"> <img src="img/bg1.jpg" alt="contoh gambar" class=...
Post a Comment
Read more