5 Trik CSS agar Tampilan Front-end Mirip dengan Desain Mockup

2 menit baca
Web Development

TL;DR

Implementasi tampilan website yang diharuskan sesuai dengan desain mockup dari designer seringkali membuat saya sebagai Front-end kewalahan sehingga memperlambat waktu development. Menjadikan saya memiliki property andalan yang fleksibel untuk banyak kasus, dan inilah lima diantaranya.

1. display: flex

Karena terlampau sering, hampir semua kasus design dapat dituntaskan dengan penggunaan property display: flex.

2. Pseudo ::before & ::after

Dalam contoh kasus seperti background blur di area tertentu, dan dekorasi di sudut-sudut komponen, tidak ada yang lebih fleksibel dari pseudo, seperti membuat elemen tanpa elemen. Penggunaan psuedo harus disertai property content walaupun value kosong untuk berhasil.

3. calc()

Penggunaan value calc() tidak hanya untuk responsifitas halaman situs, dalam banyak kasus kita perlu membuat komponen yang ukurannya menyesuaikan komponen lain, solusinya adalah value calc() yang penggunannya seperti “calc(100dvh - 100px)”, juga bisa ditumpuk seperti “calc((100% - 10px) + 100px)”

4. clip-path

Desain web pada dasarnya hanyalah kotak-kotak yang memiliki konten di dalamnya. Ada kalanya kita mendapati desain yang bentuknya tidak kotak dan tidak bisa diakali dengan property border-radius. Penggunaan property clip-path yang jarang membuat kesenangan dalam menggunakan property ini terasa eksklusif.

5. Angka Cantik

Trik terakhir ini perlu waktu untuk diterapkan karena terkait dengan rasa. Terkadang desainer justru yang memberi kita angka yang tidak digunakan dalam mendesain contohnya 5, 13, atau 17 yang lebih baik jika diterapkan dengan 6, 12, dan 16. Angka-angka ini banyak digunakan seperti resolusi monitor umum, ukuran font menulis. Docs di berbagai framework CSS membuat kita mengerti cara penggunaannya.

Related Posts