Cara Meningkatkan Keterampilan CSS

Membuat style dengan CSS memang bagus, tapi lebih baik meningkatkan dan menerapkan beberapa trick pada code Anda. Pada artikel ini, saya akan berbicara tentang beberapa Tip dan Trick tentang CSS yang bisa Anda terapkan, bagikan dengan rekan satu team Anda, dan tingkatkan project Anda.

Avoid the @import statement to fonts

Menggunakan aturan @import memungkinkan kita mengimpor stylesheet ke lainnya, tetapi penegasan itu tidak akurat dalam beberapa kasus. Misalnya, jika kita perlu mengimpor kelas yang sama di satu halaman dari halaman lain, metode itu tidak ada apa-apa, tetapi dalam hal font bukan langkah yang benar. Saat kami mengimpor dari CDN, import itu membutuhkan banyak waktu untuk masuk ke website kami, lalu gunakan

<link rel="stylesheet" href="cdn.com/font/font1.css?family=shield:wght@300;400;600&display=swap" />

Optimalkan ukuran file

Memperbesar file Anda ialah praktik yang buruk ketika Anda menyelesaikan sebuah project, kelebihan website seharusnya mengurangi peluang Anda untuk mempertahankan pengguna di halaman. Anda harus berhati-hati untuk mengurangi tiap file seperti CSS, JS, gambar, video, dan lain-lain. Berikut adalah beberapa alat yang bisa Anda gunakan untuk mengurangi file Anda:

Perkecil CSS
JSCompress
Compressor Gambar

Avoid excessive animation

Yaaah, animasi. Yang pasti, beri saya 15 animasi saat halaman usai dimuat dan lihat banner meluncur dari kanan, efek refleksi untuk kata-kata di judul, ya luar biasa membuat animasi.

Itulah niat pertama saya dalam project kedua saya ketika saya belajar animasi. Tetapi itu menakutkan. Serius, semua usaha saya untuk membuat animasi yang bagus terhenti saat situs selesai memuat 2 menit sebelumnya dan beberapa animasi mengganggu pengguna. Tiap halaman harus memiliki animasi tapi pada skala yang lebih rendah, animasi simpel sebagai status hover di tombol untuk mengirim atau saat Anda mengarahkan cursor ke kartu dan menampilkan lebih banyak informasi. Ingat, lebih sedikit lebih baik.

Alat untuk CSS

Tentunya, panduan itu harus menyertakan beberapa alat untuk meningkatkan pekerjaan kita dan menjadi lebih cepat untuk menyelesaikan semua. Saya akan memberi Anda daftar beberapa website yang saya kunjungi saat saya memulai project baru atau membuat desain ulang project.

Coolors: Website ini hebat, saya sangat menyukai langkah Anda menggabungkan warna hanya dengan mengklik
Fontshare: Anda harus menggunakan Google Fonts sebagai font CDN khusus Anda, tapi website ini mempunyai daftar besar font baru yang bisa Anda gunakan secara gratis.
Loading.io: Jika Anda mencoba membuat code animasi pemuatan, jangan mencari lebih banyak, berikut alat terbaik untuk ini.
Animate.css: Saat Anda tidak memiliki semua ide untuk membuat animasi yang baik, cukup check library ini untuk project Anda dan instal dengan cara terbaik yang Anda inginkan.
Rekomendasi CSS: Jika Anda lupa pseudo-class seperti saya, ini ialah langkah terbaik untuk mengingat

Trick

Kapan Anda harus menggunakan persentase bukannya angka absolut?

Design responsive ialah karakter khusus dari sebuah web. Anda perlu memahami kapan Anda harus menggunakan persentase atau area pandang dan kapan menggunakan rem, px, atau em.

Saya akan memberitahu Anda ini dan ini sangat sederhana, untuk gambar, background, dan kolom Anda harus menggunakan persentase atau lebar viewport agar responsive dalam lebar komponen dan px untuk tingginya, tapi biasanya tingginya harus otomatis masuk jika desainnya memiliki design yang persis seperti yang biasanya terjadi pada kartu dan beberapa bagian Anda harus menyesuaikan ketinggian maksimal dengan px, rem, atau em tapi biasanya px.

Dan untuk teks tag seperti H1, H2, H3, small, p, dan lain-lain dapat menggunakan px atau rem. Mudah sekali.

Tooltips

Terkadang kita perlu membungkus beberapa info mengenai deskripsi, gelembung bantuan, atau yang sama, dan di sinilah Tooltip masuk. Biasanya kita menggunakan library tutorial bergaya seperti Tailwind atau Bootstrap tapi Anda bisa membuatnya dengan beberapa baris CSS dan HTML dan buat style Anda sendiri untuk project Anda.

Pertama, kita mendeskripsikan HTML kita

<div class="container">
    <div class="group">
      <h2>Tooltip</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta animi corporis ducimus, unde quae iste! Quo facilis labore sint! Explicabo repudiandae ad beatae ab eos officiis deleniti quisquam at consequatur.</p>
      <span class="tooltip">
        <i class="fa fa-exclamation-circle"></i>
        <div class="tooltip-box">
          <p>This is a tooltip for the text or product</p>
        </div>
      </span>
    </div>
  </div>

Dalam hal ini, saya akan menggunakan Fontawesome untuk icon sehingga Anda bisa menggunakan CDN untuk itu. Seperti yang Anda lihat sebagai contoh, saya membuat wadah, dan didalamnya saya menambahkan div class grup , tapi elemen penting di sini yaitu span dengan class tooltip. Tapi silahkan kita lihat CSSnya terlebih dahulu.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #3c19c7;
  min-height: 100vh;
  font-family: 'Rubik', sans-serif;
}

Pertama-tama kita perlu mengatur ulang style dari browser

.container {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.group {
  max-width: 400px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 1px 2px 8px 4px rgba(32, 12, 113,.2);
  padding: 12px 20px;
  position: relative;
}

Wadah harus menetapkan lebar maksimal untuk mempertahankan urutan contoh dan group ialah bagian kartu normal tetapi dengan nama yang berbeda.

.tooltip {
  cursor: pointer;
}

.tooltip-box {
  display: none;
  position: absolute;
  background-color: #b3cb27;
  box-shadow:  1px 2px 8px 6px rgba(149, 149, 149, 0.2);
  border-radius: 4px;
  transition: all .4s ease;
  padding: 6px 10px;
  top: 100%;
  left: -50%;
}
.tooltip-box::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  transform: rotate(135deg);
  background-color: #b3cb27;
  top: -6px;
  right: 65px;
}

Saat ini Anda akan berkata, "Ayo, ini beberapa barisnya? Saya lebih suka menggunakan library untuk tooltip simpel ini" dan Anda benar, tapi bila Anda memulai pemrograman dan membuat beberapa hal keren baru atau mempraktikkan beberapa trick CSS, ini untuk Anda, tapi izinkan saya memberitahu Anda sesuatu, lebih baik mengenal Anda bisa membuat hal khusus ini daripada menggunakan library dan bisa sangat menyusahkan untuk mengubah background sederhana atau mengubah posisi. Terkadang bagus untuk menggunakan code orang lain tapi jika Anda bisa melakukan hal simpel dan menghemat waktu nanti, lakukan saja.

Jelas, kodenya bisa diperbaiki tapi akan bekerja untuk Anda dan mengubah banyak hal.

CSS Box Shadow

Trick simpel tentang bayangan kotak ialah jangan pernah menggunakan warna hitam sebagai warna khusus untuk bayangan. Dan sebaliknya untuk cahaya itu tidak menggunakan putih untuk semuanya, itu tergantung pada background Anda harus bekerja. Misalnya:

Dalam hal ini, saya tidak menggunakan warna hitam atau gelap, saya ambil warna background dan mengubahnya sedikit ke warna yang lebih gelap, menerapkan opacity, dan selesai. Anda membuat bagian kualitas untuk project Anda.

Manfaatkan faktor

Belajar menggunakan faktor dan Anda akan menghemat waktu. Saya tidak pernah menggunakan faktor sampai saya mengambil project besar dan CSS-nya berantakan . Jadi saya butuh waktu untuk menyelesaikan masalah tapi menggunakan faktor untuk warna, radius batas, dan hal-hal yang akan Anda guna kembali setiap kali itu yang terbaik.

:root {
  --border-radius: 12px;
}

.group {
  max-width: 400px;
  background-color: #fff;
  border-radius: var(--border-radius);
  box-shadow: 1px 2px 8px 4px rgba(32, 12, 113,.2);
  padding: 12px 20px;
  position: relative;
}

::sebelum dan ::setelah content

Seperti yang Anda lihat pada contoh sebelumnya saya menggunakan pseudoelement::after untuk membuat paku kecil untuk gelembung tooltip. Menggunakan komponen semu ini bisa memberi Anda pilihan untuk design, tidak hanya untuk hal simpel seperti ini tetapi juga untuk menambahkan animasi tingkat lanjut untuk komponen. Sembunyikan dan tampilkan ::sebelum dan ::setelah itu ialah alat yang hebat.

Ini ialah beberapa panduan dari bagian trick CSS yang ingin saya bagikan dengan Anda di minggu-minggu mendatang. Masih berlatih dan membuat hal baru dengan CSS.