Applied Visual Design

* menambahkan tekstur dgn pola halus=background & url . Contoh=

 body {
background:url(https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png);
  }

*mengubah ukuran elemen=transform & scale( ) . Contoh=

 #ball2 {
transform:scale(1.5);
  }

*mengubah skala elemen saat mengarahkan kursor= transform, :hover & scale( ). Contoh=

div:hover{
    transform:scale(1.1);
}

*memiringkan elemen sepanjang sumbu X(horizontal)=transform & skewX( ) .Contoh=

 #bottom {
transform:skewX(24deg);
  }

*memiringkan elemen sepanjang sumbu Y(vertikal)=transform & skewY( ) .Contoh=

 #top {
transform: skewY(-10deg);
  }

*membuat grafik menggunakan CSS. Untuk membuat objek bulat, border-radius properti harus bernilai 50%.

 .center {
    background-color: transparent;
    border-radius: 50%;
    box-shadow: 25px 10px 0px 0px blue;
  }

~Urutan box-shadow= offset-X, offset-Y, blur-radius, spread-radius, color.

*Membuat bentuk hati.

: :before= membuat pseudo-elemen yg merupakan anak pertama dari elemen yg dipilih.

: :after= membuat pseudo-elemen yg merupakan anak terakhir dari elemen yg dipilih.

~ Contoh:

 .heart {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: pink;
    height: 50px;
    width: 50px;
    transform:rotate(-45deg) ;
  }
  .heart::after {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 25px;
  }
  .heart::before {
    content: "";
    background-color: pink;
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0px;
  }

*Membuat animasi(transisi) warna. Properti animasi mengontrol bagaimana animasi seharusnya berperilaku dan @keyframesaturan mengontrol apa yang terjadi selama animasi tersebut. Total ada delapan properti animasi.

animation-name, animation-dutation(s), 0%=awal bgt, 100%= akhir(sebelum kredit). Contoh:

 #rect {
animation-name:rainbow;
animation-duration:4s;
  }
@keyframes rainbow{
 0% {
   background-color:blue;
   }
   50%{
     background-color:green;
   }
   100%{
     background-color:yellow;
   }
}

*Mengubah warna tombol saat diarahkan. Contoh:

 button:hover {
    animation-name: background-color;
    animation-duration: 500ms;
  }
@keyframes background-color {
  100%{
    background-color:#4791d0;
  }
}

~ ms= milidetik, 1.000ms= 1s

*Perhatikan bagaimana animasi diatur ulang setelah 500mswaktu berlalu, yang menyebabkan tombol kembali ke warna asli. Anda ingin tombol tetap disorot.

animation-fill-mode:forwards;

*Membuat pergerakan menggunakan animasi CSS= left, right, top & bottom. Contoh:

@keyframes rainbow {
    0% {
      background-color: blue;
      left: 0px;

    }
    50% {
      background-color: green;
      left: 25px;

    }
    100% {
      background-color: yellow;
      left: -25px;

    }
  }

*Memudarkan elemen dari kiri ke kanan= opacity. Contoh(bergerak dari kiri ke kanan, lalu perlahan pudar saat objek berada di kanan dan kembali saat objek menuju ke kiri):

 @keyframes fade {
    50% {
      left: 60%;
opacity:0.1;
    }
  }

*Membuat animasi bergerak tanpa berhenti= animation-iteration-count(yang mengontrol seberapa sering anda ingin mengulang animasi). Contoh(tanpa henti):

 animation-iteration-count: infinite;

*Membuat animasi detak jantung tak terbatas. Contoh:

animation-name: beat;
    animation-duration: 1s;
animation-iteration-count: infinite;

*Animasikan elemen pada kecepatan variabel. (opacity=atur kepudaran). Contoh:

 @keyframes twinkle-1 {
    50% {
      transform: scale(0.5);
      opacity: 0.5;
    }
  }

  @keyframes twinkle-2 {
    20% {
      transform: scale(0.5);
      opacity: 0.5;
    }
  }

(ini menjadikan perbadaan kecepatan bintang satu & bintang dua) / bisa pake pengaturan animation-duration .

*animation-duration= waktu keseluruhan.

~animation-timing-function= proses yg terjadi dlm waktu tersebut. Beberapa kunci nya:

-ease(lambat-cepat-lambat)

-ease-out(lambat-cepat)

-ease-in(cepat-lambat)

-linear(menerapkan kecepatan animasi konstan di seluruh bagian(kecepatan konsisten?))

Contoh animation-timing-function:

animation-timing-function:ease-out;

*cubic-bezier, mirip sama animation-timing-function? sumbu X=durasi animasi, sumbu Y= perubahan dalam animasi. Contoh:

 animation-timing-function: cubic-bezier(0.25,0.25,0.75,0.75);

~nilai X= 0-1

~nilai Y=bisa lebih dari 1

Applied Visual Design

0 Response to "Applied Visual Design"

Posting Komentar