BisaSabi

Animasi CSS adalah fitur CSS yang memungkinkan Anda menganimasikan perubahan dalam satu atau beberapa style elemen. <! DOCTYPE html > < html lang = "en" >   < head >     < meta charset = "UTF-8" />     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" />     < title >Document</ title >     < style >       .kotak {         width : 100 px ;         height : 100 px ;         background-color : red ;       }             .kotak:hover {         animation : animasi 2 s ;       }       @keyframes animasi {         From{ width : 100 px ;}         to{ width : 500 px ; height : 500 px ;}       }     </ style >   </ head >   < body >       < div class = "kotak" ></ div >   </ body > </ html > Tulis property CSS nya lalu beri nama animasi yang kalian inginkan lalu beri durasi selama 2 detik .kotak:hover {         animation :

CSS Transition atau Transisi adalah Efek Transis yang memungkinkan sebuah elemen secara bertahap berubah dari satu gaya ke yang lain. <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title >Document</ title >     < style >         .kotak {         width : 100 px ;         height : 100 px ;         background-color : red ;         transition : 1 s ;        }         .container {         height : 400 px ;         width : 100 px ;         border : 0.1 px solid black ;        }         .container:hover .kotak {         transform : rotate ( 180 deg );         margin-top : 300 px ;         background-color : yellow ;        }     </ style > </ head > < body >     < div class = "container" >         < div class = "kotak" ></ div

CSS transform adalah salah satu yang terpenting yang harus di pahami bagi kalian yang ingin membuat efek animasi dengan css3. kalian nantinya bisa membuat efek memutar element, membuat element bergerak dan sebagainya. Ini adalah contoh pada saat kalian menggunakan transform, sisanya silahkan kalian kreasikan. <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title >Document</ title >     < style >         div {         width : 200 px ;         height : 200 px ;         background-color : red ;         margin : 100 px auto ;         transform : scale ( .5 );         transition : 1 s ;        }         div :hover {         transform : scale ( -2 , 1 );        }             /* Transform             scale(angka), scalex(angka), scaley(angka)             rotate(angka), rotatex(deg), r

 Filter CSS adalah untuk melakukan berbagai efek terhadap suatu elemen biasanya gambar, efek yang bisa dilakukan properti filter misalnya: saturasi warna, brightness, contrast, efek blur, grayscale, sepia, drop-shadow, invert, hue-rotate, opacity. <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title >Document</ title >     < style >         img {         filter : brightness ( 300 % ) ;        }         /* Filter             brightness(angka%)             constrast(angka%)             blur(angka px)             saturate(angka%)             grayscale(angka%)             sepia(angka%)             hue-rotate(angka deg)             invert(angka%)             opacity(angka%)             drop-shadow(angka%)             */     </ style > </ head > < body >     < im

 Font Face adalah Font external pada CSS merupakan font (jenis huruf) yang diinput di luar sistem yang digunakan untuk menata bentuk tulisan pada halaman web. Ada beberapa cara untuk mempergunakan font contohnya sebagai berikut. 1. Google Font https://fonts.google.com/ Perlu diperhatikan jika kalian ingin menggunakan font yang berasal dari google kalian harus terhubung ke internet karna pengambilan font ini secara eksternal. Add untuk mentukan font yang diinginkan Salin link yang nantikan akan digunakan untuk menyambungkan antara css dengan server google. Kalian juga harus salin sintaks ini yang nantinya akan di paste kedalam css Yang terakhir download lalu kalian ekstrak satu file dengan file htmlnya. <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title >Document</ title >     <

<! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title >Document</ title >     < style >         div {             width : 500 px ;             height : 250 px ;             margin : 100 px auto ;             background-image : linear-gradient ( red , rgb ( 0 , 34 , 255 ), green )         }     </ style > </ head > < body >     < div ></ div > </ body > </ html > Linear Gradient adalah warna gradien yang memiliki bentuk garis garis sejajar dengan arah tertentu. background-image : linear-gradient ( red , rgb ( 0 , 34 , 255 ), green ) Disini juga bisa menggunakan multiple color Degree Degree adalah untuk menentukan arah menggunakan angka derajat. jika kalian ingin berlawanan arah dengan angka derajat maka ditambahkan saja min setelah angka

<! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title >Document</ title >     < style >         div {             width : 200 px ;             height : 200 px ;             background-color : red ;             margin : 50 px auto ;             box-shadow : -10 px 10 px 5 px hsla ( 100 , 100 % , 50 % , 0.5 );         }     </ style > </ head > < body >     < div ></ div > </ body > </ html > Box Shadow adalah property CSS yang memungkinkan untuk menambahkan bayangan pada sebuah elemen HTML, seperti kotak atau teks. Pada parameter pertama datang munculnya bayangan secara horizontal, parameter ketiga munculnya bayangan secara vertical, paramerter ketiga tingkat pudar banyangan dan yang terakhir adalah parameter warna. box-shadow : -10

<! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title >Document</ title >     < style >         div {             width : 300 px ;             height : 300 px ;             background-color : red ;             margin : auto ;             opacity : 0.5 ;         }     </ style > </ head > < body >     < div ></ div > </ body > </ html > Opacity opacity : 0.5 ; opacity: memudar kan elemen html Opacity didalam opacity < body >     < div class = "pertama" >         < div class = "kedua" ></ div >     </ div > </ body > < style >         .pertama {             width : 300 px ;             height : 300 px ;             background-color : red ;             margin : auto ;