Mari mengeksplorasi beberapa tips dan trik CSS penting yang akan membantu Anda mempermudah proses desain web Anda dan membangun situs web yang menarik dan kreatif.
Mari kita mulai.
CSS Clip-Path
Clip path memungkinkan Anda untuk membuat bentuk khusus dengan mengkliping area yang terlihat dari elemen HTML. Anda dapat menganggapnya sebagai gunting virtual yang memungkinkan Anda untuk memotong dan membentuk ulang item yang Anda miliki. Dengan memanipulasi properti ini, Anda dapat membuat berbagai bentuk dan effects yang melebihi persegi panjang dan kotak biasa.
/*Let's create a circle*/
.circular-element {
width: 100px;
height: 100px;
background-color: #3498db;
clip-path: circle(50% at 50% 50%);
}
atau :
/*Or a hexagon*/
.hexagon-element {
width: 100px;
height: 100px;
background-color: #e74c3c;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
Menciptakan bentuk hanya melalui coding dapat menjadi tantangan tersendiri. Oleh karena itu, Anda dapat menyederhanakan prosesnya dengan menggunakan tool “clip-path generator” yang tersedia secara online. Dengan tool ini, Anda dapat menggambar bentuk yang Anda inginkan secara interaktif di atas kanvas dan dengan mudah menyalin code yang dihasilkan untuk ditempelkan ke dalam file CSS Anda. (Here is my recommendation.)
CSS Aspect Ratio
Aspect ratio adalah hubungan proporsional antara lebar dan tinggi. Dengan menentukan aspect ratio suatu elemen, Anda memastikan bahwa elemen tersebut dapat menyesuaikan berbagai ukuran dan orientasi layar. Hal ini khususnya penting untuk gambar, video, dan wadah yang menampung konten dinamis.
.video-container {
width:1920px;
height:1080px
}
Tidak ada yang salah dengan video player ini, tetapi tantangan yang sebenarnya muncul ketika memastikan responsifitasnya di berbagai ukuran layar. Menulis code untuk mempertahankan proporsi yang sama untuk setiap breakpoint yang responsif bisa jadi cukup merepotkan. Namun, solusi untuk tantangan ini adalah dengan memanfaatkan properti aspect-ratio.
.video-container {
width:100%
aspect-ratio: 16/9;
}
CSS Filters
CSS filters adalah sekumpulan properti yang memungkinkan Anda untuk menerapkan berbagai efek grafis pada elemen HTML. Efek-efek ini mengubah rendering konten elemen dan biasanya digunakan untuk gambar, tetapi dapat diterapkan pada konten HTML apa pun.
.my-element {
filter: blur(5px) grayscale(50%);
}
Berikut ini adalah beberapa filter CSS yang paling sering digunakan dan bagaimana filter tersebut dapat mengubah desain web Anda:
Blur: Filter blur menambahkan keburaman Gaussian ke suatu elemen, menciptakan efek yang lembut dan membuai. Filter ini sempurna untuk menciptakan fokus pada bagian tertentu dari suatu gambar, atau untuk menambahkan sentuhan artistik pada desain Anda.
Grayscale: Dengan filter grayscale, Anda bisa mengubah elemen warna-warni menjadi hitam dan putih, sehingga desain Anda terlihat klasik dan tak lekang oleh waktu. Filter ini sangat bagus untuk menciptakan kesan vintage.
Brightness and Contrast: Menyesuaikan filter kecerahan dan kontras dapat membuat elemen Anda menonjol atau menciptakan penampilan yang halus dan kalem. Filter ini sangat bagus untuk menyempurnakan keseimbangan visual desain Anda.
Hue Rotate: Filter hue-rotate memungkinkan Anda mengubah nada warna suatu elemen, sehingga memudahkan untuk menciptakan efek dan variasi warna yang memukau secara visual.
Invert: Filter invert membalikkan warna suatu elemen, membuatnya terlihat seperti negatif fotografi. Ini bisa menjadi tambahan yang menawan dan tidak terduga untuk desain web Anda.
Saturate and Sepia: Filter saturasi mengintensifkan atau mendehidrasi warna, sedangkan filter sepia memberikan elemen Anda tampilan bernuansa sepia yang bernuansa nostalgia. Keduanya merupakan alat bantu yang fantastis untuk menambahkan karakter dan suasana hati pada desain Anda.
The :where() Pseudo-Class*
Kelas ini memungkinkan Anda memilih elemen yang cocok dengan salah satu selektor yang diberikan di dalam tanda kurung. Fitur ini sangat membantu ketika Anda ingin menerapkan gaya yang sama ke beberapa elemen yang serupa tanpa menulis aturan terpisah untuk setiap pemilih.
/* Without :where() */
div.container h2,
div.container h3,
div.container h4 {
font-weight: bold;
}
/* With :where() */
:where(h2, h3, h4) {
font-weight: bold;
}
Styling Video Captions
Tahukah Anda, bahwa Anda dapat memberikan style untuk caption video?
Sebelum memberi style, izinkan saya menunjukkan kepada Anda, bagaimana cara menambahkan teks untuk video dalam HTML.
<video src="video.mp4" controls>
<track kind="captions" label="En" src="/captions.vtt" />
</video>
Seperti yang Anda lihat, menambahkan teks dalam HTML cukup mudah. Cukup buat file teks Anda dalam format .vtt dan kemudian sertakan dengan menggunakan elemen HTML track.
Sekarang dengan menggunakan elemen semu ::cue, Anda dapat mengubah teks dan font style.
::cue {
font-size: 50px;
}
Terima kasih telah meluangkan waktu untuk membaca artikel ini. Jika Anda merasa artikel ini bermanfaat, sampai jumpa minggu depan untuk update menarik lainnya!
