Belajar desain sebuah kartun menggunakan html dan css . Pada tutorial ini saya menggunakan kartun doraemon sebagai modelnya. HTML < div class = "doraemon" > < div class = "head" > < div class = "face" > </ div > < div class = "eye-left" > </ div > < div class = "eye-right" > </ div > < div class = "nose" > </ div > < div class = "nose-line" > </ div > < div class = "mustache" > < div class = "left" > </ div > < div class = "right" > </ div > </ div > </ div > < div class = "mouth" > </ div > < div class = "necklace" > < div class = "bell" > < div > </ div > ...

Baca selengkapnya

Apa itu Parallax Dikutip dari Wikipedia bahasa Indonesia, ensiklopedia bebas. Paralaks , atau lebih tepatnya paralaks gerak (bahasa Yunani: παραλλαγή (parallagé) ) adalah perubahan kedudukan sudut dari dua titik diam, relatif satu sama lain, sebagaimana yang diamati oleh seorang pengamat yang bergerak. Secara sederhana, paralaks merupakan pergeseran yang tampak dari suatu objek (titik 1) terhadap latar belakang (titik 2) yang disebabkan oleh perubahan posisi pengamat. Sumber dan penjelasan lebih lengkap : https://id.wikipedia.org/wiki/Paralaks Parallax biasanya digunakan pada bagian atas dari konten HTML atau biasa disebut konten header , dan juga biasa digunakan pada konten block agar memberikan tampilan lebih. Contoh HTML < div class = 'parallax parallax-1' > < header class = 'header' > < h1 > hello world </ h1 > </ header > </ div > Contoh CSS .parallax-1 { height : 100vh ; background : #333 ur...

Baca selengkapnya

Tutorial CSS - perbedaan padding dan margin Perbedaan padding dan margin pada css, tutorial kali ini kita akan membahas tutorial ringan mengenai apa perbedaan padding dan margin pada css. Padding digunakan untuk memberikan ruang pada element yang membungkusnya atau memberikan ketebalan bidang element, sedangkan margin digunakan untuk memberikan ruang antara element satu dengan yang lainnya. Artikel ini sengaja saya buat karena adanya pencarian yang masuk di blog ini dengan keyword perbedaan padding dan margin. Ilustrasi ringan untuk memahami perbedaan padding dan margin adalah, anda mempunyai rumah yang ada pagarnya, nah padding itu ibarat jarak antara pagar dengan rumah anda. Sedangkan ilustrasi untuk margin adalah anda mempunyai tetangga dan antara rumah anda dengan rumah tetangga anda mempunyai selokan sebagai pembatas, nah selokan tersebut adalah kiasan untuk margin. Sudah pahamkan apa perbedaan padding dengan margin, jika belum paham silahkan dibaca lagi dari awal. Jika kura...

Baca selengkapnya

CSS Spin - Membuat Baling-baling Menggunakan CSS Kali ini ane mau share trik CSS Spin / rotate, seperti artinya CSS Spin Adalah CSS berputar, tuturial kali ini adalah salah satu contoh dari dari dasar membuat CSS Animation, dan bisa di kembangkan lebih dari yang saya share pada tutorial ini CSS .Spinners { background-color : rgb (110, 133, 195); border : 5px solid rgba (155, 167, 167, 0.9); border-radius : 50px ; box-shadow : 0 0 35px #f5b000 ; width : 10px ; height : 120px ; margin : 0 auto; -moz-animation : spin . 6s infinite linear; z-index : 2500 ; -webkit-animation : spin . 2s infinite linear; position : relative; } .Spinners-hold { background-color : rgb (191, 191, 183); border-bottom : 5px solid rgba (250, 251, 252, 0.9); border-top : 5px solid rgb (251, 0, 0); border-left : 5px solid rgb (47, 27, 27); border-right : 5px solid #2fff00 ; border-radius : 50px ; box-shadow : 0 0 15px #7A7C7E ; width...

Baca selengkapnya

CSS Zig Zag, Belajar CSS Zig Zag, Tips Belajar CSS Zig Zag, CSS Zig Zag Border, CSS Zig Zag Pattern, Tips Belajar CSS, Belajar CSS, Cara CSS Info : maaf artikel ini sedang diperbaiki Back to Home

Baca selengkapnya

Cara Menampilkan Jam, Cara Menampilkan Jam diblog dengan Menggunakan HTML, Membuat jam pada blog, Cara Memasang Jam di Blog, membuat jam tanpa program Cara Menampilkan Jam diblog dengan Menggunakan HTML - Tutorial Kali ini saya ingin share Trik atau Cara Membuat Jam Analog Menggunakan CSS, JS dan HTML. Proses Pembacaan Detik, Menit dan Jam akan Menyesuaikan dengan Perangkat yang kita gunakan. Trik Menampilkan Jam di blog yang akan dibahas kalin ini sangat mudah diikuti dan di modifikasi. Silahkan pelajari Tutorialnya ya Bos... HTML < ul id = "BGjam" > < li id = "detik" > </ li > < li id = "jam" > </ li > < li id = "menit" > </ li > </ ul > CSS #detik , #menit , #jam { position : absolute; width : 20px ; height : 600px ; top : - 105px ; left : 195px ; } * { margin : 0 ; padding : 0 ; } #detik { background : url (https://blogger.googleusercontent.com/...

Baca selengkapnya

HTML < div id = "ganteng" > </ div > CSS /* CSS Code */ #ganteng { width : 100px ; height : 100px ; background-color :black; border-radius : 50% ; position : relative; -webkit-animation-name : putar; -webkit-animation-duration : 10s ; -webkit-animation-iteration-count : 10 ; -webkit-animation-direction : reverse; animation-name : putar; animation-duration : 10s ; animation-iteration-count : 10 ; animation-direction : reverse; } @ keyframes putar { 0% { background-color :red; left : 0px ; top : 0px ;} 25% { background-color :yellow; left : 200px ; top : 0px ;} 50% { background-color :blue; left : 200px ; top : 200px ;} 75% { background-color :green; left : 0px ; top : 400px ;} 100% { background-color :red; bottom : 100px ; top : 0px ;} } <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> ...

Baca selengkapnya

Info : Artikel ini dalam tahap perbaikan, maaf atas ketidaknyamannya, silahkan untuk membuka artikel lainnya.

Baca selengkapnya

Info : Artikel ini dalam tahap perbaikan, maaf atas ketidaknyamannya, silahkan untuk membuka artikel lainnya.

Baca selengkapnya