Back

  1. 1.Using HSL, Saturation(100% full-block,0% transparent),Lisht(100% putih,0% hitam,50 % normal).Gunain buat bikin shade

  2. Menggunakan gradient(warna yg berubah secara bertahap dari 35 degree mulainya,mulai dari volor red sampai blue

  3. Pola linear berikut berulang. berpaa derajat tampilnya(cek kemiringan),terus pasangan (warna stop saat berapa px).kalau di px sama ada warna beda langsung ganti. selain itu nge blend

  4. Background juga bisa pakai pattern yg didownload pakaai url()

  5. nge perbesar pake transform:scale(x)

  6. 6.Kalau teks ini dihover jadi 1.5x lipat nya

  7. 7.Nge skew(dijadiin kek jajargejang)thdp sb-x:(note:24 deg skew ke kiri,-24 skew ke kanan

  8. 8.Nge skew thdp sb:Y(y>0 entar dari kiri ke kanan turun,y kurang dari0 dari kiri ke kanan naik)

  9. Ngegambar bulan sabit(offset-x 25px,offset-y 10 px, blur dan spread radius 0

  10. Ngegambar hati(::before:ngegambar sebelum si elemen.::after:menggambar setelah si elemen(derajaat rotasi sama kek diagaram kartesius)

  11. Bikin animasi skuy

  12. Hover Animation:

  13. Buat nge lock state tearkhir habis animasi pakai animation-fill-mode:forwards;

  14. Div nya gerak gerak nih kalau dideketin

  15. Wah..bolanya menghilang

  16. Infinite loop

  17. Jantung berdebar-debar

  18. Kecepatan kilau yang berbeda

  19. Tiga buah bintang yg kecepatannya dibedakan oleh animation-duration

  20. animation-timing-function:ease(lambat-cepet-lambat),ease-out(cepet-lambat),ease-in(lambat-cepeet),linear(constant)

    Ease:

    Ease-out:

    Ease-in:

    Linear:

  21. Cubic Bezier curve buat ngatur rate of animation.(ada 4 tittik,p0,p1,p2,p3.P0 dah diset di (0,0),p3 di (1,1)). Tugas kita tinggal masukin koordinat(p1.x,p1.y.p2.x,p2.y). x itu waktu y itu rate of animation

    Linear:

  22. Buat simulasiin ease-out. bisa pake bezier cube dengan p1(0,0),p2(0.58,1)

    Ease-out:

  23. Kalau y nya >1,entar pas bagian itu lebih cepet animasinya dibanding yang terakhir

    Custom:

  24. alt di img penting terutama pas gambar gak ke load atau buat yg visually impaired

    Ini Gambar

  25. Buat gambar yang dekorasi doang,alt nya bisa diisi pake string kosong