Tooltips Sempurna Dengan Kliping dan Masking CSS

Clipping dan masking telah ada untuk sementara waktu sekarang di CSS dan bahkan memiliki dukungan browser yang cukup baik. Saya baru-baru ini mengerjakan proyek yang perlu menggunakan teknik kliping untuk tooltips yang menampilkan tautan di atas dalam teks.

Tooltips tersebut memiliki dua desain berdasarkan kontennya:

Salah satu desain adalah tooltip yang berisi teks biasa dengan latar belakang yang solid.
Desain lainnya memungkinkan gambar untuk menutupi seluruh ruang.

Anda mungkin tidak berpikir bahwa tooltip teks memerlukan kliping sama sekali. Elemen semu dapat diposisikan di bagian bawah untuk menambahkan takik kecil, bukan? Anda memang benar sekali! Karena latar belakang tooltip adalah warna polos, sebenarnya tidak perlu trik CSS dan yang lainnya.

Tetapi memotong gambar dalam desain kedua adalah hal yang menarikā€¦

Inilah proses berpikir yang diikuti pikiran saya ketika saya memulai tugas.

Ide 1: jalur klip & poligon

Properti clip-path CSS memungkinkan kita untuk mendefinisikan poligon khusus dengan nilai persentase untuk membuat jalur yang kita inginkan.
Solusi ini cukup sering jika bentuk jalur Anda cukup sederhana. Dalam demo di bawah ini, saya menggunakan nilai calc() untuk memastikan klip sepenuhnya responsif, sementara segitiga kecil tetap berukuran sama tidak peduli seberapa panjang induknya.

 .tooltip { clip-path: polygon( 0% 0%, // Top left point 100% 0%, // Top right point 100% calc(100% - 10px), // Bottom right point calc(50% + 10px) calc(100% - 10px), // Center right of the triangle 50% 100%, // Tip of the triangle calc(50% - 10px) calc(100% - 10px), // Center left of the triangle 0% calc(100% - 10px) // Bottom left point ); }

Solusi ini sangat bersih tetapi, dalam kasus saya, tidak cukup baik karena saya tidak memiliki takik segitiga lurus, melainkan bentuk khusus.

Ide 2: jalur klip dan SVG

Menggunakan jalur SVG sepertinya solusi yang bagus. Pertama, Anda mengekspor jalur kliping SVG Anda, lalu menggunakannya di CSS Anda dengan nilai url(#clipPathId) .

Cek demonya di bawah. Apakah Anda melihat ada masalah dengan jalurnya?

Panah direntangkan berdasarkan rasio gambar. Karena takik kecil adalah bagian dari keseluruhan bentuk jalur, maka takik itu sama terentangnya seperti bagian persegi panjang dari jalur yang terbentang dalam ukuran.

Ide 3: gambar topeng

Sekarang inilah hal yang saya temukan dengan properti CSS mask-image di CSS: Anda dapat menggabungkan lapisan topeng! Anggap saja seperti gambar background-image di CSS. Anda dapat menerapkan beberapa gradien atau gambar pada satu elemen. Sekarang, bagaimana jika Anda menggabungkan semua lapisan itu untuk menghasilkan topeng terakhir yang Anda butuhkan?

Inilah tepatnya yang akan kita lakukan di sini dengan dua lapisan:

  1. Persegi panjang besar yang menutupi seluruh blok kecuali garis di bagian bawah (ditunjukkan dengan warna hijau)
  2. Gambar panah (ditampilkan dalam warna merah muda)

Dengan solusi itu, persegi panjang dapat meregang sesuai dengan dimensi tooltip kita, dan panah akan selalu mempertahankan ukuran tetapnya.

Semua kode dan demo di bawah ini adalah prefix free dan demonya menggunakan Autoprefixer . Pada saat saya menulis artikel ini, Edge, Chrome & Safari memerlukan awalan.

Sama seperti yang kita lakukan dengan properti latar belakang, kita akan menggunakan tiga properti topeng yang berbeda untuk mendefinisikan dua lapisan kita:

  • mask-image : Properti ini memungkinkan kita menggambar persegi panjang dengan latar belakang linier dan panah dengan SVG sebaris.
  • mask-position : Persegi panjang tidak membutuhkan posisi (karena dimulai dari kiri atas), tetapi panah harus diposisikan di tengah-bawah.
  • mask-repeat : Kita perlu menghindari pengulangan kedua layer; jika tidak, gradien linier akan menutupi seluruh elemen ketika berulang.
 .tooltip { mask-image: linear-gradient(#fff, #fff), /* Rectangle */ url('data:image/svg+xml;utf8,'); /* Bottom arrow mask-position: */ 0 0, /* Rectangle */ 50% 100%; /* Bottom arrow */ mask-size: 100% calc(100% - 18px), /* Rectangle */ 38px 18px; /* Bottom arrow */ mask-repeat: no-repeat; }

Tada! Ubah dimensi tooltip atau ganti gambar dan panah bawah akan mempertahankan rasio aslinya.

Bentuk yang lebih kompleks

Mari kita menjadi sedikit mewah dan masuk lebih dalam dengan teknik ini. Saya terinspirasi oleh aplikasi iMessage di iOS dan mencoba mereproduksi tooltips yang sama dengan teknik masking ini.

Saya harus menggambar lebih banyak lapisan untuk topeng saya untuk membuat setiap sudut membulat:

  • empat lingkaran, satu untuk setiap sudut (ditunjukkan dengan warna merah)
  • satu persegi panjang horizontal (ditunjukkan dengan warna biru)
  • satu persegi panjang vertikal (ditunjukkan dalam warna hijau)
  • satu SVG untuk panah (ditunjukkan dengan warna kuning)

Kode lengkapnya akan sedikit lebih panjang karena kita memiliki lebih banyak lapisan untuk digambar, tetapi logikanya tetap sama. Sudut digambar menggunakan empat gradien radial. Untuk mengisi persegi panjang, kita membutuhkan dua persegi panjang (satu vertikal, satu horizontal) seperti yang ditunjukkan di atas. Dan akhirnya, panah kecil kami yang menggunakan SVG sebaris.

 .tooltip { --radius: 25px; mask-image: radial-gradient(#fff (var(--radius) - 1), #fff0 var(--radius)), /* Top left corner */ radial-gradient(#fff (var(--radius) - 1), #fff0 var(--radius)), /* Top right corner */ radial-gradient(#fff (var(--radius) - 1), #fff0 var(--radius)), /* Bottom left corner */ radial-gradient(#fff (var(--radius) - 1), #fff0 var(--radius)), /* Bottom right corner */ linear-gradient(#fff, #fff), /* Horizontal gradient */ linear-gradient(#fff, #fff), /* Vertical gradient */ url('data:image/svg+xml;utf8,'); /* Bottom right icon */ mask-position: 0 0, /* Top left corner */ 100% 0, /* Top right corner */ 0 100%, /* Bottom left corner */ 100% 100%, /* Bottom right corner */ 0 var(--radius), /* Horizontal gradient */ var(--radius) 0, /* Vertical gradient */ 100% 100%; /* Bottom right icon */ mask-size: (var(--radius) * 2) (var(--radius) * 2), /* Top left corner */ (var(--radius) * 2) (var(--radius) * 2), /* Top right corner */ (var(--radius) * 2) (var(--radius) * 2), /* Bottom left corner */ (var(--radius) * 2) (var(--radius) * 2), /* Bottom right corner */ 100% calc(100% - #{var(--radius) * 2}), /* Horizontal gradient */ calc(100% - #{var(--radius) * 2}) 100%, /* Vertical gradient */ (39px / 2) (25px / 2); /* Bottom right icon */ mask-repeat: no-repeat; }

Seperti yang Anda lihat, kita dapat membuat versi dengan panah di kiri atau kanan dengan menggunakan versi panah yang dibalik dan memposisikannya di sudut yang berbeda. Triknya berfungsi dengan baik pada tooltips tanpa gambar juga. Tapi seperti yang saya katakan di awal artikel ini, Anda mungkin tidak membutuhkan banyak CSS jika Anda hanya memiliki latar belakang gaya yang sederhana.


Jika Anda ingin mempelajari lebih lanjut tentang clipping dan masking di CSS, ada banyak artikel bagus lainnya di sini tentang Trik-CSS yang layak untuk dicoba.


Posting Perfect Tooltips With CSS Clipping and Masking muncul pertama kali di CSS-Tricks .

Anda dapat mendukung Trik-CSS dengan menjadi Pendukung MVP .

June 17, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *