CSS3 Border-Image Property Membuat Foto Sangat Keren!
Membuat batas bukanlah hal baru di HTML & CSS; kami sudah bisa menambahkan batas sejak awal. Anda mungkin sudah terbiasa dengan batas padat, batas bertitik, batas putus-putus dan sebagainya.
Tapi, dengan properti gambar perbatasan CSS3 baru, membuat batas pada elemen HTML menjadi lebih maju; well, sederhananya, kita sekarang dapat menambahkan perbatasan menggunakan gambar sebagai sumber yang akan memungkinkan kita untuk menambahkan perbatasan yang lebih menarik. Baiklah, sekarang mari kita lihat cara kerja properti ini.
Sintaks dan Dukungan Browser
Gambar perbatasan di CSS3 didefinisikan menggunakan sintaks singkatan:
border-image: [sumber gambar] [irisan] [lebar] [awal] [ulangi];
Sintaksis di atas adalah versi resmi dari W3C yang hanya didukung di Chrome, sementara Opera, Firefox, dan Safari masih memerlukan versi awalan (-Hai-, -moz-, -webkit-), dan Internet Explorer tidak mengejutkan sama sekali tidak mendukung properti ini.
Selanjutnya, [lebar] dan [awal] nilai dalam hal ini gambar batas properti belum didukung di browser apa pun, namun, nilai lebar dapat diganti menggunakan lebar perbatasan milik.
Jadi, singkatnya, untuk saat ini kami hanya dapat menerapkan nilai [sumber gambar], [mengiris] dan [ulangi] .
border-image: [sumber gambar] [irisan] [ulangi];
Irisan Gambar
Sebelum kami melanjutkan untuk menunjukkan properti ini, mari kita bicara tentang “irisan gambar” pertama karena ini adalah sesuatu yang baru dalam mendeklarasikan properti. Irisan gambar di sini akan menentukan potongan gambar yang masing-masing mengambil titik awal dari atas, kanan, bawah, dan kiri dari tepi gambar yang selanjutnya juga akan membagi gambar menjadi sembilan bagian, seperti diilustrasikan dengan gambar berikut.
Pada gambar di atas, Anda akan melihat bagian tersebut 1, 3, 7 dan 9 akan menjadi sudut perbatasan, dan bagian 2, 4, 6 dan 8 akan menjadi tepi atau garis pembatas, memastikan bahwa bagian yang menjadi tepinya dapat diulang atau direnggangkan.
Nilai irisan dapat dideklarasikan dengan a pixel unit atau persentase (%) unit untuk pengukuran yang fleksibel.
lebih banyak referensi:
- Latar Belakang dan Batas CSS Level 3
Membuat Bingkai Foto
Sekarang, mari kita tunjukkan properti dalam contoh nyata.
Kali ini, kami akan mengimplementasikan gambar batas properti untuk membuat bingkai foto dan kami akan menggunakan gambar di bawah ini sebagai sumber. Kami telah hati-hati mengukur gambar sehingga dapat dengan benar diiris, diulang dan diregangkan terlepas dari lebar konten dan tinggi.
catatan: Anda dapat mengunduh gambar di atas dari tautan ini.
Juga, dalam demonstrasi ini kita akan menggunakan Cinemagraph yang menakjubkan dari From Me to You sebagai foto.
(Sumber gambar: From Me To You)
Markup
Markupnya sesederhana ini:
Jangan lupa ganti images_2 / css3-border-image-making-photos-really-cool_3.jpg dengan foto Anda sendiri.
Gaya
Dan kemudian, mari kita gunakan bingkai gambar batas.
Jika Anda melihat gambar di atas, lebar gambar kami adalah 180px secara keseluruhan. Nilai ini kemudian dapat dibagi menjadi 6 dimana setiap divisi berada 30px; dan jadi kami akan mengiris gambar untuk 30px.
Jika Anda menggunakan nilai panjang untuk slice, Anda harus mengecualikan px unit, karena akan diterjemahkan secara otomatis ke pixel, tetapi jika Anda memutuskan untuk menggunakan persentase, Anda masih perlu menambahkan (%).
Adapun pengulangan gambar, kami akan menggunakan default; ulangi. Atau, Anda dapat menggunakan meregang dan jangan khawatir, gambar perbatasan akan tetap terlihat anggun.
img border-image: url ("images / frame.png") 30 ulangi; -o-border-image: url ("images / frame.png") 30 ulangi; -moz-border-image: url ("images / frame.png") 30 ulangi; -webkit-border-image: url ("images / frame.png") 30 ulangi; lebar-batas: 30px; Selain itu, kami juga ingin menempatkan gambar di tengah jendela browser serta menambahkan tekstur latar belakang pada dokumen untuk membuatnya lebih menarik..
html background: url ('images / lightpaperfibers.png'); .wrapper margin: 20px otomatis; tinggi: 476px; lebar: 675px; perataan teks: tengah; Baiklah, saya pikir kita sudah selesai di sini, sekarang mari kita melihatnya di browser.
- Demo
- Sumber Unduhan
Apakah Anda merasa seperti sedang melihat lukisan ajaib di Hogwarts?
Pemikiran terakhir
Ini gambar batas tidak diragukan lagi adalah tambahan yang bagus dalam keluarga CSS3; kita tidak lagi terbatas pada perbatasan dataran sederhana.
Dan dalam posting ini, kami telah menunjukkan kepada Anda bagaimana kami dapat membuat bingkai gambar tanpa khawatir tentang konten atau dalam hal ini dimensi foto (lebar & tinggi). Tinggi dan lebar bisa fleksibel, selama sumber perbatasan dapat diulang atau diregangkan.
Terakhir, jika Anda masih sedikit bingung gambar batas, ada alat yang dapat Anda gunakan untuk membantu Anda membuatnya lebih mudah: alat perbatasan gambar
