Get best of the week

CSS yang menarik ditemukan di desain Facebook yang baru

Saya penasaran. Selalu menarik bagi saya untuk membuka alat pengembang peramban dan memahami bagaimana situs web yang saya lihat dibuat. Materi ini adalah cerita pertama saya tentang penelitian semacam itu. Faktanya adalah saya menemukan beberapa contoh menarik menggunakan CSS (setidaknya mereka tampak menarik bagi saya) yang ingin saya bicarakan. Kita berbicara tentang temuan CSS dalam desain Facebook yang baru. Desain ini muncul relatif baru. Saya melihatnya beberapa minggu yang lalu. Pada awalnya, semua elemen antarmuka tampak luar biasa besar bagi saya, tetapi saya terbiasa dengannya hanya dalam beberapa hari. Di sini saya akan berbicara tentang semua yang menarik yang saya temukan dalam desain Facebook.





Menggunakan grafik SVG dalam avatar



Avatar Avatar

SVG digunakan untuk gambar avatar, seperti foto profil, foto pada halaman pengguna atau dalam kelompok.

Ini adalah kode HTML:

<svg role="none" style="height: 36px; width: 36px;">
  <mask id="avatar">
    <circle cx="18" cy="18" fill="white" r="18"></circle>
  </mask>
  <g mask="url(#avatar)">
    <image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
    <circle cx="18" cy="18" r="18"></circle>
  </g>
</svg>

Ketika saya melihat ini, saya bertanya-tanya mengapa pendekatan ini digunakan. Saya punya beberapa jawaban untuk pertanyaan ini:

  • Avatar harus memiliki bingkai bagian dalam yang memiliki warna hitam transparan (10%). Ini untuk membuat avatar ringan terlihat seperti gambar bulat. Selain itu, bahkan jika ini adalah gambar yang sepenuhnya putih.
  • Anda <img>tidak dapat menambahkan bayangan bagian dalam ( box-shadow) ke elemen HTML menggunakan kata kunci inset. SVG digunakan untuk menyelesaikan masalah ini.
  • Agar gambar memiliki bentuk bulat, elemen SVG <mask>dan digunakan <image>.

Seperti yang saya katakan, bingkai di dalam avatar sangat berguna untuk gambar yang cerah. Berikut adalah tata letak yang menggambarkan ide ini.


Avatar

Frame dalam dikonfigurasikan menggunakan CSS berikut:

circle,
rect {
  stroke-width: 2;
  stroke: rgba(0, 0, 0, 0.1);
  fill: none;
}

Jika gambar berbentuk bujur sangkar, gambar tersebut digunakan rect:

<svg role="none" style="height: 36px; width: 36px;">
  <mask id="avatar">
    <rect cy="18" fill="white" height="36" rx="8" ry="8" width="36" x="0" y="0"></rect>
  </mask>
  <g mask="url(#avatar)">
    <image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
    <rect cy="18" fill="white" height="36" rx="8" ry="8" width="36" x="0" y="0"></rect>
  </g>
</svg>

Menariknya, pada halaman utama feed, avatar dibuat menggunakan tag <img>dan elemen yang <div>digunakan untuk mengkonfigurasi bingkai tembus internal:

<div class="avatar-wrapper>
    <img class="avatar" width="40" height="40" src="avatar.jpg" width="40" alt="">
    <div class="avatar-outline"></div>
</div>

Berikut adalah gaya untuk HTML ini:

.avatar-wrapper {
    position: relative;
}

.avatar {
    display: block;
    border-radius: 50%;
}

.avatar-outline {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
}

Karena SVG dalam avatar hanya digunakan di beberapa tempat, saya dapat mengasumsikan bahwa alasan penggunaan <img>dan <div>terkait dengan ukuran halaman. Jika grafik SVG digunakan dalam avatar dari rekaman, ini akan menyebabkan peningkatan jumlah data yang dimuat saat menggulir melalui rekaman.

Gunakan sebagai pemisah elemen <div>, bukan margin luar


Saya tidak menemukan saat-saat ketika gambar GIF digunakan sebagai pemisah elemen halaman web. Tetapi kemudian saya melihat sesuatu yang menyerupai teknik ini. Saya pikir begitu, apa yang saya bicarakan dapat disebut pemisah div.


<div> Elemen Digunakan sebagai Pemisah

Biarkan saya mengklarifikasi gambar di atas sedikit. Ini adalah bagian dari bagian yang berisi permintaan teman yang muncul di halaman rumah. Di depan kami ada kotak tertentu dengan informasi tentang orang. Kotak ini harus memiliki indentasi luar kiri. Saya biasanya menambah elemen seperti perbatasan:margin-left: 16px. Tetapi Facebook melakukan hal yang sama menggunakan elemen<div>yang memisahkan kisi dari tepi elemen wadah.

Mengapa desainer melakukan itu? Saya punya beberapa tebakan:

  • Mungkin lekukan untuk elemen wadah tidak dapat ditambahkan ke sistem desain yang mereka buat?
  • Mungkin ini adalah komponen Bereaksi yang dapat digunakan di mana saja dengan mengatur lebarnya?

Mengapa lekukan tidak digunakan di sini? Bagi saya, situs CSS (sekitar 100 ribu baris), yang penuh dengan kelas bantu, dapat mengakomodasi kelas lain yang memungkinkan Anda untuk menyesuaikan lekukan elemen yang diinginkan.

Menggunakan Filter CSS



Ikon yang dibuat menggunakan elemen <img> dan <svg>

Lihatlah keempat ikon ini. Ikon dengan tanda tambah dan ikon panah dibuat menggunakan elemen<img>. Dan ikon messenger dan notifikasi - menggunakan elemen SVG. Alasan campuran teknologi ini tidak saya ketahui.

Jika Anda mengklik ikon terakhir, panah akan dicat ulang dengan warna biru. "Bagaimana warna berubah di sini, karena panah adalah gambar biasa?" Tanyaku pada diriku sendiri. Mungkin ketika Anda mengarahkan kursor ke ikon, satu gambar hanya berubah ke yang lain? Tidak, tidak seperti itu. Saya menemukan bahwa filter CSS digunakan untuk mengubah warna ikon pada ikon:

.icon {
    filter: invert(39%) sepia(57%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(147.75%) hue-rotate(202deg) brightness(97%) contrast(96%)
}

Dan itu, omong-omong, adalah kode produksi untuk facebook.com. Kode ini sepertinya sangat aneh bagi saya. Apakah sulit untuk mengganti elemen ini <img>dengan gambar SVG dan hanya mengubah warna yang ditentukan oleh atribut fill?

Hal yang sama digunakan ketika membuat ikon untuk akun yang diverifikasi.


Ikon akun terverifikasi

Sesuatu yang serupa berlaku untuk tautan dari profil pengguna:

.icon {
    filter: invert(59%) sepia(11%) saturate(200%) saturate(135%) hue-rotate(176deg) brightness(96%) contrast(94%);
}

Ini adalah tampilannya


Tautan di profil pengguna

Jika Anda tertarik mempelajari cara menggunakan filter CSS untuk mewarnai gambar dalam warna hitam dengan warna apa pun, lihatjawaban ini di Stack Overflow. Di sana Anda dapat menemukan alat untuk membuat filter CSS. Juga, lihatlahtweet ini .

Menggunakan gambar untuk membuat bayangan



Bayangan yang dibuat menggunakan gambar latar belakang

Judul jendela utama memiliki bayangan. Dapat diasumsikan bahwa itu dibuat menggunakan properti CSSbox-shadow. Tapi sebenarnya tidak. Di sini kami menggunakan elemen<div>dengan gambar latar belakang yang berulang sepanjang sumbux.

Saya mengunggah gambar yang digunakan di sini, yang memungkinkan saya untuk melihat lebih dekat.


Gambar yang digunakan untuk membuat bayangan

Ini adalah gambar 2x14 piksel yang, untuk membuat efek bayangan, diulang berkali-kali. Tidak hanya gambar, tetapi juga elemen khusus yang terlibat dalam pembentukan efek bayangan<div>. Mengapa bayangan itu dibuat seperti ini?

Seorang karyawan Facebook mengatakan bahwa gambar di sini digunakan untuk alasan kinerja. Sangat menarik bahwa bayangan kecil seperti itu dapat menyebabkan masalah dengan kecepatan situs.

Ketika ditanya tentang bagaimana masalah ini diidentifikasi, ia mengatakan bahwa bayangan itu menyebabkan penurunan kinerja dan efek visual yang tidak menyenangkan. Jadi, ketika menggulir halaman yang memuat banyak video, beberapa bagian halaman muncul dan menghilang.

Nah, jika bayangan menyebabkan masalah seperti itu - saya melihat tidak ada yang salah dengan menggantinya dengan gambar yang sesuai.

Luasnya penggunaan variabel CSS


Saya suka fakta bahwa desainer Facebook menggunakan variabel CSS. Dilihat oleh apa yang saya lihat, :rootlebih dari 320 variabel ditambahkan ke elemen . Variabel-variabel ini digunakan di kedua tema terang dan gelap situs.

Ketika tema gelap diaktifkan, kelas ditambahkan ke elemen HTML __fb-dark-mode. Kemudian itu menimpa semua variabel yang dideklarasikan dalam elemen :root:

:root {
    /*    */
    -fds-active-icon:  #3578E5;
    --fds-attachment-footer-background:  #F2F3F5;
    --fds-blue-05:  #ECF3FF;
    --fds-blue-30:  #AAC9FF;
    --fds-blue-40:  #77A7FF;
}

.__fb-dark-mode:root, .__fb-dark-mode {
    /*     */
    --fds-active-icon:  black;
    --fds-attachment-footer-background:  black;
    --fds-blue-05:  black;
    --fds-blue-30:  black;
    --fds-blue-40:  black;
}

Berikut adalah video yang menunjukkan apa yang terjadi setelah beralih ke topik gelap. Saya menyarankan Anda untuk menontonnya dalam mode layar penuh.

Menggunakan properti CSS baris-penjepit untuk memangkas teks multiline



Tanda tangan menggunakan pemangkasan teks multiline. Bilah

samping memiliki daftar tautan - seperti yang mengarah ke profil pengguna, ke materi terbaru, ke bagian Kenangan. Saya perhatikan bahwa pemangkasan teks multiline digunakan di sini:

.element {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

Ini adalah gaya bawaan, yang, di samping itu, bervariasi tergantung pada peramban.


Kode Pemangkasan Teks di Chrome dan Firefox

Fitur CSS ini menikmati dukungan browser yang cukup bagus. CanIUse melaporkan bahwa semua browser terkemuka mendukung properti ini (meskipun dengan awalan). Detail tentang properti ini dapat ditemukan di sini .

Menggunakan div untuk membuat elemen yang merespons mouseover


Biasanya, efek yang menyertai mouse di atas elemen dibuat menggunakan CSS. Misalnya, jika tombol tertentu perlu dicat dengan warna abu-abu khusus ketika Anda mengarahkan kursor ke atasnya, lakukan saja hal berikut:

.element:hover {
    background: #ccc;
}

Namun, tampaknya di situs-situs besar seperti Facebook, pendekatan ini tidak praktis. Dalam proses menjelajahi situs, saya menarik perhatian ke elemen yang ditampilkan hanya ketika Anda mengarahkan mouse dengan mouse (sebut saja "elemen melayang"). Ini adalah tugas utamanya. Ini gayanya:

.hover-div {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    border-radius: 6px;
    inset: 4px 0px;
    background-color: var(--hover-overlay);
    transition-property: opacity;
    transition-timing-function: var(--fds-animation-fade-out);
    cursor: pointer;
}

Nilai properti dari opacityelemen ini diubah oleh JavaScript dari 0menjadi 1. Saya bereksperimen dengan itu dan menemukan bahwa itu digunakan untuk banyak komponen. Di bawah ini adalah seperangkat tangkapan layar yang menunjukkan penggunaan elemen ini.


Menggunakan elemen hover

Saya suka keseragaman dan kesederhanaan yang disediakan dengan menggunakan efek yang sama untuk beberapa elemen. Jika ini berarti sesuatu, itu berarti bahwa bahasa desain yang digunakan di situs adalah seragam, dan bahwa sistem dirancang dengan cermat. Kerja bagus, Facebook!

Menggunakan Properti inset


Kita berbicara tentang catatan singkat dari nilai properti, menyiratkan dampak pada bagian atas, kanan, bawah, dan kiri elemen. Anda dapat menggunakan properti insetsebagai berikut:

.element {
    inset: 4px 0;
    /*   : top: 4px, bottom: 4px, left: 0, right: 0 */
}

Properti ini insetdikonfigurasi untuk elemen hover di atas yang terkait dengan beberapa elemen lainnya. Gaya tertanam dalam HTML. Saya perhatikan penerapannya pada komponen yang ditunjukkan di bawah ini.


Area yang terpengaruh oleh properti inset disorot dengan warna biru.

Ketika materi ini ditulis, propertihanyainset mendukung Firefox 66+.

Atribut = "otomatis" dan properti CSS boolean 


Di situs multibahasa seperti Facebook, terkadang sulit untuk memprediksi dengan tepat seperti apa kontennya. Misalnya, nama pengguna dalam komponen memiliki atribut dir=«auto». Ini berarti bahwa arah teks akan tergantung pada bahasa. Katakanlah, saat menggunakan bahasa Inggris, teks akan ditampilkan dari kiri ke kanan, dan saat menggunakan bahasa Arab - dari kanan ke kiri.

Selain itu, perlu dicatat bahwa ada gaya bawaan yang mengubah arah teks (ada perasaan bahwa atribut dir=«auto»tidak cukup). Begini tampilannya:

<div dir="auto" style="text-align: start;">محتوى بالعربية</div>

Perhatikan bahwa gaya telah ditambahkan ke elemen text-align: start. Ini menggunakan properti CSS logis. Gaya, untuk tata letak LTR, akan terlihat seperti text-align: right.

Jika Anda tertarik dengan fitur RTL-stylization - lihat materi saya ini .

Latar belakang dinamis tergantung pada foto utama



Latar belakang tergantung pada foto utama.

Pernahkah Anda memperhatikan bahwa gradien dan warna yang mirip dengan warna foto utama digunakan untuk mendesain latar belakang? Latar belakang ini dibentuk secara dinamis, didasarkan pada warna foto. Bagaimana ini dilakukan?

▍1. Mendapatkan warna dominan


Pertama, Anda perlu mendapatkan warna dominan (digunakan lebih sering daripada yang lain) dari foto utama. Setelah warna ini ditemukan, versi utama dari foto utama dibuat, hanya dicat dengan warna ini.


Menemukan warna yang dominan

▍2. Menambahkan latar belakang warna yang dominan



Latar belakang menggunakan warna dominan yang

ditemukan Latar belakang menggunakan warna dominan yang ditemukan sebelumnya. Saya, untuk membuatnya lebih jelas, menyorot gambar yang ditampilkan pada halaman sebagai foto utama dengan bingkai putih.

▍3. Menambahkan gradien di latar belakang


Untuk menambahkan gradien di latar belakang, gunakan kode CSS berikut:

.element {
    background-image: linear-gradient(to top, #FFFFFF, rgb(255, 255, 255), rgba(255,255,255,0.7), rgba(255,255,255,0.4), rgba(255,255,255,0));
}


Menambahkan gradien (warna terang digunakan dalam desain)

Jika warna gelap digunakan dalam desain, gradien terbalik digunakan:

.element {
    background-image: linear-gradient(to top, #000, rgb(0, 0, 0), rgba(0,0,0,0.7), rgba(0,0,0,0.4), rgba(0,0,0,0));
}


Menambahkan gradien (warna gelap digunakan dalam desain)

Anda dapat menggunakanalat ini untuk menemukan warna dominan gambar.

Banyak bayangan



Bayangan

Saya menyukai pendekatan yang digunakan pengembang Facebook untuk membuat bayangan untuk berbagai elemen seperti menu tarik-turun. Bayangan seperti itu menciptakan ilusi volume, yang jauh lebih realistis daripada ilusi yang dicapai dengan bayangan biasa.


Menu tarik-turun

Berikut adalah CSS:

.element {
    box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

Di sini Anda mungkin memiliki pertanyaan tentang mengapa di sini bayangan inset warna putih dibuat dengan transparansi 50%? Faktanya adalah ini adalah bayangan bagi rezim gelap. Di bawah ini adalah fragmen yang diperbesar dari antarmuka di mana bayangan tersebut digunakan.


Fragmen antarmuka yang diperbesar dengan bayangan sisipan.

Saya suka solusi yang masuk akal ini.

Item kosong untuk kisi-kisi flexbox


Saya perhatikan bahwa semua tata letak kotak di situs ini didasarkan pada flexbox. Berikut adalah salah satu contoh tata letak yang saya temukan di bagian foto pengguna.


Elemen kosong dalam tata letak kotak

Berikut adalah CSS:

.wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-items: space-between;
}

.item {
    width: 205px;
}

Semuanya terlihat menarik, bukan? Menggunakan nilai space-betweenuntuk menyesuaikan penempatan elemen berisiko. Tata letak tidak akan terlihat benar jika, misalnya, hanya ada tiga foto. Contoh tata letak seperti itu ditunjukkan di bawah ini.


Bahaya menggunakan ruang-antara

Bagaimana tim Facebook menangani masalah ini? Sangat sederhana: ada empat elemen kosong<div>, lebarnya sama dengan lebar foto. Berikut ini adalah HTML untuk solusi ini:

<div class="wrapper">
    <div class="item"><a href="#"><img src="photo.jpg"></a></div>
    <div class="item"><a href="#"><img src="photo.jpg"></a></div>
    <div class="item"><a href="#"><img src="photo.jpg"></a></div>
    <div class="item"><a href="#"><img src="photo.jpg"></a></div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
</div>

Dengan pendekatan ini, elemen kosong tersebut <div>memainkan peran elemen buatan. Mereka membantu menjaga jarak yang sama antara elemen-elemen.

Menggunakan kueri media vertikal


Saya jarang melihat pertanyaan media vertikal, sehingga, di alam liar. Saya menyukai kenyataan bahwa pengembang Facebook menggunakan kueri ini untuk mengurangi lebar umpan berita di beranda:

@media (min-height: 700px) {
    .element {
        width: 584px;
    }
}

Ringkasan


Itu saja. Saya sangat tertarik mengerjakan artikel ini. Menjelajahi desain situs Facebook, saya belajar banyak. Saya harap Anda juga menemukan dalam cerita saya sesuatu yang tampak baru dan menarik bagi Anda.

Pembaca yang budiman! Pernahkah Anda menemukan sesuatu yang menarik dengan menganalisis kode situs yang Anda kunjungi?

More articles:


All Articles