Bingkai komentar dengan sudut css. Bingkai dan batas. Membulatkan sudut dengan radius batas
Vlad Merzhevich
Menggunakan CSS, Anda dapat menambahkan batas ke elemen dengan beberapa cara. Pada dasarnya, tentu saja, properti perbatasan digunakan, sebagai yang paling universal, serta garis besar dan, yang mengejutkan, box-shadow , yang tugas utamanya adalah menciptakan bayangan. Selanjutnya, kita akan mempertimbangkan metode-metode ini dan perbedaannya satu sama lain.
garis besar properti
Properti paling sederhana untuk membuat bingkai. Ini memiliki parameter yang sama dengan border , tetapi berbeda secara signifikan dalam beberapa detail:
- garis besar ditampilkan di sekitar elemen (batas di dalam);
- garis besar tidak mempengaruhi dimensi elemen (batas ditambahkan ke lebar dan tinggi elemen);
- garis besar hanya dapat diatur di sekeliling seluruh elemen, tetapi tidak pada masing-masing sisi (perbatasan dapat digunakan untuk sisi mana pun atau sekaligus);
- outline tidak terpengaruh oleh radius fillet yang ditentukan oleh properti border-radius (perbatasan terpengaruh).
Timbul pertanyaan – dalam kasus apa garis besar diperlukan, ketika perannya, meskipun terdapat perbedaan-perbedaan, sepenuhnya diambil alih oleh perbatasan? Situasinya tidak banyak, tetapi ada yang terjadi:
- membuat bingkai multi-warna yang rumit;
- menambahkan bingkai ke elemen saat Anda mengarahkan mouse ke atasnya;
- menyembunyikan batas yang secara otomatis ditambahkan browser ke beberapa elemen saat menerima fokus;
- untuk outline, Anda dapat mengatur jarak dari tepi elemen ke bingkai menggunakan properti outline-offset, untuk membuat .
Bingkai multi-warna
Anda perlu memahami bahwa garis besar sama sekali tidak menggantikan batas dan mungkin ada bersamaan dengannya, seperti yang ditunjukkan pada contoh 1.
Contoh 1: Membuat Bingkai
DI DALAM dalam contoh ini bingkai hitam ditambahkan di sekitar elemen, yang dipisahkan dari latar belakang dengan batas putih (Gbr. 1).
Beras. 1. Bingkai di sekeliling elemen
Bingkai saat menggunakan: arahkan kursor
Saat menambahkan bingkai melalui batas, lebar elemen bertambah, yang cukup terlihat saat menggabungkan batas dan kelas semu :hover. Ada dua cara untuk “memenangkan” ini. Cara paling sederhana adalah mengganti border dengan outline , yang seperti kita ketahui tidak mempengaruhi ukuran elemen (contoh 2).
Contoh 2: Bingkai saat Melayang
garis besar tidak selalu cocok, jika hanya karena pembulatan sudut tidak mempengaruhinya. Metode kedua cocok di sini - tambahkan bingkai tak terlihat atau bingkai yang cocok dengan warna latar belakang, lalu ubah parameternya saat mengarahkan kursor (contoh 3). Maka tidak akan terjadi perpindahan elemen, karena frame awalnya sudah ada. Namun kita selalu ingat bahwa lebar suatu elemen adalah penjumlahan dari nilai width , border di sebelah kiri dan border di sebelah kanan. Situasi serupa terjadi pada ketinggian.
Contoh 3: Bingkai saat Melayang
Perbatasan di sekitar bidang formulir
Di beberapa browser (Chrome, Safari, versi terbaru Opera) ikon kecil ditampilkan di sekitar bidang formulir saat menerima fokus. bingkai warna(Gbr. 2). Untuk menghapusnya, cukup tambahkan nilai none ke properti outline di style, seperti yang ditunjukkan pada contoh 4.
Beras. 2. Bingkai di sekitar margin
Contoh 4. Melepas bingkai
Bingkai melalui bayangan kotak
Meskipun properti box-shadow dimaksudkan untuk menambahkan bayangan di sekitar elemen, properti ini juga dapat digunakan untuk membuat batas yang tidak dapat dibuat menggunakan border atau outline. Ini semua berkat fakta bahwa jumlah bayangan bisa tidak terbatas, yang parameternya dicantumkan dipisahkan dengan koma.
Untuk mendapatkan bingkai, tiga parameter pertama harus disetel ke nol; parameter tersebut bertanggung jawab atas posisi bayangan dan keburamannya. Parameter keempat dalam hal ini bertanggung jawab atas ketebalan batas, dan parameter kelima menentukan warna batas. Untuk rangka kedua, parameter keempat sama dengan jumlah ketebalan kedua rangka.
Contoh 4 menunjukkan cara menambahkan dua bingkai dan satu batas ke kanan menggunakan properti bayangan kotak tunggal.
Contoh 4: Menggunakan bayangan kotak
Hasil dari contoh ini ditunjukkan pada Gambar. 3.
Beras. 3. Bingkai yang dibuat oleh properti box-shadow
, , - Properti CSS - (Transparan) - Properti CSS. Bertanggung jawab untuk membuat bingkai diagonal
- "px" - nilai dalam piksel
Pada artikel ini kami akan berbicara dengan Anda tentang membuat bingkai, tetapi bukan bingkai persegi biasa, tetapi bingkai bulat. Mereka punya lebih banyak pemandangan yang indah daripada bingkai persegi biasa tanpa pembulatan.
Milik
Pada artikel ini kita akan melihat lebih dekat cara membuat bingkai bulat dan banyak lagi. Ada yang namanya batas segitiga di CSS, tetapi lebih dari itu di bawah.
Bingkai pembulatan menggunakan
html( margin: 0; padding: 15vh 0 0 0; ) #content( batas: 5px merah solid; tinggi: 70vh; lebar: 80%; radius batas: 15px; margin: 0 otomatis ) Properti CSS ini memungkinkan Anda membulatkan batas suatu elemen. Beberapa pengembang menggunakannya, tanpa membuat batas yang terlihat, untuk membuat tata letak pada wadah "badan" yang membulat.
Dengan menggunakan jari-jari standar, Anda dapat membuat bentuk bulat, seperti lingkaran atau oval.
Untuk melacak pekerjaan Anda dari properti ini, cukup dengan mengatur propertinya
Properti itu sendiri
Properti sederhana
Pembulatan bisa diterapkan ke semua elemen HTML, tapi tidak di semua kasus. Beberapa browser tidak menerimanya ketika memuat frame yang memiliki properti
Anda dapat menggunakan nilai yang berbeda untuk menentukan radius kelengkungan, tetapi paling sering nilainya ditentukan dalam piksel. Ini karena mereka paling cocok untuk merinci fitur berukuran kecil.
Selain pembulatan biasa, Anda dapat menggunakan radius tambahan, misalnya untuk membuat elips.
Untuk melakukan ini, Anda perlu membagi nilainya dengan pecahan.
Milik - contoh:
Sekarang kami akan menunjukkan beberapa contoh pembuatan batas bulat. Untuk mempelajarinya lebih detail, unduh sumber kami.
Membuat segitiga menggunakan
Untuk membuat segitiga Anda perlu menggunakan properti
Pertama, atur elemen segitiga ke lebar dan tinggi nol.
Setelah itu, tuliskan beberapa properti. Yang pertama adalah yang utama, properti frame. Itu dibuat hampir sama seperti biasanya. Atur lebar, jenis garis dan masukkan nilai "transparan". Ini bertanggung jawab untuk membuat segitiga.
Untuk membuat sisi segitiga yang lurus, Anda perlu membuat garis bingkai terpisah untuk sisi tersebut.
Kesimpulan
Sekarang Anda tahu segalanya tentang properti itu
Ini mungkin tampak sangat sulit pada awalnya, tetapi jika Anda berlatih, itu akan lebih mudah dari yang Anda kira. Unduh sumber kami dan pelajari kodenya untuk lebih memahami cara kerja properti. Kami berharap Anda beruntung dalam studi Anda!
Tag:Vlad Merzhevich
Di situs web, segitiga sering digunakan sebagai bagian dari desain elemen; misalnya, berfungsi sebagai penunjuk ke suatu objek, mengarahkan perhatian pembaca ke tempat yang tepat. Segitiga juga menjalankan fungsi dekoratif, menjadikan balok yang digunakan lebih elegan dan modern. Pada Gambar. Gambar 1 menunjukkan contoh penggunaan segitiga dalam sebuah desain.
Beras. 1. Segitiga dalam desain web
Anda tidak dapat membuat segitiga secara langsung menggunakan CSS, jadi ada dua metode yang tersedia untuk menambahkannya - melalui border dan transform .
Menggunakan perbatasan
Meskipun perbatasan yang dibuat melalui properti perbatasan tidak berhubungan langsung dengan segitiga, perbatasan adalah perbatasan yang paling umum digunakan untuk tujuan ini. Jika kita menyetel lebar dan tinggi elemen ke nol, dan juga menyetel batas yang cukup tebal, kita akan melihat kumpulan empat segitiga (Gbr. 2). Untuk kejelasan, batas di semua sisi diatur dengan warna berbeda.
Beras. 2. Menambahkan batas ke suatu elemen
Hanya menyisakan batas yang diinginkan dan membuat sisanya transparan, kita akan mendapatkan segitiga dengan warna yang diinginkan (Gbr. 3).
Beras. 3. Elemen dengan batas transparan
Contoh 1 menunjukkan cara menambahkan segitiga ke blok menggunakan elemen semu ::after.
Contoh 1. Balok dengan segitiga
Untuk elemen yang diposisikan secara absolut, lebar dan tinggi nol tidak diperlukan.
Dengan menggabungkan batas-batas, Anda bisa mendapatkan empat jenis segitiga lagi, yang jika dikombinasikan dengan yang telah disebutkan, memberi kita delapan pilihan. Jenis dan kode yang diperlukan diberikan dalam tabel. 1.
| Melihat | Gaya |
|---|---|
| batas: 20px solid transparan; | |
| batas atas: 20px hijau solid; | |
| batas: 20px solid transparan; | |
| perbatasan-kanan: 20px hijau solid; | |
| batas: 20px solid transparan; | |
| batas bawah: 20px hijau solid; | |
| batas: 20px solid transparan; | |
| batas kiri: 20px hijau solid; |
Tabel menunjukkan bahwa batas yang tidak terlihat memakan ruang, pertimbangkan hal ini saat memposisikan elemen. Gaya juga harus dilengkapi dengan lebar dan tinggi nol atau menggunakan properti posisi, seperti yang dilakukan pada contoh 1.
Segitiga dapat dibuat menjadi bentuk lain jika Anda mengatur ketebalan tepi yang berbeda. Jadi, kode untuk membuat blok ditunjukkan pada Gambar. 4, ditunjukkan pada contoh 2.
Beras. 4. Segitiga lancip
Contoh 2. Segitiga lancip
Menggunakan perbatasan kita mendapatkan segitiga berwarna solid untuk membuat bingkai seperti yang ditunjukkan pada Gambar. 5 Anda harus menggunakan trik dan meletakkan satu elemen di atas elemen lainnya dengan sedikit offset. Sekali lagi, elemen semu :before dan :after akan membantu kita di sini (contoh 3).
Beras. 5. Bingkai dengan sudut
Contoh 3: Hamparan Segitiga
Karena kita melapisi satu elemen warna solid di atas elemen lainnya, metode ini hanya cocok untuk isian warna solid dan tidak cocok untuk gradien atau gambar latar belakang.
Menggunakan Transformasi
Dengan menggunakan transformasi, kita dapat memutar elemen persegi sebesar 45º dan mendapatkan belah ketupat dari elemen tersebut. Ini belum menjadi segitiga, jadi kita membiarkan bagian menonjol yang kita perlukan terlihat jelas, dan menyembunyikan sisanya di balik elemen lain (contoh 4).
Contoh 3: Transformasi
Hasil dari contoh ini ditunjukkan pada Gambar. 6.
Beras. 6. Segitiga dengan bayangan
bingkai CSS3 memperluas kemampuan untuk memformat batas elemen dengan properti yang memungkinkan di tikungan elemen, dan juga penggunaan gambar untuk mendesain batas elemen.
Sudut membulat dan bingkai foto
1. Pembulatan sudut dengan radius batas
Dukungan peramban
YAITU: 9.0
Firefox: 4.0
krom: 4.0
Safari: 5.0, 3.1 -webkit-
Opera: 10.5
Safari iOS: 7.1
OperaMini: —
Peramban Android: 4.1
Chrome untuk Android: 44
Properti ini memungkinkan Anda membulatkan sudut elemen sebaris dan blok. Kurva untuk setiap sudut ditentukan menggunakan satu atau dua jari-jari yang menentukan bentuknya − lingkaran atau elips. Jari-jari berlaku untuk seluruh latar belakang, meskipun elemen tidak memiliki batas, posisi pasti garis potong ditentukan menggunakan properti klip latar belakang.
Properti border-radius memungkinkan Anda untuk membulatkan semua sudut sekaligus, dan menggunakan properti border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius Anda dapat mengitari setiap sudut secara terpisah.
Jika Anda menetapkan dua nilai untuk properti radius batas, nilai pertama akan membulatkan kiri atas Dan pojok kanan bawah, dan yang kedua - kanan atas Dan kiri bawah.
Nilai ditentukan melalui/menentukan horisontal Dan jari-jari vertikal. Harta tersebut tidak diwariskan.
Pilihan
Div (lebar: 100px; tinggi: 100px; batas: 5px solid;).r1 (radius batas: 0 0 20px 20px;).r2 (radius batas: 0 10px 20px;).r3 (radius batas: 10px 20px ;) .r4 (radius batas: 10px/20px;) .r5 (radius batas: 5px 10px 15px 30px/30px 15px 10px 5px;).r6 (radius batas: 10px 20px 30px 40px/30px;) .r7 ( radius-batas: 50%;).r8 (batas-atas: tidak ada; batas-bawah: tidak ada; radius-batas: 30px/90px;).r9 (batas-bawah-kiri-radius: 100px;).r10 (batas -radius: 0 100%;).r11 (radius batas: 0 50% 50% 50%;).r12 (radius batas kiri atas: 100% 20 piksel; radius batas kanan bawah: 100% 20 piksel ;)
Beras. 1. Contoh berbagai pilihan pembulatan sudut blok
2. Gambar batas
Dukungan peramban
YAITU: 11.0
Firefox: 15.0, 3.5 -moz-
krom: 16.0, 7.0 -webkit-
Safari: 6.0, 3.0 -webkit-
Opera: 15.0, 11.0 -o-
Safari iOS: 7.1
OperaMini: 8 -o-
Peramban Android: 4.4, 4.1 -webkit-
Chrome untuk Android: 42
Properti ini memungkinkan Anda mengatur gambar sebagai bingkai elemen. Syarat utama sebuah gambar adalah harus simetris. Properti ini mencakup nilai-nilai berikut: (border-image: width sumber irisan ulangi awal;) .
Dengan menggunakan gambar sederhana Anda bisa mendapatkan bingkai seperti ini untuk sebuah elemen.
/* Contoh 1 */ div ( lebar: 260 piksel; tinggi: 100 piksel; gaya batas: solid; lebar gambar batas: 15 piksel; sumber gambar batas: url(border_round.png); irisan gambar batas: 30 ; border-image-repeat: stretch; ) /* Contoh 2 */ div ( lebar: 260 piksel; tinggi: 100 piksel; gaya perbatasan: solid; lebar gambar perbatasan: 15 piksel; sumber gambar perbatasan: url(border_round. png); irisan-gambar-batas: 30; pengulangan-gambar-batas: bulat); 
Beras. 2. Contoh perancangan batas blok menggunakan gambar
Potongan A - B - C - D membentuk sudut-sudut bingkai, dan bagian gambar yang terletak di antara keduanya mengisi sisa ruang bingkai sesuai dengan nilai yang ditentukan dari properti border-image-repeat. Ukuran bagian sudut (dalam contoh ini angka 30) diatur menggunakan nilai properti border-image-slice.
2.1. lebar gambar perbatasan
Properti ini menentukan lebar gambar untuk batas elemen. Jika lebarnya tidak ditentukan, maka defaultnya adalah 1.
| lebar gambar perbatasan | |
|---|---|
| Nilai: | |
| panjang | Menetapkan lebar batas dalam satuan panjang - px / em . Anda dapat mengatur satu hingga empat nilai sekaligus. Jika satu nilai ditentukan, maka lebar semua sisi bingkai sama, dua nilai menentukan lebar atas-bawah dan kanan-kiri, dll. |
| nomor | Nilai numerik yang digunakan untuk mengalikan nilai lebar batas. |
| % | Lebar batas elemen dihitung relatif terhadap ukuran gambar. Horisontal terhadap lebar, vertikal terhadap tinggi. |
| mobil | Sesuai dengan nilai irisan gambar batas. |
| awal | |
| mewarisi | |
Sintaksis
Div (lebar gambar batas: 30 piksel;) Gambar. 3. Contoh pengaturan lebar bingkai gambar menggunakan berbagai jenis nilai-nilai
2.2. sumber-gambar-batas
Properti menentukan jalur ke gambar yang akan digunakan untuk menghiasi batas blok.
Sintaksis
Div (sumber-gambar-perbatasan: url(perbatasan.png);)
2.3. elemen irisan gambar batas
Properti menentukan ukuran bagian gambar yang digunakan untuk menentukan batas elemen dan membagi gambar menjadi sembilan bagian: empat sudut, empat tepi di antara sudut, dan satu bagian tengah.
| Nilai: | |
| nomor | Ukuran bagian bingkai dapat diatur menggunakan satu, dua, tiga atau empat nilai. Satu nilai menetapkan batas memiliki ukuran yang sama di setiap sisi elemen. Dua nilai: yang pertama menentukan ukuran batas atas dan bawah, yang kedua - kanan dan kiri. Tiga nilai: yang pertama menentukan ukuran batas atas, yang kedua - kanan dan kiri, dan yang ketiga - batas bawah. Empat nilai: Menentukan ukuran batas atas, kanan, bawah, dan kiri. Nilai numerik mewakili jumlah px. |
| % | Ukuran batas dihitung relatif terhadap ukuran gambar. Horisontal terhadap lebar, vertikal terhadap tinggi. |
| mengisi | Nilainya ditunjukkan bersama dengan angka atau persentase. Jika ditentukan, gambar tidak terpotong oleh tepi bagian dalam bingkai, tetapi juga memenuhi area di dalam bingkai. |
| awal | Setel properti ini ke nilai defaultnya. |
| mewarisi | Mewarisi nilai properti ini dari elemen induk. |
Sintaksis
Div (irisan gambar batas: 50 20;) 
Beras. 4. Contoh penentuan irisan bingkai gambar
2.4. perbatasan-gambar-ulangi
Bantalan kontrol properti gambar latar belakang ruang di antara sudut-sudut bingkai. Dapat ditentukan menggunakan nilai tunggal atau sepasang nilai.
Sintaksis
Div (pengulangan gambar batas: ulangi;) Gambar. 5. Contoh pengulangan bagian tengah bingkai gambar menggunakan tipe nilai yang berbeda
2.5. perbatasan-gambar-awal
Properti ini memungkinkan Anda untuk memindahkan bingkai gambar melampaui batas elemen dengan panjang tertentu. Dapat ditentukan menggunakan satu atau empat nilai.
Sintaksis
Div (awalan gambar batas: 10px;) 
Beras. 6. Contoh perpindahan bingkai gambar menggunakan tipe nilai yang berbeda
3. Bingkai gradien
Nilai dari border-image tidak hanya berupa gambar, tetapi juga isian gradien.
Bingkai tembus pandang
Transparan adalah salah satu warnanya. Dengan cara ini, Anda dapat menetapkan batas untuk semua sisi elemen sekaligus atau secara terpisah untuk setiap sisi. Ketebalan perbatasan dikontrol oleh properti border-width.
Amplop pos
