BisaSabi

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 {         transfo...

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...

 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%)             gray...

 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 ...

<! 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 paramete...