Get best of the week

[bookmark] Bekerja dengan gambar di web

Salah satu keputusan yang harus dibuat oleh pengembang front-end saat membuat situs web adalah pilihan bagaimana memasukkan gambar ke dalam halaman web. Metode ini mungkin menggunakan tag HTML <img>. Ini bisa berupa properti CSS backgroundatau tag <image>elemen <svg>. Memilih pendekatan yang tepat untuk bekerja dengan gambar sangat penting, karena ini dapat sangat mempengaruhi kinerja dan ketersediaan proyek. Materi, terjemahan yang kami terbitkan hari ini, dikhususkan untuk mempelajari berbagai cara termasuk gambar di halaman web. Di sini, kelebihan dan kekurangan dari metode ini akan dibahas. Selain itu, kita akan berbicara tentang kapan dan mengapa mereka biasanya digunakan.





Elemen HTML <img>


Elemen <img>dalam versi paling sederhana penggunaannya hanya berisi atribut yang diperlukan untuk operasi yang tepat src:

<img src="cool.jpg" alt="">

▍Mengatur atribut lebar dan tinggi


Jika lebar dan tinggi gambar tidak disesuaikan, maka saat memuat halaman dan kemudian memuat gambar, tata letak halaman mungkin perlu dibangun kembali. Untuk menghindari ini, Anda dapat mengatur atribut widthdan heighttag <img>:

<img src="cool.jpg" width="200" height="100" alt="">

Meskipun pendekatan ini mungkin sedikit mengingatkan seseorang tentang "sekolah lama", jadi untuk berbicara, sebenarnya cukup berguna. Mari kita lebih memahami hal ini, kami akan mendemonstrasikan hal di atas dengan sebuah contoh. Yaitu, saya sarankan Anda menonton video pendek ini .


Bingkai dari video. Gambar di sebelah kiri tidak memiliki lebar dan tinggi. Gambar di sebelah kanan ditentukan.

Di siniNetworkbilah alat pengembang browser ditampilkan dan proses memuat sepasang gambar ditunjukkan. Salah satunya terletak di sebelah kiri, diwakili oleh tag<img>, yang atributwidthdanheighttidak disetel. Pada nilai lain atribut ini ditetapkan.

Pernahkah Anda memperhatikan bahwa pada halaman ini ruang untuk gambar yang tepat dicadangkan bahkan sebelum gambar ini dimuat? Ini semua tentang atribut yang diberikanwidthdanheight. Perhatikan apa yang terjadi dengan teks gambar selama proses pengunggahan. Ini adalah demonstrasi yang jelas dari kekuatan atributwidthdanheight.

→ Ini adalah contoh yang bagus

▍ Menyembunyikan gambar menggunakan CSS


Gambar dapat disembunyikan menggunakan CSS. Benar, gambar seperti itu masih dimuat saat halaman dimuat. Karena itu, dalam melakukannya, kehati-hatian harus dilakukan. Jika gambar tertentu perlu disembunyikan, maka itu hanya dapat digunakan untuk tujuan dekoratif.

Berikut adalah kode CSS yang menyembunyikan gambar:

img {
    display: none;
}

Saya ulangi: dengan pendekatan ini, browser akan mengunduh gambar, melakukan hal ini walaupun ternyata tidak terlihat. Intinya di sini adalah bahwa suatu elemen <img>dianggap sebagai elemen yang dapat diganti , sehingga kemampuan kita untuk mengelola elemen seperti itu dari CSS terbatas.

▍Tentang ketersediaan konten


Ketersediaan gambar yang ditampilkan pada halaman menggunakan elemen HTML <img>dijamin oleh atributnya alt. Atribut semacam itu harus mengandung deskripsi gambar yang jelas. Ini bisa sangat berguna bagi pengguna yang menggunakan pembaca layar.

Namun, jika altgambar tidak perlu dijelaskan, atribut ini masih tidak disarankan untuk dihapus. Faktanya adalah jika ini dilakukan, maka konten dari atribut akan "disuarakan" src. Ini sangat buruk untuk aksesibilitas konten.

Tetapi atribut altini bermanfaat tidak hanya dalam kasus di atas. Jika karena alasan tertentu gambar tidak akan diunggah dan memiliki atributalt, maka teks dari atribut ini akan ditampilkan, bukan gambar. Saya ingin menggambarkan hal di atas dengan contoh berikut.

Kami memiliki beberapa gambar:

<img class="food-thumb" width="300" height="200" src="cheescake.jpg">
<img class="food-thumb" width="300" height="200" src="cheescake.jpg" alt="">

Atribut srcberisi alamat yang salah untuk file gambar, file ini tidak dapat dimuat oleh browser. Yang pertama <img>tidak memiliki atribut alt, dan yang kedua memiliki atribut di mana string kosong ditulis. Bagaimana menurut Anda elemen-elemen ini akan ditampilkan pada halaman?


Di sebelah kiri adalah gambar tanpa atribut alt. Di sebelah kanan - dengan atribut alt kosong.

Di bawah gambar tanpa atributalt, ruang halaman dicadangkan, yang dapat membingungkan pengguna dan mengganggu ketersediaan konten. Dan gambar lain membutuhkan sedikit ruang yang diperlukan untuk menampilkan "konten" atribut kosongalt. Hasilnya, lebih mirip titik daripada gambar. Ini terjadi karena pengaturan propertibordergambar.

Namun, ketikaaltsesuatu ditulisdalam atribut, gambar akan terlihat berbeda.


Di sebelah kanan adalah gambar dalam atribut alt yang mana teksnya ditulis.

Ini jauh lebih baik daripada tidak sama sekali. Selain itu, jika Anda tidak dapat memuat file yang ditampilkan<img>, Anda dapat menambahkan elemen pseudo ke dalamnya.

▍ Gambar Responsif



Gambar dengan ukuran berbeda

Elemen<img>ini bagus karena dapat dikonfigurasikan sehingga menampilkan versi gambar yang berbeda di area tampilan halaman dengan ukuran berbeda. Ini, misalnya, dapat digunakan untuk gambar yang digunakan dalam artikel.

Satu set gambar responsif dapat disesuaikan dengan dua cara.

1. atribut srcset


Berikut ini adalah kode gambar yang menggunakan atribut srcset:

<img src="small.jpg" srcset="medium.jpg 500w, large.jpg 800w" alt="">

Ini adalah contoh sederhana. Saya tidak menganggapnya sebagai solusi ideal srcsetuntuk menggambarkan gambar dengan ukuran berbeda yang ditampilkan di layar dengan karakteristik berbeda. Faktanya adalah bahwa dalam situasi seperti itu, kata terakhir tetap ada pada browser, dan pengembang tidak dapat memengaruhi pilihan browser.

2. Elemen gambar HTML


Berikut adalah kode yang menggunakan elemen <picture>:

<picture>
  <source srcset="large.jpg" media="(min-width: 800px)" />
  <source srcset="medium.jpg" media="(min-width: 500px)" />
  <img src="small.jpg" />
</picture>

Pilihan lain untuk membuat gambar responsif adalah menggunakan elemen <picture>. Saya lebih menyukai pendekatan ini karena lebih sederhana dan karena memberikan hasil yang lebih mudah diprediksi.

Ini adalah proyek demo untuk bagian ini.

▍ Mengubah ukuran gambar



Di sebelah kiri adalah gambar yang tidak memiliki set properti-objek CSS. Di sebelah kanan adalah gambar yang properti ini diatur dengan

properti CSSobject-fitdanobject-positionmerupakan alat hebat yang dapat Anda gunakan dengan elemen<img>. Mereka memberi kita kendali atas bagaimana konten elemen berubah dan diposisikan<img>. Ini mirip dengan bekerja dengan properti CSSbackground.

Propertiobject-fitdapat memiliki nilai berikut:fill,contain,cover,none,scale-down.

Berikut cara menggunakannya:

img {
    object-fit: cover;
    object-position: 50% 50%;
}

Sekarang setelah kami sedikit memahami elemennya <img>, saatnya untuk melanjutkan dan menguasai teknik manipulasi gambar berikutnya.

Gambar properti CSS


Saat menggunakan properti CSS untuk menampilkan gambar background, Anda perlu properti ini diterapkan ke elemen dengan beberapa konten, atau ke elemen yang memiliki dimensi. Biasanya, area utama penggunaan properti ini adalah elemen dekoratif.

▍Cara menggunakan properti latar belakang CSS


Untuk menggunakan properti CSS background, pertama-tama kita perlu elemen:

<div class="element">Some content</div>

Maka Anda membutuhkan gaya:

.element {
    background: url('cool.jpg');
}

▍Mengatur beberapa gambar di properti latar belakang


Fitur bagus dari gambar yang ditampilkan menggunakan properti CSS backgroundadalah ada beberapa gambar seperti itu. Gambar-gambar ini dapat dimanipulasi menggunakan CSS:

.element {
    background: url('cool-1.jpg'), url('cool-2.jpg');
}

▍ Menyembunyikan gambar


Menggunakan CSS, Anda dapat menyembunyikan dan menampilkan gambar di area tampilan tertentu. Pada saat yang sama, gambar yang tidak akan ditampilkan tidak akan diunggah. Jika gambar dalam CSS tidak dikonfigurasikan sebagai terlihat, maka itu tidak akan memuat. Ini adalah keuntungan tambahan dari properti CSS di backgroundatas elemen <img>.

@media (min-width: 700px) {
    .element {
        background: url('cool-1.jpg');
    }
}

Contoh ini menjelaskan gambar latar belakang yang ditampilkan hanya ketika lebar viewport lebih besar 700px.

▍Tentang ketersediaan konten


Jika gambar yang ditampilkan menggunakan properti CSS backgroundtidak digunakan dengan benar, ini dapat merusak aksesibilitas konten. Misalnya, aksesibilitas dapat dipengaruhi dengan menggunakan gambar seperti itu untuk membookmark sebuah artikel, yang sangat penting ketika bekerja dengan sebuah artikel.

▍ Kesulitan memuat gambar latar belakang oleh pengguna biasa


Pengguna awam tahu bahwa jika Anda perlu menyimpan gambar tertentu, cukup klik kanan padanya dan pilih perintah menu konteks yang sesuai. Ini mungkin tampak lucu bagi Anda, tetapi dengan gambar yang disetel menggunakan properti CSS background, teknik ini tidak berfungsi. Gambar seperti itu tidak dapat dimuat dengan cara biasa. Untuk mengunduhnya, Anda perlu memeriksa kode elemen di alat pengembang dan menggunakan tautan dari url.

▍ Elemen Pseudo


Elemen pseudo juga dapat digunakan dengan gambar yang ditentukan oleh properti CSS background. Misalnya, untuk menampilkan satu gambar di atas yang lain. Dalam hal elemen, <img>ini hanya dapat dicapai dengan menggunakan elemen tambahan yang ditumpangkan pada elemen lain.

Sekarang mari kita bicara tentang menggunakan gambar SVG

Gambar SVG


Kekuatan utama gambar SVG adalah kemampuan untuk menskalakannya tanpa kehilangan kualitas. Selain itu <svg>, selain gambar SVG , elemen juga dapat menampilkan file JPG dan PNG. Berikut adalah kode HTML untuk gambar SVG:

<svg width="200" height="200">
  <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>


Gambar JPG ditampilkan melalui elemen SVG.

Perhatikan atributnyapreserveAspectRatio? Berkat dia, gambar menempati lebar dan tinggi penuh elemen<svg>, tanpa peregangan dan tidak berkontraksi.

Jika lebar elemen<image>lebih besar, itu akan mengisi elemen induk (<svg>) lebarnya, tetapi tidak akan meregang.


Gambar tidak meregang.

Ini sangat mirip dengan cara kerja properti CSSobject-fit: coverataubackground-size: cover.

▍Tentang ketersediaan konten


Jika kita berbicara tentang ketersediaan konten saat menggunakan gambar SVG, saya dapat mengatakan bahwa percakapan seperti itu segera mengingatkan saya pada suatu elemen <title>. Di bawah ini adalah contoh kode di mana <svg>elemen berikut ditambahkan ke output gambar dengan cara :

<svg width="200" height="200">
   <title>A photo of blueberry Cheescake</title>
   <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>

Di sini, apalagi, Anda dapat menggunakan elemen <desc>:

<svg width="200" height="200">
   <title>A photo of blueberry Cheescake</title>
   <desc>A meaningful description about the image</desc>
   <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>

▍Kesulitan dengan memuat <svg> gambar oleh pengguna biasa


Gambar ditampilkan dengan bantuan <svg>, Anda hanya dapat mengunduh dengan menganalisis kodenya dan membuka tautan ke gambar. Ini adalah minus, tetapi jika seseorang ingin membatasi kemampuan pengguna biasa untuk mengunduh gambar, fitur ini mungkin berguna. Paling tidak, ini akan mengurangi kemungkinan mengunduh gambar seperti itu.

→ Ini adalah contoh untuk bagian ini

Skenario untuk menggunakan metode output gambar yang berbeda


▍Bagian halaman ditampilkan di bagian atas


Saat mendesain bagian halaman yang terletak di bagian atas (bagian seperti itu disebut "Bagian Pahlawan"), kadang-kadang diperlukan untuk membuatnya menampilkan gambar, di mana tajuk dan beberapa data lain tentang halaman ditampilkan. Mungkin terlihat seperti berikut ini.


Bagian atas halaman dengan gambar dan prasasti

Perhatikan fakta bahwa ada gambar latar belakang. Bagaimana Anda mengembangkan bagian halaman seperti itu? Tetapi, sebelum Anda menjawab pertanyaan ini, izinkan saya merumuskan beberapa persyaratan:

  • Gambar harus mendukung perubahan dinamis yang mudah saat mengintegrasikan halaman dengan CMS backend.
  • Elemen harus ditempatkan di atas gambar untuk menyederhanakan membaca teks.
  • Hal ini diperlukan untuk mendukung output gambar dalam tiga ukuran: kecil, sedang dan besar. Masing-masing ditujukan untuk area tampilan sendiri.

Sebelum melanjutkan ke solusi masalah ini, kami bertanya pada diri sendiri tentang sifat gambar latar belakang yang akan digunakan di sini. Berikut ini beberapa pertanyaan pendukung untuk membantu kami memahami hal ini:

  1. Apakah penting gambar dari sudut pandang pengguna, atau dia tidak akan kehilangan apa pun jika tidak terlihat?
  2. Apakah gambar ini perlu ditampilkan di area tampilan dari semua ukuran?
  3. Apakah gambar ini statis, atau apakah ia berubah secara dinamis (dari CMS, misalnya)?

Pertimbangkan beberapa opsi untuk menyelesaikan masalah ini.

Solusi pertama untuk masalah tersebut


Menggunakan properti CSS backgrounddengan beberapa gambar yang ditentukan di dalamnya, salah satunya dapat digunakan untuk elemen yang ditumpangkan pada gambar utama, dan yang lainnya untuk mewakili gambar itu sendiri. Lihatlah CSS ini:

.hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var('landscape.jpg');
    background-repeat: no-repeat;
    background-size: 100%, cover;
}

Pendekatan ini memungkinkan Anda untuk mencapai apa yang background-imageAnda inginkan, Anda dapat mengubahnya menggunakan JavaScript:

<section class="hero" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('landscape.jpg');">
  <!-- Hero content -->
</section>

backgroundSaya mendefinisikan properti dalam gaya yang dapat disematkan. Meskipun ini adalah kode yang berfungsi, itu terlihat buruk dan tidak praktis.

Mungkin Anda bisa menggunakan variabel CSS di sini?

<section class="hero" style="--bg-url: url('landscape.jpg')">
  <!-- Hero content -->
</section>

Ini adalah hasil dari studi gaya.


Pelajari gaya elemen

Sekarang, untuk mengubah gambar latar belakang, kita hanya perlu mengubah variabel--bg-url. Ini sejuta kali lebih baik daripada gaya inline.

Analisis


  1. Solusi yang diusulkan untuk masalah di sini hanya baik jika gambar tidak terlalu penting.
  2. Mungkin cocok jika gambar tidak direncanakan untuk diubah secara dinamis, menggunakan CMS yang digunakan pada backend proyek.

→ Ini adalah contoh yang bagus

Solusi kedua untuk masalah ini


Di sini kita akan menggunakan alat output gambar HTML:

<section class="hero">
  <h2 class="hero__title">Using Images in CSS</h2>
  <p class="hero__desc">An article about which and when to use</p>
  <img src="landscape.jpg" alt="">
</section>

Di CSS, Anda perlu menyesuaikan posisi absolut gambar dengan menempatkannya di bawah teks. Selain itu, di sini kita membutuhkan elemen pseudo yang akan memainkan peran elemen yang ditumpangkan pada gambar:

.hero {
    position: relative;
}

.hero img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

Solusi ini bagus karena ketika menggunakannya sangat mudah untuk mengubah atribut gambar src. Selain itu, lebih baik untuk kasus ketika gambar output penting.

Selain itu, saya perhatikan bahwa saya suka <img>-gambar bahwa saat menggunakannya, Anda dapat menggunakan mekanisme cadangan yang berfungsi jika file gambar gagal dimuat. Mekanisme bantu seperti itu, katakanlah, keluaran alih-alih gambar latar belakang berwarna sederhana, setidaknya akan memungkinkan pengguna untuk membaca teks:

.hero img {
    /*   */
    background: #2962ff;
  }


Warna latar belakang ditampilkan jika gambar gagal dimuat.

Yang bagus adalah warna latar belakang hanya ditampilkan jika gambar gagal dimuat. Itu akan cocok untuk kita.

→ Ini adalah contoh yang bagus

▍ Logo situs web


Logo itu sangat penting. Logo menambah keunikan pada situs. Untuk menampilkan logo pada halaman, kami dapat menggunakan beberapa kemungkinan:

  • Elemen <img>yang menampilkan gambar PNG, JPG atau SVG.
  • Gambar SVG bawaan.
  • Gambar latar belakang.

Mari kita bicara tentang cara menampilkan gambar yang harus digunakan untuk logo, dan bagaimana memilih dengan tepat apa yang Anda butuhkan.

Logo dengan banyak detail.


Jika logo memiliki banyak detail atau mengandung banyak bentuk, menampilkannya menggunakan gambar SVG bawaan mungkin bukan ide yang bagus. Dalam situasi seperti itu, saya sarankan menggunakan tag <img>yang dengannya PNG, JPG atau gambar SVG ditampilkan.


Logo lain-lain

Berikut ini adalah kode untuk menampilkan logo serupa yang disimpan dalam format SVG:

<a href="#"><img src="logo.svg" alt="Nature Food"></a>

Logo sederhana untuk menghidupkan



Logo animasi sederhana

Pertimbangkan situasi di mana ada logo sederhana yang berisi gambar atau teks tertentu. Saat Anda mengarahkan kursor, Anda perlu mengubah warna bentuk dan teks. Bagaimana cara melakukannya? Menurut saya, dalam situasi ini yang terbaik adalah menggunakan gambar SVG bawaan:

<a href="#">
    <svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
        <rect fill="#D8D8D8" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
        <text font-family="Rubik-Medium, Rubik" font-size="25" font-weight="400" fill="#6F6F6F">
          <tspan x="63.923" y="36.923">Rect</tspan>
        </text>
      </g>
    </svg>
</a>

Berikut adalah gaya-gayanya:

.logo rect,
.logo text {
  transition: 0.3s ease-out;
}

.logo:hover rect,
.logo:hover text {
  fill: #4a7def;
}

Ini adalah proyek demo untuk bagian ini:

Logo responsif


Ketika saya memikirkan logo responsif, saya ingat logo Smashing Magazine. Saya suka cara perubahan ukurannya. Berikut adalah tata letak yang menggambarkan logo dasar dan logo yang ditampilkan di area tampilan besar.


Logo responsif

Untuk menerapkan perilaku logo ini, sebuah elemen<picture>yang memungkinkan Anda untuk menggambarkan dua versi logo adalahideal:

<a class="logo" href="/">
    <picture>
      <source media="(min-width: 1350px)" srcset="sm-logo--full.svg"><img src="sm-logo.svg" alt="Smashing Magazine"></picture>
  </a>

Di CSS, Anda perlu mengubah lebar logo jika lebar viewport sama dengan atau lebih besar 1350px:

.logo {
  display: inline-block;
  width: 45px;
}

@media (min-width: 1350px) {
  .logo {
    width: 180px;
  }
}

Di hadapan kami adalah solusi sederhana dan dapat dipahami untuk masalah logo responsif.

→ Ini adalah contoh kerja untuk bagian ini

Logo dengan gradien



Contoh logo dengan gradien

Ketika bekerja dengan logo yang memiliki gradien, Anda harus menyadari bahwa mengekspor logo seperti itu dari aplikasi desain, seperti Adobe Illustrator atau Sketch, bisa jauh dari sempurna. Selama proses ini, sesuatu di logo mungkin rusak.

Saat menggunakan format SVG, Anda dapat dengan mudah menerapkan warna gradien ke logo. Dalam contoh berikut, saya menggunakan<linearGradient>, mengatur dengan itu atribut teksfill:

<svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="gradient" x1="0%" y1="100%" x2="0%" y2="0%">
        <stop offset="0%" stop-color="#4a7def"></stop>
        <stop offset="50%" stop-color="#ab4787"></stop>
      </linearGradient>
    </defs>
      <g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
        <rect fill="#AB4787" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
        <text font-family="Rubik-Medium, Rubik" font-size="30" font-weight="400" fill="url(#gradient)">
          <tspan x="63.923" y="36.923">Rect</tspan>
        </text>
      </g>
</svg>

→ Ini sebuah contoh

▍Avatar pengguna


Avatar datang dalam berbagai bentuk, tetapi biasanya avatar persegi atau bulat. Dalam contoh ini, saya ingin membagikan satu saran penting yang mungkin berguna bagi Anda.

Untuk memulai, lihat tata letak berikut. Harap dicatat bahwa ada dua avatar yang rapi dengan tepian yang jelas.


Sepasang avatar yang sukses

Dan bagaimana jika pengguna, sebagai avatar, memutuskan untuk menggunakan gambar dengan latar belakang yang hampir putih? Jika demikian, maka avatar akan terlihat jauh dari bagus.


Avatar yang gagal

Perhatikan bahwa gambar sebelumnya menunjukkan avatar dengan latar belakang yang sangat cerah. Sebagai hasilnya, untuk memahami bahwa ia memiliki bentuk bundar, kita harus melihatnya dengan cermat. Ini buruk. Untuk memperbaiki masalah ini, Anda perlu menambahkan batas bagian dalam ke avatar. Perbatasan ini akan digunakan sebagai solusi tambahan, diterapkan ketika gambar terlalu cerah.


Di sebelah kiri adalah avatar dengan latar belakang yang terlalu terang. Di sebelah kanan adalah hasil dari penyelesaian masalah ini. Ada

beberapa cara untuk menyelesaikan masalah ini:

  • Menggunakan <img>.
  • Menggunakan <img>dan elemen tambahan <div>.
  • Menggunakan <div>dan properti CSS background.
  • Menggunakan <image>c <svg>.

Apa yang paling cocok di sini? Ayo cari tahu.

Menggunakan <img>


Bagaimana cara mengatasi masalah ini? Mungkin - hanya menyesuaikan batas elemen? Kami sedang menjajaki kemungkinan ini (saya segera meminta maaf atas fakta bahwa di bawah Anda akan sering melihat foto saya).

Inilah CSS-nya:

.avatar {
    border: 2px solid #f2f2f2;
}

Ini tampilannya.


Hasilnya tidak seperti yang diharapkan: perbatasan gelap terletak di luar perbatasan gambar.

Apa yang terjadi tidak sesuai dengan kita. Kita membutuhkan gambar untuk memiliki batas dalam yang menyatu dengan gambar gelap. Akibatnya, ternyata pengaturan batas elemen tidak akan membantu kami di sini.

Menggunakan <img> dan helper <div>


Biarkan saya mengingatkan Anda bahwa kita dihadapkan dengan tugas menambahkan bayangan batin ke gambar. Kami tidak dapat menyelesaikan masalah ini menggunakan bayangan bagian dalam ( box-shadow) dan kata kunci inset, karena elemen HTML <img>tidak mendukung bayangan bagian dalam. Untuk mengatasi masalah ini, Anda perlu menempatkan avatar di elemen <div>dan menggunakan elemen lain, yang tujuannya adalah untuk menggambar perbatasan internal.

Ini adalah kode HTML:

<div class="avatar-wrapper">
     <img class="avatar" src="shadeed2.jpg" alt="A photo of Ahmad Shadeed">
     <div class="avatar-border"></div>
</div>

Berikut adalah gaya-gayanya:

.avatar-wrapper {
  position: relative;
  width: 150px;
  height: 150px;
}

.avatar-border {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.1);
}

Jika elemen <div>memiliki batas dicat 10% hitam, ini akan memastikan bahwa perbatasan tersebut tidak akan terlihat dalam gambar gelap, dan akan terlihat dalam cahaya, menyorot perbatasannya. Ini tampilannya.


Batas bagian dalam, hanya terlihat dalam gambar terang

→ Ini adalah contoh untuk bagian ini

Menggunakan <div> dan properti latar belakang CSS


Jika saya menggunakan elemen untuk menampilkan avatar <div>, itu mungkin berarti bahwa gambar memainkan peran dekoratif. Satu contoh muncul di pikiran saya, ditunjukkan di bawah ini. Di sini, berbagai avatar tersebar di halaman.


Avatar yang tersebar di seluruh halaman.

HTML di sini adalah:

<div class="avatar" style="--img-url: url(shadeed2.jpg)"></div>

Inilah gayanya:

.avatar {
  background: var(--img-url) center/cover;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(#000, 0.1);
}

Di sini Anda dapat menemukan contoh yang berfungsi.

Menggunakan <gambar> di <svg>


Saya percaya bahwa ini adalah solusi paling menarik untuk masalah kita. Saya menemukan trik ini saat mempelajari desain Facebook baru .

Ini markupnya:

<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>

Pertama, mari kita uraikan kode ini. Ini dia apa adanya:

  1. Topeng memotong gambar lingkaran.
  2. Grup yang menggunakan topeng.
  3. Gambar itu sendiri dengan atribut preserveAspectRatio=«xMidYMid».
  4. Lingkaran yang digunakan sebagai perbatasan internal.

Begini caranya:

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

→ Di sini Anda dapat menemukan contoh

Dengan avatar, kami berhasil menemukannya. Karena itu, kami pindah.

▍ Kolom input dengan ikon


Berikut adalah contoh bidang input dengan ikon.


Kolom input dengan ikon Kolom

seperti itu cukup umum. Bagaimana cara melengkapi bidang dengan ikon? Apa yang terjadi ketika bidang seperti itu menerima fokus? Jelajahi masalah ini.

Ini adalah kode HTML:

<p>
    <label for="name">Full name</label>
    <input type="text" id="name">
</p>

Saya percaya solusi terbaik untuk masalah ini adalah menggunakan gambar latar belakang yang didefinisikan oleh CSS. Ini sederhana, cepat dan tidak memerlukan elemen HTML tambahan:

input {
    background-color: #fff;
    background-image: url('user.svg');
    background-size: 20px 20px;
    background-position: left 10px center;
    background-repeat: no-repeat;
}

Anda dapat menggunakan gambar SVG yang disandikan URL untuk mengubah warna ikon saat bidang menerima fokus. Ini sangat mudah untuk dilakukan. Sebagai contoh, ini alat yang dirancang untuk tujuan ini , yang dikembangkan oleh Yoksel.

Berikut ini sebuah contoh.

▍CSS gaya untuk dicetak


Pengunjung halaman mungkin perlu mencetaknya di printer. Misalkan ada resep kuliner pada halaman tersebut, dan Anda perlu mencetaknya sehingga di dapur Anda tidak harus terus-menerus melihat ponsel atau komputer Anda.

Jika ada langkah-langkah dalam resep yang diilustrasikan dengan gambar, penting bahwa mereka masuk dalam versi cetaknya, jika tidak, orang yang mencetak halaman tidak akan dapat menggunakan resep tersebut.

Cobalah untuk tidak memasukkan halaman yang dimaksudkan untuk mencetak gambar yang ditampilkan menggunakan latar belakang properti CSS


Jika gambar dimasukkan dalam halaman menggunakan properti CSS background, maka itu tidak akan dicetak. Tempat ditampilkan akan kosong saat mencetak. Ini yang saya bicarakan.


Ruang kosong alih-alih gambar yang disertakan dalam halaman menggunakan properti latar belakang CSS.

Akan ada sedikit penggunaan untuk versi cetak resep. Ini dapat diperbaiki dengan memaksa browser untuk menampilkan gambar yang serupa di versi cetak halaman. Tetapi pendekatan ini tidak berfungsi di Firefox dan di IE. Beginilah tampilannya di CSS:

.element {
    background: url('cheesecake.png') center/cover no-repeat;
    -webkit-print-color-adjust: exact; /*        */
}

Dalam situasi seperti itu, yang terbaik adalah menggunakan elemen HTML <img>. Gambar yang termasuk dalam halaman menggunakan elemen ini dicetak tanpa masalah.

→ Ini sebuah contoh

Ringkasan


Hari ini kami berbicara tentang berbagai cara untuk memasukkan gambar di halaman web, mendiskusikan pro dan kontra mereka, dan memeriksa skenario untuk penggunaannya. Kami harap Anda merasa berguna apa yang Anda pelajari hari ini.

Pembaca yang budiman! Pernahkah Anda mengalami masalah dalam menampilkan gambar di halaman web?

More articles:


All Articles