Pengertian CSS Untuk Pemula III

5. Transisi dan Animasi

CSS juga dapat digunakan untuk membuat efek transisi dan animasi yang menarik.

Transitions: Menggunakan transition untuk membuat perubahan properti CSS secara halus, seperti perubahan warna atau ukuran.
Animations: Membuat animasi dengan @keyframes dan mengontrolnya menggunakan animation.

CSS

p.transition {
    background: hotpink;
    width: 70%;
    transition: 0.5s ease;

    &:hover {
        cursor: pointer;
        background: #00adb5;
        width: 90%;
    }
}
@keyframes slideBg {
    to {
        background-position: 125%;
    }
}
div.animation {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg,                 
        hotpink 25%, transparent 25%,                 
        transparent 50%, hotpink 50%,                 
        hotpink 75%, transparent 75%,                 
        transparent 100%, hotpink 100%);
    background-size: 2rem 2rem;
    background-position: 0;
    width: 90%;
    height: 200px;
    border-radius: 10px;
    animation: slideBg 5s linear infinite;
}

Transition

Klik/arahkan mouse ke sini

Animation

Background Animation

6. CSS Preprocessors dan Frameworks

Untuk meningkatkan produktivitas, Anda bisa mempelajari CSS preprocessors dan frameworks.

SASS/SCSS: Preprocessor CSS yang menambahkan fitur seperti variabel, nesting, dan mixins.
Bootstrap: Framework CSS populer yang menyediakan komponen siap pakai untuk membangun desain responsif dengan cepat.
Tailwind CSS: Framework utility-first yang memungkinkan Anda membangun desain dengan cepat menggunakan kelas utilitas.

7. Advanced CSS

Setelah menguasai dasar-dasar, Anda bisa menjelajahi topik CSS yang lebih advanced.

CSS Functions: Seperti calc() untuk perhitungan matematis dan var() untuk menggunakan variabel.
CSS Filters: Menambahkan efek visual seperti blur, grayscale, dan brightness.
Blend Modes: Menggunakan mix-blend-mode dan background-blend-mode untuk efek blending yang menarik.

CSS

:root{
    --warna-teks: #eee;
    --warna-tombol: #00adb5;
}
p {
    color: var(--warna-teks);
}
button {
    background: var(--warna-tombol);
    border-radius: 5px;
}
img.grayscale {
    width: 80%;
    border-radius: 10px;
    filter: grayscale(1);
    transition: 0.5s;
    
    &:hover {
        cursor: pointer;
        filter: grayscale(0);
    }
}
img.blend-mode {
    width: 80%;
    border-radius: 10px;
    mix-blend-mode: darken;
    
    &:hover {
        cursor: pointer;
        mix-blend-mode: normal;
    }
}

CSS Variabel

grayscale

Klik/arahkan mouse ke gambar

mix-blend-mode

Klik/arahkan mouse ke gambar

Jawablah Kuis Ini!

1. Berikut ini adalah transition timing function, kecuali...

Donasinya kaka logo-saweria