Posts

Showing posts from September, 2016

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

Mempercantik Tampilan Table Dengan CSS

Image
    Mempercantik tampilan sebuah table dengan CSS , agar tampilan table menjadi lebih elegan dari yang sebelumnya tampilannya masih biasa. Jadi CSS disini berperan sebagai mempercantik tampilan sebuah table dengan sedikit sentuhan dari CSS. Ok Langsung saja kita praktekan kodingnya dan silahkan teman-teman perhatikan langkah dibawah ini : 1. Langkah yang pertama ialah buat dahulu tag html dan kode table dengan menggunakan html terlebih dahulu. Seperti berikut : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tabel</title> <link rel="stylesheet" href="style.css"> </head> <body> <br> <br> <center><h1>Mempercantik Table dengan CSS</h1></center> <br> <br> <!-- ini merupakan kode table html --> <table> <thead> <tr> <th>No</th> <th>Nama Siswa</th> <th...
Post a Comment
Read more