Excelda dumaloq diagramma qanday tuziladi. Yumaloq burchaklar qatorlar va ustunlarni qo'shish

Ushbu maqolada men sizga yumaloq burchakli stolni qanday qilishni aytib berishga qaror qildim. Ishonchim komilki, siz Internetni kezish paytida bunday jadvallarga duch kelgansiz.

Men sizga bunday jadvallar haqida aniq aytib beraman. Albatta, bunday jadvalni bir necha usul bilan yasash mumkin, men sizga aytib beradigan bu usul eng oddiy va eng “chiroyli” hisoblanadi, chunki agar siz bunday jadvalni boshqa usulda tuzsangiz, JAVA-ni o'rganishingiz kerak bo'ladi. va uni CSS bilan birlashtiring, shunda sizning kodingiz juda og'ir va murakkab bo'ladi.

Bu usul faqat HTML dan foydalanadi, lekin biz tasvirlarni, ya'ni jadval burchaklarini yaratishimiz kerak bo'ladi. Burchaklarni yaratish uchun bizga Photoshop yoki sizga yoqadigan boshqa grafik dasturi (hatto MS Point ham) kerak bo'ladi, lekin siz uni boshqarishingiz mumkin. Ushbu maqolada men ularni Photoshop-da qanday qilishni aytaman.

Keling, to'g'ridan-to'g'ri jadval yaratishga o'tamiz. Jadval yaratish uchun Dreamweaver yoki boshqa HTML muharririni oching. Biz yangi hujjat yaratamiz yoki allaqachon yaratilgan hujjatni ochamiz va u erda biz 3 qator va 2 ustunli jadvalni yaratamiz:

Photoshop-ga o'ting, Rounded Rectangle Tool-ni oling va yumaloq to'rtburchak chizing va yaxlitlash radiusini jadvalda bo'lishini xohlaganimizdek o'rnating, men uni 30 pikselga o'rnatdim.

Birinchidan, fon qatlami va qatlamni to'rtburchak tasvir bilan ulang, buning uchun qatlamlar panelidagi Ctrl tugmachasini bosib ushlab turing, yuqori va pastki qatlamni tanlang va Ctrl + E tugmalarini bosing.

Endi bu to'rtburchakdan biz burchaklarni o'zi chiqarishimiz kerak, buning uchun biz Recatangular Marquee Tool-ni olamiz, yuqori panelda Uslubni tanlang: Kenglik va balandlik maydonlarida Ruxsat etilgan o'lcham, siz ko'rsatgan radius qiymatlarini yozing. qadam 2. Tasvirlarni bosing, oldingizda nuqta chiziq paydo bo'ladi kvadrat Uni yumaloq burchak to'liq kvadrat ichida bo'lishi uchun harakatlantiring.

Ctrl + C tugmalarini bosing (kvadrat ichidagi narsalarni, ya'ni bizning burchakni nusxalash uchun) Endi biz yangi rasm yaratishimiz kerak, avval ko'chirilgan burchakni u erga qo'yish uchun o'ting: File-New...-Ok va darhol Ctrl + V burchakimizni yopishtiring

Yaratilgan jadvalda ikkinchi qatorni bittaga birlashtirish kerak bo'ladi, chunki u erda matn yozilishi kerak.
Endi biz rasmlarimizni (burchaklarimizni) jadvalimizga joylashtiramiz.

Kiritilgan rasmlar (pastdan o'ngdan va o'ngdan yuqoridan) o'ngga tekislangan bo'lishi kerak.
Endi oxirgi qadam: stolga burchaklar bilan bir xil fon rangini berishingiz kerak.

OK, endi hammasi tugadi. Bu usul eng oson. Umid qilamanki, ushbu maqola sizga qandaydir tarzda yordam berdi va men hamma narsani aniq tushuntirdim deb umid qilaman. Omad!

Har bir inson uzoq vaqtdan beri veb-sayt dizaynidagi an'anaviy to'rtburchak burchaklardan charchagan. Dumaloq burchaklar modada bo'lib, ular tasvirlar yordamida emas, balki chegara-radius xususiyatidan foydalaniladigan uslublar orqali amalga oshiriladi. Bu xususiyat bo'sh joy bilan ajratilgan bir, ikki, uch yoki to'rtta qiymatga ega bo'lishi mumkin, ular barcha burchaklarning radiusini yoki har birini alohida belgilaydi.

Jadvalda 1 boshqa qiymatlar sonini va bu holda olingan blok turini ko'rsatadi.

Kod Tavsif Ko'rinish
div (chegara radiusi: 10px; ) Bir vaqtning o'zida barcha burchaklar uchun yaxlitlash radiusi.
div (chegara radiusi: 0 10px; ) Birinchi qiymat yuqori chap va pastki o'ng burchaklarning radiusini o'rnatadi, ikkinchi qiymat yuqori o'ng va pastki chap burchaklar uchun radiusni o'rnatadi.
div (chegara radiusi: 20px 10px 0; ) Birinchi qiymat yuqori chap burchakning radiusini o'rnatadi, ikkinchisi - yuqori o'ng va pastki chap, va uchinchi qiymat - pastki o'ng.
div (chegara radiusi: 20px 10px 5px 0; ) Yuqori chap, yuqori o'ng, pastki o'ng va pastki chap burchaklarning radiusini ketma-ket o'rnatadi.

1-misol yumaloq burchakli blokni qanday yaratishni ko'rsatadi.

Misol 1. Blokning burchaklari

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Radius

Me - I ning qaratqich kelishigining qo‘shimcha shakli.


Ushbu misolning natijasi rasmda ko'rsatilgan. 1.

Guruch. 1. Yumaloq burchakli blok

Agar siz yaxlitlash radiusini elementning balandligi va kengligining yarmidan kattaroq qilib qo'ysangiz, qiziqarli effektga erishish mumkin. Bunday holda, siz doira olasiz. 2-misol rasmli dumaloq tugmani qanday yaratishni ko'rsatadi.

2-misol: Dumaloq tugma

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Tugma

Ushbu misolning natijasi rasmda ko'rsatilgan. 2.

Guruch. 2. Dumaloq tugma

Opera brauzerida yaxlitlash