Meninjau kembali gambar batas CSS – Beragampengetahuan

Dalam artikel saya sebelumnya tentang “Memeriksa Kembali Tata Letak Multi-Kolom CSS”, saya menyebutkan bahwa sudah hampir dua puluh tahun sejak saya menulis buku pertama saya Di luar CSS. Di dalamnya, saya menjelaskan bagaimana dan mengapa sifat CSS yang muncul digunakan pada waktu itu.

Sepuluh tahun kemudian, saya menulis Desain Web Cooked Edisi Hari Jadi Kelimamencakup alasan yang sama dan memperkenalkan CSS baru border-image milik.

petunjuk: Saya merilis versi yang diperbarui, Revisiting Beyond CSS Ini dapat dibaca secara online secara gratis. Toko buku saya tersedia dari toko buku saya dengan desain web keriting yang keras.

Saya sangat senang dengan kemungkinan yang ditawarkan properti baru ini. Bagaimanapun, kita sekarang dapat menambahkan gambar ke elemen apa pun, bahkan batas sel tabel dan baris (kecuali batas mereka diatur untuk macet).

Sejak itu, saya sudah menggunakannya border-image sering. Namun, itu tetap menjadi salah satu alat CSS yang paling tidak populer dan saya tidak pernah bisa mencari tahu mengapa dalam hidup saya. Apakah mungkin bagi orang untuk menghindarinya border-image Karena canggung tata bahasa dan tidak intuitif? Mungkin itu karena sebagian besar penjelasan tidak dapat menyelesaikan jenis masalah implementasi kreatif yang perlu dipecahkan oleh kebanyakan orang. Kemungkinan besar keduanya.

Saya telah berada di situs web baru akhir-akhir ini untuk komposer pemenang penghargaan Emmy Mike Worth. Dia mempekerjakan saya untuk membuat desain grafis tinggi untuk menunjukkan karyanya, dan saya menggunakan border-image Dari awal hingga akhir.

Tinjauan singkat tentang properti dan nilai

Pertama, ini adalah ulasan singkat. paling border-image Penjelasan dimulai dengan segmen kode yang sangat diterangi ini:

border-image: \[source\] [slice]/\[width]/[outset\] [repeat]

Ini adalah satu set steno border-image Atribut, tetapi yang terbaik adalah menangani atribut secara terpisah untuk membuatnya lebih mudah untuk menguasai konsep.

satu border-imageSumber

Saya akan mulai dengan sumber gambar format bitmap atau vektor atau gradien CSS:

border-image-source: url('/img/scroll.png');

Ketika saya memasukkan gambar SVG ke dalam batas, saya memiliki beberapa opsi. Saya dapat menggunakan file SVG eksternal:

border-image-source: url('/img/scroll.svg');

Atau, saya mungkin menggunakan alat seperti base64.guru untuk mengonversi SVG ke data URI, meskipun SVG dan HTML berbasis XML, jadi ini tidak disarankan:

border-image-source: url('data:image/svg+xml;base64,…');

Sebagai gantinya, saya dapat menambahkan kode SVG langsung ke nilai URL sumber dan menyimpan permintaan HTTP yang tidak perlu:

border-image-source: url('data:image/svg+xml;utf8,…');

Akhirnya, saya dapat memasukkan gradien kerucut, linier atau radial yang dihasilkan oleh CSS penuh ke dalam batas saya:

border-image-source: conical-gradient(…);

petunjuk: Ingatlah bahwa browser akan membuat yang bermanfaat border-image Latar belakang di atas elemen box-shadow Tetapi lebih rendah dari isinya. Kami akan memperkenalkannya secara rinci nanti.

Potong menjadi satu border-image

Sekarang saya telah menentukan sumber gambar perbatasan, saya dapat memotongnya menjadi kotak dan menerapkannya ke perbatasan menggunakan bagian -bagian di berbagai lokasi di sekitar elemen. Ini mungkin aspek yang paling membingungkan bagi pemula border-image.

paling border-image Deskripsi menunjukkan contoh di mana karya akan memiliki ukuran yang sama, sebagai berikut:

Tetapi, border-image Tidak peduli seberapa kompleks atau tidak teraturnya, itu dapat dikembangkan dari bentuk apa pun.

Tangen tak terlihat memasukkan gambar ke perbatasan dan tonton ulang di sekitar elemen, sebaliknya iris border-image Itu dibagi menjadi sembilan bagian. Garis -garis ini mirip dengan panduan pengiris yang ditemukan dalam aplikasi grafis. Fragmen -fragmen ini dimasukkan ke dalam sembilan area batas elemen.

ini border-image-slice Atribut mendefinisikan ukuran setiap irisan dengan menentukan jarak dari setiap tepi gambar. Saya dapat menggunakan jarak yang sama dengan setiap tepi:

border-image-slice: 65

Saya dapat menggabungkan bagian atas/bawah dan kiri/rvalues ​​bersama -sama:

border-image-slice: 115 65;

Atau, saya dapat menentukan nilai jarak untuk keempat garis potong, putar searah jarum jam: atas, kanan, bawah, kiri:

border-image-slice: 65 65 115 125;

Sudut kiri atas gambar akan digunakan untuk sudut kiri atas perbatasan elemen. Sudut kanan bawah akan digunakan untuk kanan bawah, dan sebagainya.

Saya tidak perlu menambahkan unit ke border-image-slice Ketika browser menggunakan gambar bitmap dengan benar, nilai dengan benar mengasumsikan bahwa bitmap menggunakan piksel. SVG viewBox Membuat mereka berbeda, jadi saya lebih suka menentukannya juga height Dan width:

<svg height="600px" width="600px">…</svg>

Jangan lupa untuk mengatur lebar batas -batas ini, karena tanpa mereka, gambar perbatasan tidak akan ditampilkan:

border-image-width: 65px 65px 115px 125px;

Isi pusat

Sejauh ini saya telah menggunakan keempat sudut dan sisi gambar, tetapi bagaimana dengan pusatnya? Secara default, browser akan mengabaikan pusat gambar setelah diiris. Tapi saya bisa menggunakannya dengan menambahkannya fill Kata kunci saya border-image-slice nilai:

border-image-slice: 65px 65px 115px 125px fill;

Mengatur duplikat

Dengan sudut gambar batas saya, saya dapat mengalihkan perhatian saya ke tepi di antara mereka. Seperti yang Anda bayangkan, irisan di bagian atas gambar akan ditempatkan di tepi atas. Hal yang sama berlaku untuk tepi kanan, bawah dan kiri. Dalam desain yang fleksibel, kita tidak pernah tahu lebar atau ketinggian tepi ini, jadi saya dapat menyempurnakan bagaimana gambar mengulang atau meregang saat mengisi tepi.

ketegangan: Ketika gambar irisan rata atau halus, dapat meregangkan untuk mengisi ketinggian atau lebar apa pun. Bahkan sangat kecil 65px Irisan dapat meluas hingga ratusan atau ribuan piksel tanpa degradasi.

border-image-repeat: stretch;

mengulang: Jika gambar memiliki tekstur, peregangan itu bukan pilihan, sehingga ketinggian atau lebar apa pun dapat diisi berulang kali.

border-image-repeat: repeat;

Bulat: Jika gambar memiliki pola atau bentuk yang tidak dapat diregangkan, saya perlu mencocokkan tepi pengulangan, saya dapat menentukan pengulangan round. Browser akan mengubah ukuran gambar sehingga hanya seluruh bagian yang berada di dalam tepi.

border-image-repeat: round;

ruang angkasa:serupa roundSaat menggunakan sifat spasial, hanya seluruh bagian yang akan ditampilkan di dalam tepi. Namun, browser tidak mengubah ukuran gambar, tetapi menambahkan spasi ke duplikat.

border-image-repeat: space;

Ketika saya perlu menentukannya secara terpisah stretch,,,,, repeat,,,,, roundatau space Nilai setiap tepi, saya dapat menggunakan beberapa kata kunci:

border-image-repeat: stretch round;

Mulai a border-image

Terkadang saya membutuhkan gambar untuk melampaui jangkauan elemen border-box. menggunakan border-image-outset Properti, saya bisa melakukannya. Sintaksis termudah melewati 10px:

border-image-outset: 10px;

Tentu saja, ada empat batas pada setiap elemen, dan saya juga dapat menentukan setiap penemuan secara terpisah:

border-image-outset: 20px 10px; 
/* or */
border-image-outset: 20px 10px 0;

border-image Beraksi

Mike Worth adalah komposer video game yang memenangkan Emmy untuk karyanya. Dia suka animasi dari tahun 90 -an – terutama animasi Disney Cerita bebek – Dia meminta saya untuk membuat karya seni khusus dan mengembangkan desain bergaya retro yang berani.

Tantangan saya ketika Mike berkembang adalah menerapkan desain grafis tinggi saya tanpa merusak kinerja, terutama pada perangkat seluler. Meskipun normal untuk mencapai tujuan yang sama dalam berbagai cara dalam CSS, border-image Biasanya terbukti menjadi yang paling efektif.

Tombol dekoratif

Titik awal yang paling sederhana dan paling jelas adalah membuat tombol yang mengingatkan pada serpihan kerikil dengan tepi yang tidak rata.

Saya membuat SVG berbentuk tablet dan digunakan border-image:

button {
  border-image-repeat: stretch;
  border-image-slice: 10 10 10 10 fill;
  border-image-source: url('data:image/svg+xml;utf8,…');
  border-image-width: 20px;
}

Saya sudah mengaturnya border-image-repeat Di semua tepi stretch Potong menjadi tengah fill Oleh karena itu, tombol batu tulis ini dan kontennya berkembang dengan tinggi atau lebar.

Artikel menggulir

Saya berharap setiap aspek desain situs web Mike dapat mengekspresikan mereknya. Ini berarti melanjutkan tema kartun tahun 90-an dengan konten jangka panjangnya dengan mengubahnya menjadi ikal kertas.

Tanda itu sederhana, hanya ada satu article elemen:

<article>
  <!-- ... -->
</article>

Namun, saya mencoba memutuskan bagaimana menerapkan efek kertas. Ide pertama saya adalah membagi gulungan menjadi tiga file SVG terpisah (atas, tengah dan bawah) dan menambahkan bagian atas dan bawah gulungan menggunakan elemen semu. Saya pertama kali menerapkan grafik yang diulang secara vertikal ke tengah posting saya:

article {
  padding: 10rem 8rem;
  box-sizing: border-box;
  /* Scroll middle */
  background-image: url('data:image/svg+xml;utf8,…');
  background-position: center;
  background-repeat: repeat-y;
  background-size: contain;
}

Saya kemudian menambahkan dua elemen semu, masing-masing berisi konten SVG sendiri:

article:before {
  display: block;
  position: relative;
  top: -30px;
  /* Scroll top */
  content: url('data:image/svg+xml;utf8,…');
}

article:after {
  display: block;
  position: relative;
  top: 50px;
  /* Scroll bottom */
  content: url('data:image/svg+xml;utf8,…');
}

Meskipun implementasi ini berfungsi seperti yang diharapkan, rasanya canggung menggunakan dua elemen semu dan tiga file SVG terpisah. Namun, gunakan border-imageSVG dan tidak ada elemen semu terasa lebih elegan dan sangat mengurangi jumlah kode yang diperlukan untuk mengimplementasikan efek tersebut.

Saya pertama kali membuat SVG dalam bentuk tablet lengkap:

Saya menemukan di mana empat garis singgung berada:

Kemudian saya pertama -tama memilih sumbernya, iris gambar dan atur bagian atas dan bawah sebagai stretch Tepi kiri dan kiri round:

article {
  border-image-slice: 150 95 150 95 fill;
  border-image-width: 150px 95px 150px 95px;
  border-image-repeat: stretch round;
  border-image-source: url('data:image/svg+xml;utf8,…');
}

Hasilnya adalah efek roll fleksibel yang sesuai dengan lebar viewport dan angka atau jenis konten apa pun.

Cakupan Halaman Beranda

Tantangan terakhir saya adalah mengimplementasikan grafik animasi yang saya rancang untuk beranda Mike Worth. Ini berisi SVG latar depan yang mencakup maskot orangutan Mike dan gambar latar belakang zoom:

<section>
  <!-- content -->
  <div>...</div>

  <!-- ape -->
  <div>
    <svg>…</svg>
  </div>
</section>

Saya mendefinisikannya section Sebagai latar belakang lokasi anak -anak mereka:

section {
  position: relative;
}

Lalu saya benar-benar menempatkan elemen semu dan menambahkan zoom ke latar belakangnya:

section:before {
  content: "";
  position: absolute;
  z-index: -1;
  background-image: url('data:image/svg+xml;utf8,…');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}

Saya ingin grafik ini berputar dan menambahkan tindakan halus ke panel, jadi saya menerapkan animasi CSS sederhana ke elemen semu:

@keyframes spin-bg {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

section:before {
  animation: spin-bg 240s linear infinite;
}

Selanjutnya, saya menambahkan topeng CSS yang memudar tepi sosok berskala ke latar belakang. CSS mask-image Atribut menentukan gambar lapisan mask, yang dapat berupa gambar PNG, gambar SVG, atau topeng, atau gradien CSS:

section:before {
  mask-image: radial-gradient(circle, rgb(0 0 0) 0%, rgb(0 0 0 / 0) 60%);
  mask-repeat: no-repeat;
}

Pada titik ini, Anda mungkin bertanya -tanya di mana Anda dapat menggunakan gambar perbatasan dalam desain ini. Untuk menambahkan lebih banyak interaktivitas ke grafik, saya ingin menguranginya opacity dan ubah warnanya ketika seseorang berinteraksi dengannya – dengan menambahkan overlay gradien warna. Salah satu cara termudah tetapi jarang digunakan untuk menerapkan overlay ke elemen adalah menggunakan border-image. Pertama, saya menambahkan nilai default opacity Dan tambahkan brief transition:

section:before {
  opacity: 1;
  transition: opacity .25s ease-in-out;
}

Kemudian, di melayang, saya mengurangi opacity tiba .5 Dan tambahkan satu border-image:

section:hover::before {
  opacity: .5;
  border-image: fill 0 linear-gradient(rgba(0,0,255,.25),rgba(255,0,0,1));
}

Anda mungkin bertanya -tanya mengapa saya belum menggunakan yang lain border-image Saya menjelaskan nilainya sebelumnya, jadi saya akan membedah pernyataan itu. Pertama border-image-slice Nilai, nol piksel memastikan bahwa delapan sudut dan tepi tetap kosong. ini fill Kata kunci memastikan bahwa bagian tengah diisi dengan gradien linier. Kedua, border-image-source adalah gradien CSS linier yang mencampur biru menjadi merah. Browser membuat ini border-image Di latar belakang, tetapi di belakang konten.

Kesimpulan: Anda harus melihatnya lagi border-image

ini border-image Properti adalah alat CSS yang kuat tetapi sering diabaikan yang memberikan fleksibilitas luar biasa. Dengan mengiris, mengulangi dan menerangi gambar, Anda dapat membuat batas yang kompleks, elemen dekoratif, dan bahkan overlay dinamis dengan kode minimal.

Dalam pekerjaan saya untuk situs web Mike Worth border-image Ternyata tak ternilai, meningkatkan kinerja sambil mempertahankan tingkat estetika grafik yang tinggi. Apakah itu untuk tombol, cakupan interaktif atau elemen grafik yang lebih besar, border-image Desain yang menarik secara visual dapat dibuat tanpa mengandalkan tag tambahan atau beberapa aset.

Jika Anda belum mencobanya border-imagesekarang saatnya untuk memeriksa kembali potensinya dan menambahkannya ke toolkit desain.

petunjuk: Situs web Mike Worth akan diluncurkan pada bulan April 2025, tetapi Anda dapat melihat contoh -contoh dalam artikel ini tentang Codepen.

Tentang Andy Clarke

Sering dikenal sebagai salah satu pelopor desain web, Andy Clarke memainkan peran dalam mendorong batas -batas desain web dan dikenal karena desainnya yang kreatif dan menakjubkan secara visual. Karyanya telah menginspirasi banyak desainer untuk mengeksplorasi potensi penuh desain produk dan situs web.

Andy telah menulis beberapa buku terkemuka di industri, termasuk Di luar CSS,,,,, Desain web yang dimasakDan Panduan Artistik untuk Internet. Dia juga bekerja dengan perusahaan dari semua ukuran dan industri untuk mencapai tujuan melalui desain.

Kunjungi studio Andy, barang -barang, dan omong kosong dan periksa Killer Kontraknya, templat kontrak desain web yang populer yang dipercaya oleh ribuan desainer dan pengembang web.

---

Meninjau kembali gambar batas CSS awalnya diterbitkan di beragampengetahuan, sebuah trek yang merupakan bagian dari keluarga Digitalocean. Anda harus menerima buletin.

Dari beragampengetahuan https://ift.tt/3mUJxd4
Dapatkan $ 200 seminggu
Baca selengkapnya