Css ichida geometrik shakllar. Oddiy GUI bilan onlayn CSS3 generator - EnjoyCSS

Muallifdan: To'rtburchaklar ichida to'rtburchak: bizning veb-sahifalarimiz har doim shunday qurilgan. Biz geometrik shakllarni yaratish uchun CSS-dan foydalanib, uzoq vaqtdan beri bu cheklovlardan xalos bo'lishga harakat qildik, ammo bu shakllar hech qachon uslublangan elementlarning tarkibiga yoki sahifadagi boshqa elementlarning uslublangan elementlarga nisbatan qanday joylashishiga ta'sir qilmaydi.

Shakllar uchun yangi CSS spetsifikatsiyasi status-kvoni o'zgartiradi. 2012-yilning oʻrtalarida Adobe tomonidan taqdim etilgan boʻlib, u veb-dizaynerlarga nisbatan murakkab shakllardagi va ularning atrofidagi kontent oqimini oʻzgartirish imkoniyatini berishni maqsad qilgan — biz ilgari erisha olmagan narsaga, hatto JavaScript-dan foydalangan holda ham.

Misol uchun, matn quyidagi dizayndagi dumaloq rasmlarni qanday o'rashiga e'tibor bering. Shakllarsiz matn to'rtburchaklar shaklida bo'lar edi - dizaynni keyingi bosqichga olib chiqadigan nozik texnikani tashlab yuboradi.

Ushbu misolda matn plastinkaning chetlari atrofida qanday yumaloq shaklga ega bo'lishiga e'tibor bering. CSS Shapes-dan foydalanib, biz veb-sahifa uchun shunga o'xshash dizaynni yaratishimiz mumkin.

Keling, Shakllar qanday ishlashini va ulardan qanday foydalanishni boshlashingiz mumkinligini batafsil ko'rib chiqaylik.

Brauzerni qo'llab-quvvatlash

Hozirda CSS shakllari faqat Webkit Nightly va Chrome Canary’da qo‘llab-quvvatlanadi, biroq ularning 1-darajali moduli nomzod tavsiya maqomiga yetdi, shuning uchun spetsifikatsiyada belgilangan xususiyatlar va sintaksis ancha barqaror. Boshqa brauzerlar ularni qo'llab-quvvatlashni boshlashlari ko'p vaqt o'tmaydi. Bu daraja shakl atrofidagi tarkib oqimini o'zgartiradigan Shakllarning xususiyatlariga e'tibor qaratadi. Xususan, u shakl-tashqi xususiyatga va unga bog'liq bo'lganlarga e'tibor qaratadi.

Kesish va niqob, CSS filtrlari va kollaj va birlashtirish kabi boshqa so'nggi xususiyatlar bilan birgalikda CSS shakllari bizga Photoshop va InDesign kabi tasvir muharrirlariga murojaat qilmasdan yanada murakkab, murakkab dizaynlarni yaratishga imkon beradi.

Kelajakdagi CSS Shapes darajalari, shuningdek, shakllar ichidagi tarkibni shakllantirishga qaratilgan. Masalan, bugungi kunda CSS-da elementni 45 daraja burish orqali olmos shaklini yaratish juda oson, keyin uning ichidagi tarkibni sahifada gorizontal holatda joylashishi uchun teskari tomonga aylantiring. Ammo olmos ichidagi tarkib mos shaklni olmaydi va har doim to'rtburchak bo'lib qoladi. Shakl-ichki xususiyati amalga oshirilgunga qadar biz tarkibni olmos shaklida ham qilib, quyidagi rasmga o'xshash belgi yaratishimiz mumkin.

Tez orada, CSS Shapes ham sizga ushbu olmoslar kabi ichidagi matnni uslublash imkonini beradi, shuning uchun kesish yoki to'ldirish o'rniga matnning o'zi konteyner chetlariga nisbatan joylashtiriladi..

Bugun Chrome Canary-da CSS Shakllaridan foydalanish uchun siz eksperimental xususiyatlarni mavjud qiladigan katakchani yoqishingiz kerak.

CSS shakllarini yaratish

Shakllar xususiyatlaridan foydalanib, elementga shakl qo'llashingiz mumkin. Shakl funktsiyasini qiymat sifatida shakl xususiyatiga o'tkazasiz. Shakl funktsiyasi - bu elementga qo'llamoqchi bo'lgan shaklni belgilaydigan parametrlarni o'tkazadigan kod bo'limi.

Shakllar quyidagi funktsiyalardan biri yordamida yaratilishi mumkin:

Har bir shakl nuqtalar to'plami bilan belgilanadi. Ba'zi funktsiyalar nuqtalarni parametr sifatida qabul qiladi; boshqalar ofset parametrlarini oladi, lekin ularning barchasi nuqtalar to'plami sifatida elementdagi shakllarni chizish bilan yakunlanadi. Biz ushbu funksiyalarning har biri uchun parametrlarni misollar bilan ko‘rib chiqamiz.

Shaklni alfa-kanal ekstraktsiyasi yordamida tasvirdan ham aniqlash mumkin. Tasvir shakl xususiyatiga o'tkazilganda, brauzer shakl-tasvir-eshik qiymatiga asoslangan holda tasvirdan shaklni chiqaradi. Shakl alfa qiymati belgilangan chegaradan katta bo'lgan piksellar bilan belgilanadi. Rasm CORS ga mos kelishi kerak. Agar taqdim etilgani biron bir sababga ko'ra mavjud bo'lmasa (masalan, u mavjud emas), unda hech qanday shakl qo'llanilmaydi.

Quyidagi raqamlar yuqoridagi funktsiyalarni qiymat sifatida qabul qiladi:

shakl-tashqi: tarkibni shakl atrofida o'rashga olib keladi (tashqi)

shape-inside: tarkib ichkaridan shakl shaklini oladi

Shakl atrofida tashqi chet qo'shish uchun shakl-tashqarida xususiyatidan shakl-chekka bilan birgalikda foydalanishingiz mumkin, bu tarkibni shakldan uzoqlashtiradi va ular orasida bo'sh joy qoldiradi. Shakl-tashqari shakl-chekka xossasini olgani kabi, shakl-ichki ham to'ldirishni qo'shadigan shaklni to'ldirish xususiyatiga ega bo'ladi.

Shakl yoki funktsiya xususiyatlaridan foydalanib, shakl elementini e'lon qilish CSS kodining faqat bitta qatori bilan amalga oshirilishi mumkin:

Element (tashqi shakl: doira(); /* kontent */ elementiga berilgan doira atrofida oʻraladi)

Element (tashqi shakl: url(yo'l/to/rasm-shape.png); )

Ammo... Agar siz ushbu CSS kod qatorini elementga qo'llasangiz, quyidagi shartlar bajarilmasa, shakl unga qo'llanilmaydi:

Element suzuvchi bo'lishi kerak. Kelajakdagi CSS Shapes darajalari bizga suzuvchi bo'lmagan elementlar uchun shakllarni aniqlash imkonini beradi, ammo bu hali mumkin emas.

Element belgilangan o'lchamlarga ega bo'lishi kerak. Koordinatalar tizimini yaratish uchun elementga berilgan balandlik va kenglikdan foydalaniladi.

Yuqoridagi funktsiyalarda ko'rganingizdek, shakllar nuqtalar to'plami bilan belgilanadi. Nuqtalar koordinatalariga ega bo'lganligi sababli, har bir nuqta elementning qayerga joylashtirilishi kerakligini bilish uchun brauzer koordinatalar tizimiga muhtoj. Shunday qilib, yuqoridagi misolda quyidagilar bo'lsa ishlaydi:

Element (suzuvchi: chap; balandlik: 10 m; eni: 15 m; tashqi shakl: doira(); )

Biroq, elementni ma'lum bir o'lchamga o'rnatish uning sezgirligiga ta'sir qilmaydi (bu haqda keyinroq gaplashamiz). Har bir shakl bir juft koordinata yordamida joylashgan nuqtalar to'plami sifatida aniqlanganligi sababli, nuqta koordinatalarini o'zgartirish yaratilgan shaklga bevosita ta'sir qiladi. Misol uchun, quyidagi rasmda polygon() funksiyasi yordamida yaratilishi mumkin bo'lgan oltiburchak ko'rsatilgan. Rasm olti nuqtadan iborat. To'q sariq nuqtaning gorizontal koordinatasini o'zgartirish yakuniy shaklni o'zgartiradi va shakl qo'llaniladigan har qanday element ichida/tashqisida tarkibning joylashishiga ta'sir qiladi.

Agar element suzuvchi va o'ng tomonga tekislangan bo'lsa va unga shakl qo'llanilsa, polygon() funksiyasi ichidagi to'q sariq nuqta koordinatalaridan biri o'zgartirilganda uning chap tomonidagi tarkib o'z o'rnini o'zgartiradi..

Shakllar mos yozuvlar bloki

CSS Shakllari shakl chizilgan mos yozuvlar oynasida aniqlanadi va yaratiladi. Elementning balandligi va kengligidan tashqari, elementlar qutisi modeli komponentlari - chekka quti, kontent qutisi, to'ldirish qutisi va chegara qutisi - element shaklini aniqlash uchun havolalarni ham taqdim etadi.

Odatiy bo'lib, chekka oynasi mos yozuvlar sifatida ishlatiladi, shuning uchun siz shakl qo'llayotgan elementning pastki qismida chekka bo'lsa, shakl chegarada emas, balki chetida tugaydi. Agar siz quti modelining boshqa qiymatlaridan foydalanmoqchi bo'lsangiz, ularni shakl xususiyatiga o'tadigan shakl funktsiyasi bilan birga belgilashingiz mumkin:

tashqi shakl: doira (250px 50% 50%) toʻldirish qutisi;

Ushbu qoidadagi padding-box kalit so'zi shaklning qo'llanilishini va to'ldirish qutisi cheklovini (to'ldirish maydoni) belgilaydi. Circle() funktsiyasi doirani, uning o'lchamlarini va elementga nisbatan joylashishini aniqlaydi.

Funksiyalar yordamida shakllarni aniqlash

Biz maʼlumot matnini foydalanuvchi profili yoki koʻrib chiqish kabi foydalanuvchi avatarining yumaloq tasviri atrofida oʻrashdan boshlaymiz.

CSS Shapes-dan foydalanib, foydalanuvchi tasviri atrofidagi matn to'rtburchaklar shaklini saqlab qolish o'rniga shakl atrofida aylanadi..

Quyidagi belgilar yordamida profil tasviriga dumaloq shaklni qo'llash uchun biz circle() funksiyasidan foydalanamiz:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum itaque nam blanditiis eveniet enim eligendi quae adipisci?

Agar siz xatoga yo'l qo'ymasligingiz kerak! Quo nam quasi soluta reprehenderit laudantium optio ipsam ducimus consequatur enim fuga quibusdam mollitia nesciunt modi.

Siz so'rashingiz mumkin: "Nega biz tasvirni yaxlitlash uchun chegara radiusidan foydalana olmaymiz?" Javob: border-radius xususiyati kontentni u qo'llaniladigan element ichida yoki tashqarisida joylashtirishga ta'sir qilmaydi. Bu faqat elementning chegaralari yoki foniga ta'sir qiladi. Orqa fon yumaloq burchaklarda kesilgan, hammasi shu. Element ichidagi tarkib to'rtburchak bo'lib qoladi va element tashqarisidagi tarkib element to'rtburchak bo'lib qolgandek harakat qiladi.

Tasvirni yumaloq qilish uchun chegara-radius xususiyatidan foydalanamiz - sahifadagi rasmlar yoki boshqa elementlarni yaxlitlash uchun shunday qilamiz:

CSS Shapessiz, matn tasvirni kvadrat shaklida ko'radi va dumaloq emas, balki kvadrat shaklga o'raladi..

CSS Shapes-ni qo'llab-quvvatlamaydigan brauzerda dumaloq tasvir atrofidagi tarkib xuddi yumaloq bo'lmagandek joylashtiriladi. Bu eski brauzerlarda aynan shunday ko'rinadi. Kontent ma'lum bir shakl atrofida qanday o'ralishini o'zgartirish uchun shakl xususiyatlaridan foydalaning.

img (suzuvchi: chap; eni: 150px; balandlik: 150px; chegara radiusi: 50%; shakl-tashqi: doira(); shakl-chekka: 15px; )

Ushbu kod yordamida matn birinchi skrinshotda ko'rsatilganidek, rasmga qo'llaniladigan dumaloq shaklni "ko'rish" imkoniyatiga ega bo'ladi va uning atrofida o'raladi. (Natijani ko'rishingiz mumkin.) Shakllarni qo'llab-quvvatlamaydigan brauzerlarda u ikkinchi rasmga o'xshaydi.

Siz circle() funksiyasidan avvalgidek foydalanishingiz yoki unga parametrlarni o'tkazishingiz mumkin. Mana uning rasmiy sintaksisi:

doira() = doira([ ]? ? [da< position > ] ? )

Savol belgilari ushbu parametrlarning ixtiyoriy ekanligini va ularni o'tkazib yuborish mumkinligini ko'rsatadi. Siz o'tkazib yuborgan parametrlar standart qiymatlarini oladi. Agar siz circle() dan avvalgidek foydalansangiz, to'g'ridan-to'g'ri pozitsiyani belgilash o'rniga, doiraning standart markazi siz uni qo'llayotgan elementning markazida bo'ladi.

Siz aylana radiusini istalgan uzunlik birliklari (px, em, pt, va hokazo) yordamida o'rnatishingiz mumkin. Shuningdek, radiusni eng yaqin yoki eng uzoq tomon yordamida parametrlar yordamida o'rnatishingiz mumkin, lekin eng yaqin tomon sukut bo'yicha Brauzer elementning markazidan eng yaqin tomonga masofani oladi, chunki radius, eng uzoq tomon markazdan uzoq tomonga masofani ishlatadi.

shakl-tashqi: aylana (eng uzoq tomoni 25% 25%); /* radiusi eng uzun tomonning yarmi bo'lgan, elementning koordinata tizimidagi 25% 25% koordinatalarda joylashgan doirani belgilaydi */ shape-inside: circle(250px at 500px 300px); /* markazi gorizontal 500px va vertikal 300px, radiusi 250px boʻlgan doirani belgilaydi */

Ellipse() funksiyasi aylana() funksiyasi kabi bir xil qiymatlar to‘plami bilan ishlaydi, faqat radius parametri o‘rniga ikkita radiusni oladi: bitta radius x o‘qida, biri y o‘qida.

ellips() = ellips([ (2)]? ? [da< position > ] ? )

inset() funktsiyasi aylana yoki ellips bilan bevosita bog'liq emas, u element ichida to'rtburchaklar shakllarni yaratish uchun ishlatiladi. Elementlar allaqachon to'rtburchaklar bo'lganligi sababli, to'rtburchaklar yaratish uchun bizga kerak emas. Buning o'rniga, inset() bizga yumaloq to'rtburchaklar yaratishda yordam berishi mumkin, shunda kontent yumaloq burchaklar atrofida o'raladi.

inset() funktsiyasi birdan to'rttagacha ofset parametrlarini oladi, ular mos yozuvlar oynasining chetlariga nisbatan ofsetni belgilaydi, bu element ichidagi to'rtburchakning joylashishini aniqlaydi. Dumaloq burchaklar chegara-radius bilan bir xil tarzda, round kalit so'zi bilan birgalikda to'rtta qiymatdan biri yordamida belgilanadi.

inset() = inset(offset(1,4)?)

Quyidagi kod suzuvchi elementda yumaloq to'rtburchak hosil qiladi.

Element ( float: chap; eni: 250px; balandlik: 150px; shakl-tashqi: ichki (0px dumaloq 100px) chegara qutisi; )

Yakuniy Shakllar funksiyasi ko'pburchak () bo'lib, u har qanday nuqtadan foydalangan holda murakkabroq noaniq shakllarni belgilaydi. Funktsiya koordinata juftlari to'plamini qabul qiladi, bu erda har bir juft nuqta o'rnini belgilaydi.

Quyidagi misolda suzuvchi tasvir ekranning butun balandligini egallagan holda va ko'rish oynasi birliklari yordamida o'ng chetiga joylashtiriladi. Chapdagi matn tasvir ichidagi qum soatiga o‘ralishini istaymiz va tasvir uchun maxsus shaklni aniqlash uchun polygon() funksiyasidan foydalanamiz.

Yuqoridagi rasm uchun CSS kodi quyidagicha ko'rinadi:

img.right ( float: o'ng; balandlik: 100vh; eni: calc(100vh + 100vh/4); shakl-tashqi: poligon (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60) %, 45% 40%);

Siz raqamni uzunlik birliklarida yoki meniki kabi foizlarda belgilaydigan nuqtalarning koordinatalarini belgilashingiz mumkin. Ushbu kod kerakli natijani beradi, lekin siz ko'rib turganingizdek, shakl funktsiyasi tasvirning berilgan shakldan tashqaridagi qolgan qismlariga ta'sir qilmaydi. Gap shundaki, elementga shakl funksiyasini qo‘llash, xoh u rasm, xoh konteyner yoki boshqa biror narsa bo‘ladimi, kontentni o‘rash maydonidan boshqa hech narsaga ta’sir qilmaydi. Fon, chegaralar va boshqa hamma narsa o'zgarishsiz qoladi.

Yaratilgan ko'pburchakni vizual tarzda tasvirlash uchun biz tasvirning shakldan tashqaridagi qismlarini "kesishimiz" kerak. Bunda bizga CSS Masking Module spetsifikatsiyasidagi clip-path xususiyati yordam beradi.

Klip-yo'l xususiyati shakl xususiyati bilan bir xil shakl funktsiyalari va qiymatlarini qabul qiladi. Agar biz tashqi ko'rinish xususiyati uchun ishlatgan bir xil ko'pburchak shaklni clip-path xususiyatiga o'tkazsak, u tasvirning shakldan tashqaridagi qismini kesadi.

img.right ( float: o'ng; balandlik: 100vh; eni: calc(100vh + 100vh/4); shakl-tashqi: poligon (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60) %, 45% 40%; /* rasmni kontur boʻylab kesish */ klip yoʻli: koʻpburchak (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40% )

Natija quyidagicha ko'rinadi:

Klip-yo'l xususiyati hozirda prefikslar bilan birga qo'llab-quvvatlanadi, ya'ni. u Chrome brauzerida –webkit- qo‘shilgan prefiks bilan ishlaydi. Demoga qarashingiz mumkin.

Klip-yo'l xususiyati shakl xususiyatiga ajoyib hamroh bo'ladi, chunki u siz yaratgan shakllarni tasavvur qilish va shakldan tashqari qismlarni kesishga yordam beradi, shuning uchun siz ularni birgalikda ko'p ishlatishingiz mumkin.

Poligon() funktsiyasi noldan farqli yoki juft bo'lishi mumkin bo'lgan ixtiyoriy to'ldirish kalit so'zini ham qabul qiladi. U ko'pburchak ichidagi kesishgan maydonlar qanday harakat qilishini aniqlaydi. Tafsilotlar uchun SVG to'ldirish qoidasi xususiyatini tekshiring.

Rasm yordamida figurani aniqlash

Tasvir yordamida shaklni aniqlash uchun tasvirda brauzer tasvirni chiqaradigan alfa-kanal bo'lishi kerak.

Shakl alfa qiymati ma'lum chegaradan yuqori bo'lgan piksellar bilan belgilanadi. Standart chegara qiymati o.o (to'liq shaffof) yoki siz uni to'g'ridan-to'g'ri shape-image-threshold xususiyatidan foydalanib o'rnatishingiz mumkin. Shunday qilib, har qanday shaffof bo'lmagan piksel tasvir bilan belgilangan shaklning bir qismi sifatida ishlatilishi mumkin.

Kelajakdagi CSS Shapes qatlami alfa kanali o'rniga tasvir yorqinligi ma'lumotlaridan foydalanishga o'tishga imkon beradi. Agar bu sodir bo'lsa, shakl-tasvir chegarasi kalit holatiga qarab yorqinlik yoki alfa kanali uchun chegarani o'z ichiga olish uchun kengaytiriladi.

Elementning shaklini aniqlash va matnni uning atrofida aylantirish uchun biz quyidagi rasmdan foydalanamiz:

Albatta, agar biror elementga fon qo'llasangiz, fonni berilgan shakldan tashqarida kesish kerak bo'ladi. Maskalar modulidagi mask-image xususiyati (tegishli prefikslar bilan) bunga yordam berishi mumkin, chunki klip-yo'l xususiyati alfa-kanalni qiymat sifatida qabul qilmaydi. Natija quyidagicha ko'rinadi:

Agar siz murakkab shakllarni yaratsangiz, rasm yordamida shaklni aniqlash qulay bo'lishi mumkin. Bu nuqtalarni qo'lda o'rnatish o'rniga Photoshop-da tasvirning alfa-kanalidan foydalanish imkonini beradi.

Bundan tashqari, element ichida juda ko'p suzuvchi elementlar yoki istisno joylari mavjud bo'lsa, shakl funksiyasi o'rniga tasvirdan foydalanish qulay bo'ladi - chunki hozirda bitta elementga bir nechta shakllarni e'lon qilishning hech qanday usuli yo'q. Ammo agar rasmda bir nechta mintaqalar bo'lsa, brauzer ushbu hududlarni ajratib oladi va ulardan foydalanadi.

Responsive dizayndagi CSS shakllari

CSS shakllari sezgir dizayn uchun mos bo'lishi mumkinmi? Tashqi shakl uchun joriy spetsifikatsiya ushbu nuqtani o'z ichiga oladi, chunki u elementni foiz yoki uzunlik birliklarida o'lchash imkonini beradi va shaklni aniqlovchi nuqtalarni (shakl funksiyasi parametrlari) ham foizlarda ko'rsatish mumkin. Bu shuni anglatadiki, tashqi ko'rinishga ega bo'lgan element foiz bilan belgilangan o'lchamli har qanday suzuvchi element kabi to'liq javob berishi mumkin.

Shakl-ichki xususiyati hali javob bermayapti, lekin buning sababi u 2-darajali modulga ko'chirilgan. Uning hozirgi cheklovlarining aksariyati keyingi bosqichda yo'qoladi.

Shakllarni yaratish uchun asboblar

Funksiyalardan foydalangan holda murakkab shakllarni yaratish ko'p vaqt talab qiladigan vazifa bo'lishi mumkin, ayniqsa polygon() yordamida ko'p nuqta va koordinatali shakl yaratayotgan bo'lsangiz. Yaxshiyamki, Adobe veb-platformasi jamoasi ushbu jarayonni ancha osonlashtirish uchun interaktiv vositalarni ishlab chiqarish ustida ishlamoqda. Bear Travis ko'pburchak shakllarni vizual tarzda yaratishga imkon beruvchi Shakl yaratish vositalari to'plamini yaratdi. Asbob shakl funksiyasini yaratadi. Bu foydali bo'lishi mumkin, lekin agar siz ma'lum bir tasvirga asoslangan shakl yaratmoqchi bo'lsangiz, uning cheklovlari bor, chunki asbob bunday imkoniyatni taqdim etmaydi.

Adobe veb-platformasi jamoasi tomonidan yanada rivojlangan va interaktiv vosita ishlab chiqilgan. Asbob yaqinda bepul Brackets muharririning kengaytmasi sifatida chiqarildi. U to'g'ridan-to'g'ri brauzerda shakllarni ko'rsatish va tahrirlash imkonini beradi va sahifada ularni o'zgartirganda uslublar jadvalidagi shakl qiymatlarini yangilaydigan onlayn oldindan ko'rish imkoniyatiga ega. Bu sizning o'zgarishlaringiz haqida zudlik bilan vizual fikr-mulohazalarni beradi, bu sizga shakllarning sahifadagi boshqa elementlar bilan qanday o'zaro ta'sirini ko'rish imkonini beradi.

Brackets ichidagi oldindan ko'rish rejimidan foydalanib, ko'pburchak shaklni to'g'ridan-to'g'ri brauzerda tahrirlang. Razvan Kaliman tomonidan yozilgan ekran yozuvi.

Ushbu vosita ajralmas bo'lib qoladi, chunki u raqamlarni yaratish, tahrirlash va tuzatishni osonlashtiradi. Razvan Caliman, Qavslar ichida Shakllar muharririni qanday ochish va undan foydalanishni boshlashni tushuntiradi.

Kelajak: CSS istisnolari

CSS Shapes spetsifikatsiyasi CSS shakllari va istisnolariga bag'ishlangan spetsifikatsiya edi, lekin u bo'lingan. CSS Shape ichki shakl va tashqi shakl xususiyatlarini aniqlagan bo'lsa, CSS istisnolari mutlaq joylashtirilganlar kabi suzuvchi bo'lmagan elementlarni o'rashga olib keladigan xususiyatlarni belgilaydi. Ular quyidagi rasmda ko'rsatilganidek, kontentning butun shakl atrofida turli yo'nalishlardan oqib chiqishiga imkon beradi.

Kelajakda CSS istisnolari jurnalning tarqalishida ko'rsatilganidek, kontentning ichki qismga o'xshash shakl atrofida aylanishiga imkon beradi. Inset ham dumaloq bo'lishi mumkin va matn xuddi shu tarzda uning atrofida aylanadi.

Raqamlarning yangi darajasi

Joriy CSS Shapes spetsifikatsiyasi faqat birinchi qadamdir. Tez orada yangi funksiyalar bizga kontentni yaratish va oqimi ustidan ko‘proq nazorat qilish imkonini beradi, bu bizga bir necha qator kodlar yordamida maketlarni jonli dizaynga aylantirishni osonlashtiradi. Bugungi kunga kelib, maxsus muharrirlar tashqi ko'rinishni to'ldirishga qaratilgan va siz 2014 yil oxiriga kelib ko'proq brauzerlarda CSS Shapes qo'llab-quvvatlanishini ko'rishingiz mumkin.

Siz bugungi kunda Shakllarni qo'llab-quvvatlamaydigan brauzerlarda maqbul almashtirishga ega ekanligini bilib, progressiv yaxshilash strategiyasining bir qismi sifatida foydalanishingiz mumkin. Men ularni yaqinda saytimda ishlatishni boshladim va almashtirish juda maqbul ko'rinadi. Keyinchalik murakkab dizaynlar uchun brauzerni qo'llab-quvvatlashni tekshirish uchun skriptdan foydalanishingiz mumkin va agar qo'llab-quvvatlanmasa, har qanday almashtirishni ta'minlashingiz mumkin. Shuningdek, siz ushbu skript bilan Modernizr testlaridan foydalanishingiz mumkin, tashqi ko'rinish xususiyati qo'llab-quvvatlanadi yoki yo'qligini tekshirishingiz yoki ushbu testni o'z ichiga olgan o'z tuzilmangizni yuklashingiz mumkin.

CSS shakllari bizga bosib chiqarish va veb-dizayn o'rtasida yana bir ko'prik yaratishga imkon beradi. Ushbu maqoladagi misollar oddiy, ammo ular sizga jurnal yoki afisha kabi murakkab dizaynni ekranda qayta yaratishingiz mumkinmi yoki yo'qmi, deb tashvishlanmasdan yaratish uchun asos bo'lishi kerak. To‘rtburchaklar bo‘lmagan maketlardan tortib Shakl animatsiyasigacha bo‘lgan narsalarni o‘rganayotgan bo‘lsangiz, hozir tajriba o‘tkazish vaqti.

Muammo

Tasvirlarni olmos shaklida kesish keng tarqalgan vizual dizayn texnikasi, ammo uni CSS-da amalga oshirish oson emas. Darhaqiqat, yaqin vaqtgacha bu deyarli imkonsiz edi.

Shu sababli, o'z g'oyalarini amalga oshirish uchun dizaynerlar birinchi navbatda grafik muharrirda kerakli tasvirlarni kesishlari kerak edi. Albatta, aytishga hojat yo'q, bu turdagi effekt veb-saytni saqlashda katta qiyinchiliklarni anglatadi va agar kimdir tasvirlarning stilizatsiyasini o'zgartirmoqchi bo'lsa, kelajakda kafolatlangan chalkashliklarni anglatadi. Shubhasiz, bizda hozirgacha yaxshiroq yo'l bo'lishi kerak. Aslida, bunday ikkita yo'l bor!

Transformatsiyaga asoslangan yechim

Asosiy g'oya avvalgi sirning birinchi yechimidagi bilan bir xil (yuqoridagi "Parallelogramma" siriga qarang) - biz rasmimizni o'rashimiz kerak.

, va keyin unga teskari o'zgartirishni qo'llang aylantirish()
HTML

.rasm(
kengligi: 400px;
aylantirish: aylantirish (45deg);
toshib ketish: yashirin;
}
.rasm > img (
maksimal kenglik: 100%;
aylantirish: aylantirish (-45deg);
}
Biroq, rasmda ko'rib turganingizdek, biz darhol kerakli stilizatsiyaga erisha olmadik. Albatta, agar siz rasmni sakkizburchak shaklida kesishni rejalashtirmoqchi bo'lsangiz, ishni tugallangan deb atashingiz va boshqa narsaga o'tishingiz mumkin. Ammo rasmni olmos shaklida kesish uchun siz ko'proq ishlashingiz kerak bo'ladi.

Istalgan effektga erishish uchun qarama-qarshi rotation() transformatsiyalari etarli emas (ism.rasm bilan div nuqtali kontur bilan ko'rsatilgan)
Asosiy muammo maksimal kenglikda yotadi: 100% deklaratsiya. 100% bizning konteynerimizga tegishli.rasm tomoni. Biroq, biz olingan tasvirning kengligi uning tomoniga emas, balki asl diagonaliga teng bo'lishini xohlaymiz. Siz allaqachon Pifagor teoremasining yordamiga muhtoj ekanligimizni taxmin qildingiz (agar siz xotirangizni yangilashingiz kerak bo'lsa, tushuntirishni yashirincha topasiz). Teoremada aytilganidek, kvadratning diagonali uning tomoniga ko'paytirilganiga teng .

Shuning uchun, maksimal kenglik qiymatini 2 × 100% ≈ 141,4213562% yoki yaxlitlangan, 142% belgilash mantiqan to'g'ri keladi, chunki biz hech qanday holatda tasvirning kichikroq bo'lishini xohlamaymiz (va agar u biroz kattaroq bo'lib chiqsa, keyin hamma narsa yaxshi, chunki biz uni baribir kesib tashlayapmiz).

Aslida, ikki sababga ko'ra scale() transformatsiyasi yordamida tasvirni kattalashtirish yaxshiroqdir: biz CSS transformatsiyasi qo'llab-quvvatlanmaydigan holatlarda tasvir hajmi 100% bo'lishini xohlaymiz;
Tasvir scale() transformatsiyasi yordamida kengaytirilganda, u markazdan o'lchaydi (agar boshqa transformatsiyaning boshlang'ich qiymati ko'rsatilmagan bo'lsa). Agar siz uni width xususiyati qiymatini o'zgartirish orqali oshirsangiz, u yuqori chap burchakdan masshtablanadi va uni ko'chirish uchun biz salbiy chegara qiymatlaridan foydalanishimiz kerak bo'ladi. Hammasini birlashtirib, biz ushbu yakuniy kodni olamiz:
.rasm(
kengligi: 400px;
aylantirish: aylantirish (45deg);
toshib ketish: yashirin;
}
.rasm > img (
maksimal kenglik: 100%;
aylantirish: aylantirish (-45deg) shkalasi (1.42);
}
Rasmda ko'rib turganingizdek, bu nihoyat bizga kerakli natijani beradi.

O'ZINGIZ SINOB KO'RING!
http://play.csssecrets.io/diamond-images

Kesish yoʻli yechimi

Oldingi yechim ishlaydi, lekin tabiatan iflos hiyla. Bu qoʻshimcha HTML elementini talab qiladi, yaʼni bu tartibsiz, chalkash va moʻrt yechim: kvadrat boʻlmagan tasvirlar bilan shugʻullanishimiz kerak boʻlsa, natija halokatli boʻladi.

Aslida, istalgan natijaga erishishning ancha yaxshi yo'li bor. Asosiy g'oya - mulkdan foydalanish klip yo'li- SVG-dan olingan yana bir xususiyat. Bu xususiyat endi HTML kontentiga (hech bo'lmaganda qo'llab-quvvatlovchi brauzerlarda) va odamlarni aqldan ozdirishi bilan mashhur bo'lgan SVG ekvivalentidan farqli o'laroq, yaxshi, o'qilishi mumkin bo'lgan sintaksisda qo'llanilishi mumkin.

Uning faqat bitta kamchiligi bor (ushbu bobni yozish paytida) - cheklangan brauzerni qo'llab-quvvatlash. Biroq, bu yechim soddalashtirilgan renderga qaytadi (kesish yo'q), shuning uchun u ko'rib chiqish uchun munosib nomzoddir. Adobe Photoshop kabi tasvirni tahrirlash ilovalari tufayli siz kesish yo'llari bilan allaqachon tanish bo'lgansiz. Kesish yo'llari elementni istalgan shaklda kesish imkonini beradi. Bu holda biz poligon() shaklidan foydalanamiz.

Biz rombni aniqlaymiz, lekin umuman olganda, bu shakl har qanday ko'pburchakni vergul bilan ajratilgan nuqtalar ketma-ketligi bilan aniqlash imkonini beradi. Siz hatto foizlardan ham foydalanishingiz mumkin - umumiy qiymatlar elementning umumiy o'lchamlariga nisbatan hisoblab chiqiladi. Kod juda oddiy:
klip-yo'l: ko'pburchak (50% 0, 100% 50%, 50% 100%, 0 50%);

Xoh ishoning, xoh ishonmang, hammasi shu! Ammo ikkita HTML elementi va sakkiz qatorli chalkash CSS kodlari o'rniga biz faqat bitta oddiy satr bilan xohlagan narsamizga erishdik. Lekin klip-patning ajoyib qobiliyatlari bu bilan cheklanmaydi. Bu xususiyat hatto animatsiyani ham qo'llab-quvvatlaydi - agar biz ikkita bir xil shakl funktsiyalari (bizning holatlarimizda poligon()) o'rtasida bir xil sonli nuqtalar bilan o'tishni jonlantirsak. Shunday qilib, agar biz sichqonchani bosish orqali to'liq tasvirni muammosiz kengaytirmoqchi bo'lsak, buni shunday qilish mumkin:
img (
klip-yo'l: ko'pburchak (50% 0, 100% 50%,
50% 100%, 0 50%);
o'tish: 1s klip-yo'l;
}
img: suring (
klip yo'li: ko'pburchak (0 0, 100% 0,
100% 100%, 0 100%);
}
Bundan tashqari, bu usul kvadrat bo'lmagan tasvirlarga mukammal moslashadi, Ah, zamonaviy CSS quvonchlari ...
O'ZINGIZ SINOB KO'RING!

Vlad Merzhevich

Veb-saytlarda uchburchaklar ko'pincha elementlar dizaynining bir qismi sifatida ishlatiladi, masalan, ular o'quvchining e'tiborini to'g'ri joyga yo'naltirish uchun ko'rsatgich bo'lib xizmat qiladi; Uchburchaklar dekorativ funktsiyalarni ham bajaradi, ular ishlatiladigan bloklarni yanada oqlangan va zamonaviy qiladi. Shaklda. 1-rasmda dizayndagi uchburchakdan foydalanish misoli ko'rsatilgan.

Guruch. 1. Veb-dizayndagi uchburchaklar

Siz CSS yordamida to'g'ridan-to'g'ri uchburchak yarata olmaysiz, shuning uchun uni qo'shishning ikkita usuli mavjud - chegara orqali va transform .

Chegarani ishlatish

Chegara xususiyati orqali yaratilgan chegaralar uchburchaklar bilan bevosita bog'liq bo'lmasa-da, chegara bu maqsadda eng ko'p ishlatiladigan chegara hisoblanadi. Agar biz elementning kengligi va balandligini nolga tenglashtirsak, shuningdek, etarlicha qalin chegara o'rnatsak, biz to'rtta uchburchaklar to'plamini ko'ramiz (2-rasm). Aniqlik uchun har tomondan chegaralar turli ranglarga o'rnatiladi.

Guruch. 2. Elementga chegara qo‘shish

Faqat kerakli chegarani qoldirib, qolgan qismini shaffof qilib, biz kerakli rangdagi uchburchakni olamiz (3-rasm).

Guruch. 3. Shaffof hoshiyali element

1-misol psevdo-elementdan keyin blokga uchburchakni qanday qo'shishni ko'rsatadi.

Misol 1. Uchburchak bilan bloklash

Mutlaq joylashtirilgan elementlar uchun nol kenglik va balandlik talab qilinmaydi.

Chegaralarni birlashtirib, siz yana to'rt turdagi uchburchaklarni olishingiz mumkin, ular yuqorida aytib o'tilganlar bilan birgalikda sakkizta variantni beradi. Ularning turi va kerakli kod jadvalda keltirilgan. 1.

Jadval 1. Uchburchaklarning mumkin bo'lgan turlari

Ko'rinish	Uslub
	chegara: 20px qattiq shaffof; chegara tepasi: 20px qattiq yashil;
	chegara: 20px qattiq shaffof; chegara o'ng: 20px to'liq yashil;
	chegara: 20px qattiq shaffof; chegara-pastki: 20px qattiq yashil;
	chegara: 20px qattiq shaffof; chegara-chap: 20px qattiq yashil;
	chegara: 20px qattiq shaffof; chegara tepasi: 20px qattiq yashil; chegara o'ng: 20px to'liq yashil;
	chegara: 20px qattiq shaffof; chegara o'ng: 20px to'liq yashil; chegara-pastki: 20px qattiq yashil;
	chegara: 20px qattiq shaffof; chegara-pastki: 20px qattiq yashil; chegara-chap: 20px qattiq yashil;
	chegara: 20px qattiq shaffof; chegara-chap: 20px qattiq yashil; chegara tepasi: 20px qattiq yashil;

Jadvalda ko'rinmas chegaralar joy egallashini ko'rsatadi, elementlarni joylashtirishda buni hisobga oling. Uslub, shuningdek, nol kenglik va balandlik bilan to'ldirilishi yoki 1-misolda bo'lgani kabi, pozitsiya xususiyatidan foydalanishi kerak.

Agar siz turli xil chegara qalinligini o'rnatsangiz, uchburchak boshqa shakllarda bo'lishi mumkin. Shunday qilib, blokni yaratish uchun kod shaklda ko'rsatilgan. 4, 2-misolda ko'rsatilgan.

Guruch. 4. O'tkir uchburchak

2-misol. O'tkir uchburchak

Chegaradan foydalanib, biz rasmda ko'rsatilgan ramkani yaratish uchun tekis rangli uchburchaklarni olamiz. 5 siz hiyla ishlatishingiz va bir elementni bir oz ofset bilan ikkinchisining ustiga qo'yishingiz kerak. Shunga qaramay, :before va :after psevdo-elementlari bizga bu erda yordam beradi (3-misol).

Guruch. 5. Burchakli ramka

3-misol: Uchburchak qoplamasi

Glok kuzdra shteko bokr unib chiqdi va bokrenkani jingalak qilyapti.

Biz bitta rangli elementni ikkinchisining ustiga qo'yayotganimiz sababli, bu usul faqat bitta rangli to'ldirish uchun mos keladi va gradientlar yoki fon tasvirlari uchun mos emas.

Transformatsiyadan foydalanish

Transformatsiyadan foydalanib, biz kvadrat elementni 45º ga aylantirishimiz va undan romb olishimiz mumkin. Bu hali uchburchak emas, shuning uchun biz kerakli chiqadigan qismni ko'rinadigan joyda qoldiramiz va qolgan qismini boshqa element orqasiga yashiramiz (4-misol).

3-misol: Transformatsiya

Glok kuzdra shteko bokr unib chiqdi va bokrenkani jingalak qilyapti.

Ushbu misolning natijasi rasmda ko'rsatilgan. 6.

Guruch. 6. Soyali uchburchak

Hammaga salom. Bugun biz juda g'ayrioddiy mavzuga to'xtalamiz, ya'ni veb-dizaynning kelajagi, CSS shakllari.

Ma'lumki, u hozir juda moda, lekin u asosan to'rtburchaklardan iborat bo'lib, bu o'z navbatida dizaynerlarning ufqlarini sezilarli darajada cheklaydi. Va keyin moslashuvchanlik bor .. Bu ijodkorlik nuqtai nazaridan juda cheklangan. Ammo bu erda bitta katta plyus bor - matnni to'rtburchaklar atrofiga o'rash oson, ammo matnni dumaloq yoki tartibsiz shakllar atrofida qanday qilib aylantirish qiyinroq. Chunki rasmlarni yumaloq qilib bo'lmaydi.

Aynan shu holatda raqamlar bizga yordam beradi. Mashhur W3C CSS sayti shakllar bo'yicha birinchi hujjatlarni nashr etdi. Mana bu post ingliz tilidagi CSS Shapes moduli 1-darajali. Ushbu modul yaqinda 20-iyun kuni chiqarildi. Hozircha bu to'rtburchak, uchburchak, ellips, doira va ko'pburchak kabi shakllarni o'z ichiga olgan beta-versiya.

Keling, misol yordamida CSS shakllarining afzalligi nimada ekanligini batafsil ko'rib chiqaylik.

Birinchidan, http://www.webdesignerdepot.com orqali oddiy HTML belgilarini olaylik:

Bu misol matn

© 2024 Barcha huquqlar himoyalangan

Sizning mobil aloqa bo'yicha qo'llanma. Operatorlar. Foydali maslahatlar

• Loyiha bo'yicha reklama

• Bilan aloqada
• Sinfdoshlar
• Facebook
• Twitter