Clever Geek Handbook

CSS dan banyak latar belakang

Properti CSS backgroundadalah salah satu properti yang paling umum digunakan. Namun komunitas pengembangan web belum terlalu menyadari kemungkinan yang diberikan oleh berbagai latar belakang. Di sini, saya akan berbicara serius tentang apa yang dapat dilakukan oleh banyak latar belakang dan bagaimana menggunakan mekanisme CSS standar secara maksimal.



Dalam artikel ini, saya akan membahas properti secara mendetail background-image, memberikan contoh ilustratif untuk berbagi beberapa gambar latar belakang dari suatu elemen, dan mempertimbangkan kekuatan pendekatan ini. Akan ada banyak ilustrasi di sini. Jika Anda tidak akrab dengan properti CSS , itu akan baik jika Anda, sebelum membaca materi, lihatlah ini halaman dokumentasi MDN didedikasikan untuk properti ini.







background



pengantar



Properti CSS backgroundadalah properti singkatan yang memungkinkan Anda menyetel properti elemen umum berikut:



  • klip latar belakang
  • warna latar belakang
  • gambar latar belakang
  • background-origin
  • background-position
  • ulangi latar belakang
  • background-size
  • background-attachment


Di sini kita akan fokus pada properti background-image, background-positiondan background-size.



Perhatikan contoh berikut: 



.element {
  background: url(cool.jpg) top left/50px 50px no-repeat;
}


Posisi awal gambar latar berada di pojok kiri atas elemen. Ukuran gambarnya adalah 50px * 50px. Saat menyetel properti, backgroundpenting untuk mengingat urutan properti yang menentukan posisi dan ukuran gambar latar belakang.





Jalur, posisi, dan ukuran gambar



Pada gambar sebelumnya, nilai yang terkait dengan pengaturan propertibackground-positiondiikuti oleh nilai propertibackground-size. Jika kita meletakkan nilai-nilai ini dalam urutan yang berbeda, kita akan berakhir dengan gaya CSS yang salah. Misalnya - seperti ini: 



.element {
  /* :  CSS */
  background: url(cool.jpg) 50px 50px/top left no-repeat;
}


Posisi gambar latar belakang



Untuk mengatur area background, posisi asli gambar background, gunakan property background-origin. Saya menyukai fleksibilitas yang disediakan properti background-position. Ini memungkinkan Anda untuk memposisikan latar belakang elemen dengan berbagai cara:



  • Kata kunci ( top, right, bottom, left, center).
  • Nilai persentase. Sebagai contoh: 50%.
  • Nilai yang menentukan jarak tertentu. Sebagai contoh: 20px 2.5rem.
  • Nilai yang merepresentasikan padding dari tepi elemen. Sebagai contoh: top 20px left 10px.




Sistem Koordinat Asal dari



sistem koordinat yang digunakan saat memposisikan gambar latar belakang berada di sudut kiri atas elemen. Nilai awal propertibackground-positionadalah0% 0%.



Perlu dicatat bahwa nilaitop leftsama dengan nilaileft top. Browser cukup pintar untuk mengetahui berapa banyak nilai ini pada sumbu X dan berapa banyak pada sumbu Y.





Kiri atas dan kiri atas sama. 



.element {
  background: url(cool.jpg) top left/50px 50px no-repeat;
  /*  -   ,    */
  background: url(cool.jpg) left top/50px 50px no-repeat;
}


Ukuran Gambar Latar Belakang



Nama properti yang menentukan ukuran gambar latar belakang background-sizesecara unik menunjukkan peran properti ini. Ukuran gambar latar adalah lebar dan tingginya. Saat menyetel properti ini, perlu diingat bahwa nilai pertama adalah lebar dan nilai kedua adalah tinggi.





Lebar didahulukan, lalu tinggi



Jika lebar dan tinggi gambar latar belakang sama, ini berarti kita tidak perlu menentukan dua nilaibackground-size. Dalam situasi seperti itu, satu nilai sudah cukup.



Di sini, omong-omong, akan berguna untuk menyebutkan bahwa spesifikasi CSS mengatakan hal berikut tentang ini: "Jika hanya satu nilai yang ditentukan, maka diasumsikan bahwa nilai kedua adalah otomatis." Tetapi mekanisme ini tidak diterapkan di browser, meskipun ini dapat berubah di masa mendatang. Saya berterima kasih kepada Ilya Streltsyn karena telah menarik perhatian saya pada detail ini.





Satu nilai mengatur lebar dan tinggi



Sekarang kita telah membahas dasar-dasar penggunaan propertibackground, mari kita bicara tentang bagaimana bekerja dengan banyak latar belakang.



Beberapa latar belakang



Properti backgrounddapat mendeskripsikan satu lapisan latar belakang, sejauh ini kita telah melihat deskripsi semacam itu, atau - beberapa lapisan, yang propertinya dipisahkan oleh koma. Jika beberapa gambar latar memiliki ukuran yang sama, salah satunya benar-benar tumpang tindih dengan yang lain. 



.element {
  background: url(cool.jpg) top left/50px 50px no-repeat,
    url(cool.jpg) center/50px 50px no-repeat;
}






Menggunakan Beberapa Gambar Latar Belakang



Dalam ilustrasi di atas, sebuah elemen memiliki dua lapisan gambar latar belakang. Masing-masing gambar ini diposisikan berbeda. Ini adalah contoh paling sederhana dalam menggunakan banyak latar belakang. Sekarang mari kita lihat contoh yang lebih maju.



Cara menumpuk gambar latar belakang satu sama lain



Saat melengkapi elemen dengan beberapa gambar latar belakang, jika salah satunya menempati seluruh lebar dan tinggi elemen induk, urutan penumpukan latar belakang menjadi penting. Memutuskan dalam urutan apa latar belakang harus menumpuk satu sama lain bisa jadi rumit. Perhatikan contoh berikut. 



.hero {
  min-height: 350px;
  background: url('table.jpg') center/cover no-repeat,
    url('konafa.svg') center/50px no-repeat; 
}


Di sini kita memiliki gambar tabel ( table.jpg) dan gambar pelat ( konafa.svg). Manakah dari gambar latar berikut yang menurut Anda akan ditampilkan lebih dulu? Gambar meja atau gambar piring?





Elemen dengan dua gambar latar belakang



Jawaban yang benar untuk pertanyaan ini adalah memiliki gambar tabel terlebih dahulu. Dalam CSS, latar belakang yang dideskripsikan pertama dihamparkan pada latar belakang kedua, latar belakang kedua dihamparkan pada latar ketiga, dan seterusnya. Mengubah urutan deskripsi latar belakang memengaruhi tampilan mereka di elemen. 



.hero {
  background: url('konafa.svg') center/50px no-repeat,
  url('table.jpg') center/cover no-repeat;
}






Latar belakang pertama ditumpangkan pada yang kedua



Seperti yang Anda lihat, latar belakang yang ditentukan oleh yang pertama berada di atas latar belakang yang ditentukan oleh yang kedua.



Warna solid



Misalkan kita ingin membuat latar belakang yang solid menggunakan alat latar belakang CSS untuk sebuah elemen. Bagaimana cara melakukannya? Ini, berkat gradien CSS, sangat mudah. Intinya adalah jika Anda menggunakan fungsi linear-gradientdengan warna stop yang sama, ini akan menghasilkan warna solid. 



.hero {
  background: linear-gradient(#3c88Ec, #3c88Ec)
}




Latar Belakang Dibuat Dengan Linear-Gradien Dan Warna Berhenti Sama



Berikut adalah contoh sederhana menggunakan gradien untuk mengatur latar belakang, tetapi gradien sebenarnya dapat digunakan untuk membuat efek yang sangat menarik dan berguna.



Kasus penggunaan dan contoh praktis



▍Gambar latar belakang gelap



Seringkali, untuk membuat teks di bagian atas halaman lebih mudah dibaca, gambar latar belakang bagian tersebut perlu digelapkan. Ini mudah dilakukan dengan dua gambar latar belakang. 



.hero {
  background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
    url("landscape.jpg") center/cover;
}




Gambar latar belakang yang digelapkan



Lebih menariknya, metode yang sama dapat digunakan untuk mewarnai gambar latar belakang elemen. 



.hero {
  background: linear-gradient(135deg, rgba(177, 234, 77, 0.25), rgba(69, 149, 34, 0.25),
    url("landscape.jpg") center/cover;
}




Latar belakang berwarna



▍Menggambar dengan CSS



Kemungkinan menggunakan gradien CSS untuk melukis benar-benar tidak terbatas. Secara khusus, kita berbicara tentang gradien yang dijelaskan menggunakan fungsi linear-gradient, radial-gradientdan lainnya. Dalam contoh sederhana ini, kita akan mencari cara menggambar laptop menggunakan gradien.





Laptop Image



Mari kita uraikan gambar ini dan pikirkan tentang gradien apa yang kita butuhkan.





Bingkai tampilan plastik, layar LCD, pantulan, tepi bundar dari casing, casing



Perhatikan bahwa saat laptop "dibongkar", jauh lebih mudah untuk mengetahui gradien apa yang diperlukan untuk menggambarnya dengan menggunakan teknik menerapkan beberapa latar belakang. Anda mungkin telah memperhatikan bahwa saya menggunakan beberapa lingkaran untuk bertindak sebagai sudut membulat dari casing laptop. Intinya adalah tidak ada cara standar untuk membuat gradien dengan sudut membulat.



Sekarang mari mulai menggambar. Pertama, mari kita definisikan masing-masing gradien sebagai variabel CSS dan mengukur elemen yang sesuai. Saya suka menggunakan Variabel CSS karena dapat mengurangi kompleksitas kode, membuat kode lebih bersih dan lebih mudah dibaca. Setelah gradien dijelaskan, Anda dapat melanjutkan ke pemosisiannya. 



:root {
  --case: linear-gradient(#222, #222);
  --case-size: 152px 103px;

  --display: linear-gradient(#fff, #fff);
  --display-size: 137px 87px;

  --reflection: linear-gradient(205deg, #fff, rgba(255, 255, 255, 0));
  --reflection-size: 78px 78px;

  --body: linear-gradient(#888, #888);
  --body-size: 182px 9px;

  --circle: radial-gradient(9px 9px at 5px 5.5px, #888 50%, transparent 50%);
  --circle-size: 10px 10px;
}


Jadi, kami telah mendeskripsikan gradien dan mengatur ukurannya. Sekarang mari kita pikirkan tentang positioning mereka. Solusi untuk masalah ini akan difasilitasi oleh diagram skema laptop di bawah ini.





Ilustrasi skema laptop



Implementasi pantulan cahaya dari bingkai tampilan laptop



Seperti yang telah disebutkan, lapisan latar belakang, yang harus ditempatkan di atas semua lapisan lainnya, harus ditentukan terlebih dahulu. Dalam kasus kami, gradien pertama akan menjadi salah satu yang mensimulasikan pantulan cahaya dari bingkai tampilan laptop.





Pantulan cahaya dari bingkai layar laptop



layar LCD



Layar laptop berada di tengah sumbu X, dan sumbu Y diimbangi dalam 6piksel dari aslinya.





Layar laptop



Bingkai tampilan



Bingkai berada di bawah tampilan, berpusat pada sumbu X, dan pada sumbu Y diimbangi 0pxdari asalnya.





Bingkai tampilan



Casing laptop



Dan ini adalah elemen yang paling menarik. Untuk memulainya, kita harus memperhitungkan bahwa elemen yang mewakili casing laptop adalah persegi panjang, dan fakta bahwa casing memiliki tepi membulat. Ini dicapai dengan menggunakan sepasang lingkaran.





Casing laptop



Gambar jadi



:root {
  --case: linear-gradient(#222, #222);
  --case-size: 152px 103px;
  --case-pos: center 0;

  --display: linear-gradient(#fff, #fff);
  --display-size: 137px 87px;
  --display-pos: center 6px;

  --reflection: linear-gradient(205deg, #fff, rgba(255, 255, 255, 0));
  --reflection-size: 78px 78px;
  --reflection-pos: top right;

  --body: linear-gradient(#888, #888);
  --body-size: 182px 9px;
  --body-pos: center bottom;

  --circle: radial-gradient(9px 9px at 5px 5.5px, #888 50%, transparent 50%);
  --circle-size: 10px 10px;
  --circle-left-pos: left bottom;
  --circle-right-pos: right bottom;
}

.cool {
  width: 190px;
  height: 112px;

  background-image: var(--reflection), var(--display), var(--case), var(--circle), var(--circle), var(--body);

  background-size: var(--reflection-size), var(--display-size), var(--case-size), var(--circle-size), var(--circle-size), var(--body-size);

  background-position: var(--reflection-pos), var(--display-pos), var(--case-pos), var(--circle-left-pos), var(--circle-right-pos), var(--body-pos);

  background-repeat: no-repeat;

  /*outline: solid 1px;*/
}


Berikut adalah proyek CodePen yang dapat Anda coba.



▍Mencampur beberapa latar belakang



Kemampuan untuk menggunakan mode latar belakang pencampuran yang berbeda, saling melengkapi satu sama lain, membuka cakupan yang luas untuk mencapai berbagai efek. Cara termudah untuk menggunakan teknik ini adalah dengan desaturasi gambar. Bayangkan Anda memiliki gambar latar belakang berwarna di CSS yang ingin Anda desaturasi, hitam dan putih.





Warna gambar dan lapisan bantu hitam



Perhatikan bahwa potongan CSS berikut menggunakan propertibackground-blend-mode: color. Inilah yang memungkinkan Anda mencapai efek yang diinginkan. 



.hero {
  background: linear-gradient(#000, #000),
  url("landscape.jpg") center/cover;
  background-blend-mode: color;
}




Gambar Desaturated



Apakah Anda menggunakan banyak latar belakang di CSS?





More articles:


All Articles