Css 3 Linear gradien=memberikan warna secara lurus Bukan property css3, melainkan value background-image Sintaks : background-image/background : linear-gradient(warna awal, warna akhir); Multiple color:Bisa lebih dari 2 warna tinggal tambah niai warnanya. Linear-gradient (sudut / arah(to bottom, to top, to left, to right), warna awal,warna akhir) Color stop Background-image : linear-gradient(to right, red 63%, greem 80%); Radial gradients(melingkar) Sintaks : background-image/background : radial-gradient(warna awal, warna akhir); Bisa menggunakan multiple color dan color stop juga Sintaks: Radial-gradient ( Tipe jangkauan at posisi-y posisi-x, Warna-1, Warna-2, ,,,, Warna-n); Tipe ada 2 : ellipse dan circle Jangkauan: closest-corner(sudut terdekat) Closest-side(sisi terdekat) Farthest-corner(sudut terjauh) Farthest-side(sisi terjauh) Background-image : radial-gradient(circle closest-side, red, blue); Posisi x(px)=horizontal Left, center, right Posisi-y(px)=vertikal Top, center, bottom

Opacity(transparansi) Body { Background-image: url(bg.png); } Div { Width: 300px; Height: 300px; Background-color: #f60; Opacity: .25(0,25); } RGBA AND HSLA Rgba()=red green blue alpha//hsla() Background-color: rgba(255,102,0,.8); hsla(24,100%,63%,0.5); ANIMATION(kumpulan frames) Animation : [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state] @keyframes animasiKotak { 0% { Property css; } 50% { Property css; }

100% { Property css; } } .kotak { Width: 200px; Height: 200px; Background-color: salmon; Transition: 2s ease all; } .kotak:hover { Animation: animasiKotak 2s ease; }

@keyframes animasiKotak { 0% { Width: 200px; } 50% { Width:500px; Height:200px; } 100% { Width: 500px; Height: 500px; } }

Iteration-count | infinite Animation: animasiKotak 2s ease 3 infinite; Direction Normal | reverse | alternate | alternate-reverse Animation: animasiKotak 2s ease 3 infinite normal; Fill-mode None | forwards | backwards | both Animation: animasiKotak 2s ease 3 infinite normal, forwards; Play-state Running | paused Animation: animasiKotak 2s ease 3 infinite normal, forwards, running/paused;

Border-radius(sekira bulat) Div { Width: 300px; Height: 300px; Background-color: salmon; Background-image: url(); border-radius: 0 50% 50% 50%; Text-align: center; Line-height: 300px; }

BOX SHADOW <x-offset> Bisa tambah lagi 2 value <x-offset> <spread>

Div { Width: 300px; Height: 300px; Background-color : #ddd; Margin: 50px auto; Box-shadow: 5 px 5px 5px rgba(0,0,0,.75); } Div { Width: 300px; Height: 300px; Background-color : #ddd; Margin: 50px auto; Box-shadow: 0px 0px 0px 10px rgba(0,0,0,.75); } Div :hover { Box-shadow: 0px 80px 10px -40px rgba(0,0,0,.15); Margiin-top: 40px; } Div { Width: 300px; Height: 300px; Background-color : #ddd; Margin: 50px auto; Box-shadow: inset 0 0 15px 5px rgba(0,0,0,.75); } Box-shadow Multiple shadow

Div { Width: 300px; Height: 300px; Background-color : #ddd; Margin: 50px auto; Box-shadow: 5 px 5px 5px rgba(0,0,0,.75), -5 px -5px 5px rgba(0,0,255,.75), ; } Div { Width: 300px; Height: 300px; Background-color : #ddd; Margin: 50px auto; Box-shadow: 0 0 0 5px red, 0 0 0 10px green, 0 0 0 20px orange ; Border-radius: 50%; }

Font-face Fontsquirell.com Font-family Font-family: “arial narrow”, arial, sans-serif; <Style> @font-face { Font-family: “Alex Brush”; Src: url(‘AlexBrush-Regular.ttf’) format(‘truetype’); } h1 { font-size: 100px; text-align: center; font-family: “Alex Brush”, arial; } Text-shadow <x-offset> <style> h1 { font-size: 100px; text-align: center; font-family: arial; text-shadow: 5px 5px 10px green, -5px-5px 10px red; }

hello word

Transform 2d & 3d Transform : ; Fungsi = scale(memperbesar/memperkecil) Rotate(memutar) Skew(membuat condong/miring) Translate(mengubah posisi)