CSS Efek: sudut dibulatkan elemen

Sintaks dari Cascading Style Sheets dirancang begitu sederhana bahwa kemungkinan memperoleh desain yang paling tak terduga tersedia bahkan jauh dari pemrograman dan pengembangan situs manusia. Mungkin fakta bahwa anak-anak bermain dengan blok tetap berada di memori semua orang, menggunakan pengalaman multi-faceted di HTML, CSS mudah.

Namun, pemrograman saat ini masih sangat jauh dari menyajikan konstruksi realitas. Sampai saat ini, setiap daerah (ditempati apa yang Anda suka elemen blok) dalam makna dan penunjukan resmi dari bentuk persegi panjang, yang terbentuk di dalam garis kurva kontur yang diinginkan.

Sampai saat ini, setiap lingkaran, pembulatan radius, bagaimana lurus melengkung dan sebagainya. P. Menjelaskan persamaan yang kompleks matematika atau kubus sangat kecil, trapesium, segitiga atau elemen bujursangkar lain yang dibedakan dengan mata sebagai titik pada garis.

desain Lurus Klasik

Hal ini tidak mengherankan bahwa kemajuan di bidang pemrograman dan informasi teknologi disahkan desain persegi panjang. ide-ide inovatif tidak membuang-buang waktu pada bentuk bulat, tapi jangan lupa untuk hadir di pembuangan pengembang fitur yang cukup dan tag HTML aturan, CSS dan bahasa pemrograman yang terkait.

Setiap elemen yang digunakan pada halaman adalah area persegi, di mana ia dialokasikan beberapa bagian, yang dalam setiap kasus harus digunakan hanya diperlukan mengingat persyaratan krossbrauzernosti fitur markup konten tertentu yang tersedia konstruksi sintaksis.

Aturan umum untuk CSS

Cascading Style Sheets menawarkan untuk menggambarkan unsur-unsur sebagai berikut:

• property: value.

Dalam hal ini, properti - nama khusus dan nilai dapat berupa nama atau daftar nama atau nilai-nilai.

Mengenai unsur blok dan kebutuhan untuk melakukan melalui CSS sudut bulat, masuk akal untuk menggunakan properti border-radius dan nilainya dalam format "38px" atau "8px 16px 24px 38px".

Jika nilai yang diberikan oleh satu nomor, itu akan ditetapkan dengan yang untuk semua sudut. Rekam semua empat nilai adalah:

• Nomor pertama - ke sudut kiri atas;
• kedua - ke kanan atas;
• ketiga - ke kanan bawah;
• terbaru - ke kiri bawah.

Berbagi beberapa aturan

perbatasan konsep, gambar dan latar belakang dapat digunakan bersama-sama. Ini adalah normal, dan disebutkan aturan tidak mengganggu satu sama lain, membentuk komposisi keseluruhan. Hal utama - untuk memperhitungkan fakta bahwa nama mereka masing-masing mewakili, dan bagaimana itu diterapkan.

Sebelum menerapkan ini atau elemen itu, penting untuk melakukan beberapa eksperimen dan kerja tes di beberapa browser. Orientasi saran, rekomendasi, contoh pihak ketiga atau sintaks CSS, sudut bulat, dan sebagainya. N. Apakah jarang lebih baik dari praktek segar mereka sendiri.

Hal ini penting untuk memahami bahwa perbatasan, gambar, dalam hal sudut desain - jenis yang sama dari konsep. Menggambar dapat disajikan tidak dalam png format. Dia akan dipotong oleh browser, sesuai dengan aturan yang ditetapkan dalam CSS. sudut bulat - pengembang peduli, terlepas dari kuadrat dari bahan sumber.

Fitur HTML, CSS dari browser

Selamat rekaman Style grosir - untuk semua browser sekaligus. Pokoknya contoh klasik pada topik "CSS: sudut bulat" tawaran untuk menulis sehingga:

background: # FF7F00; / * Latar Belakang * /

border: 1px # cccccc padat; / * Border * /

-moz-border-radius: 10px; / * CSS sudut bulat untuk Mozilla Firefox * /

-webkit-border-radius: 10px; / * ... untuk Safari dan Chrome * /

-khtml-border-radius: 10px; / * ... Konquerer * /

border-radius: 10px; / * CSS sudut bulat untuk semua * / dan sebagainya. N.

Namun, dalam kebanyakan kasus itu sudah cukup untuk menentukan aturan terakhir. Redundansi harus digunakan hanya ketika ada kebutuhan nyata.

meja klasik dan indah

Meskipun banyak tata letak kontroversi pendukung meja (tr, td) dan pilihan untuk menggunakan tag div dan rentang ( «mengagumkan" tata letak), tujuan praktek disukai pilihan yang cukup diperlukan.

Dalam divs memiliki beberapa martabat di meja lainnya. Jika mereka tidak saling melengkapi, dan hanya bersaing, pertanyaan akan cepat menguap dalam satu versi yang menggabungkan aspek terbaik dari tabel dan divs.

Sebagian besar situs yang dibuat dengan menggunakan CMS (sistem manajemen konten), dan dalam pembuangan pengembang datang tidak hanya berbagai "raksasa" dataset ratusan folder, objek, tetapi juga tabel.

Tag [div | rentang], dengan demikian, tidak menonjol, tapi satu-satunya hal yang datang tepat pada belas kasihan lengkap pengembang - stylesheet CSS. Dan setiap CMS jelas memisahkan kode, bagian dari itu dari kreativitas pengembang dan gaya mereka sendiri gaya ditambahkan, dan dalam kasus perubahan (misalnya, css - pembulatan sudut-sudut meja), Anda selalu dapat mengembalikan pengaturan dan gaya default.

Kurva dan sudut yang tidak tercakup oleh sintaks

Anda ketat dapat mematuhi semua aturan HTML, CSS, tetapi untuk memiliki Akibatnya, mereka tidak disediakan. Melapiskan elemen untuk sama lain, adalah mungkin untuk memperoleh wilayah konfigurasi apapun. Menggunakan PHP-pembangunan di server, Anda dapat mengirim ke browser pengunjung dan file gaya untuk melampirkan mereka kode JavaScript yang tepat dalam tubuh HTML-file atau terpisah js-file.

Setiap varian sirkuit, setiap bentuk elemen properti adalah aturan CSS! sudut bulat - hanya tertentu, dan peluang nyata jauh lebih luas. Dalam hal ini, pemrograman benda Anda sendiri, Anda dapat tidak memperhatikan karakteristik browser individu, hanya menggunakan tag dan struktur bahasa hypertext, yang dirasakan oleh semua, tanpa browser terkecuali.

Menggunakan gagasan pemrograman berorientasi objek, Anda dapat merancang tampilan sudut atau kurva jelas tidak diramalkan oleh bentuk browser. Dalam hal ini, tidak perlu bahwa ini akan menjadi sudut daerah, yang semula bentuk persegi panjang. Adalah penting bahwa komponen kurva dijelaskan dalam bentuk aturan-aturan CSS, digabungkan menjadi kode objek JavaScript visual yang tunggal dan pada waktu yang tepat di tempat yang tepat peramban, mencerminkan dirinya dalam bentuk yang benar.

Teknologi ini tidak mengganggu objek seperti untuk mewujudkan diri mereka dalam tiga dimensi pesawat atau acara animasi.