Dalam Memuji Bayangan

Diterbitkan Ulang Oleh Plato

Followers: 0

Teman tersayang kita, Robin, memiliki esai baru berjudul Dalam Pujian Bayangan. Sekarang, sebelum Anda melompat ke sana mencari nugget pada bayangan kotak CSS, bayangan teks, dan filter bayangan… ini dia tidak. Ini adalah esai tentang fotografi dan apa yang telah dipelajari Robin tentang menyerahkan bayangan dengan kamera.

Jadi, mengapa membagikan ini? Karena keren sih dia membuat artikel diarahkan halaman yang didedikasikan untuk satu esai. Dan Anda akan belajar banyak tentang CSS jika Anda membuka DevTools di atasnya:

Teknik pemusatan. Perhatikan bagaimana CSS Grid digunakan pada <body> hanya untuk tengah pamflet. Kemudian Robin meraihnya lagi pada masing-masing .frame esai untuk melakukan hal yang sama dengan konten.
Gambar latar belakang "palsu". Robin bisa membuat banyak pekerjaan untuk dirinya sendiri dengan membuat kelas CSS untuk masing-masing .frame untuk mendapatkan gambar latar belakang. Sebagai gantinya, dia menggunakan object-fit: cover pada HTML sebaris <img>s untuk mempertahankan rasio aspek sambil mengisi .frame wadah. (Dia sebenarnya menulis tentang ini sebelumnya.) Itu tentu menghemat banyak CSS'ing, tetapi juga memungkinkan dia untuk menggunakan teks alternatif jika diperlukan. Saya agak bertanya-tanya apakah a <figure>/<figcaption> struktur bisa saja bekerja di sini, tetapi saya ragu itu akan memberikan banyak manfaat tambahan untuk apa yang terjadi.
Penumpukan konteks. Keuntungan lain dari gambar latar belakang palsu itu? Mereka menggunakan pemosisian absolut yang menciptakan konteks susun, memungkinkan Robin untuk mengatur z-index: 0 pada gambar. Dengan begitu, teks menumpuk langsung di atas dengan z-index: 1. Sekali lagi, CSS Grid menangani semua pemusatan sehingga semuanya selaras dengan baik.
Gulir gertakan. saya selalu cinta itu ketika saya melihat gulir CSS patah di alam liar. Robin membuat pilihan yang bagus untuk menggunakannya di sini, karena ini benar-benar memberikan pengalaman membalik halaman secara keseluruhan saat menggulir bingkai. Pengguliran horizontal bisa menjengkelkan, tetapi juga sangat elegan saat dijalankan dengan baik seperti di sini dalam cara menyempurnakan desain kolom sempit. Jika Anda ingin penjelasan yang bagus tentang cara kerjanya, Robin juga ditulis tentang gertakan gulir horizontal.