# 058: Header Khusus untuk Galeri, Bagian 2 (dengan Kueri Media Reverso) - Trik CSS

Anonim

Kami memiliki tajuk galeri dasar di tempatnya, tetapi kehilangan orang biru kecil yang Erica taruh di ilustrasi aslinya. Kami telah membicarakannya sebelumnya, dan memutuskan akan sangat keren jika ketika ukuran layar diubah, orang-orang akan tetap diam saat dinding galeri bergerak di belakang mereka, jadi sepertinya mereka menjelajahi galeri dengan kagum.

Karena grafik orang murni ornemantal, menggunakan markup untuk mereka tidaklah ideal. Untungnya ada dua di antaranya dan kami mendapatkan dua elemen pseudo gratis di setiap elemen ( ::beforedan ::after). Kami menggunakan itu untuk menambahkannya.

Kami memperkenalkan konsep dalam video ini yang akan terus berguna, konsep "kueri media pembalikan". Kami sebagian besar mengerjakan desktop-down dalam desain ini, jadi kueri media kami sebagian besar didasarkan pada max-width. Namun jika kami menyiapkan kueri media yang sama berdasarkan min-width, kami dapat menargetkan layar hanya jika ukurannya lebih besar dari ukuran tertentu, bukan lebih kecil.

Dalam keadaan ini, grafik orang tidak muat di layar kecil. Jadi kami menggunakan kueri media reverso untuk memuatnya, dengan begitu kami akan memuatnya di layar besar tempat mereka bekerja, tetapi tidak memuatnya di layar kecil. Itu lebih baik daripada memuatnya sepanjang waktu dan menyembunyikannya di layar kecil.