html-де фигураларды қалай жасауға болады. CSS vw бірліктерімен тамаша жауап беретін пішіндерді жасау

Front-end әзірлеушісі және векторлық иллюстратор

Векторлық суретшілер мен фронттық әзірлеушілердің жұмыстары жиі бөлінеді. Себебі, әдетте, көптеген компаниялар штатында жеткілікті адамдар бар, сондықтан бөлу өнімділікті арттыру мақсатында орын алады. Тағы бір кең таралған себеп - кейбір адамдар толығымен алдыңғы қатарлы дамуға назар аударғысы келеді, ал басқалары иллюстрацияларға көбірек тартылады. Екі саланың да нақты тауашалары бар, онда сіз шынымен жақсы және құнды дағдыларды үйренуге назар аудара аласыз.

Әрине, бұл тәсіл өте парасатты, бірақ менің ойымша, алдыңғы қатарлы әзірлеуші ​​​​ол оның басты мақсаты болмаса да, иллюстрациялармен жұмыс істеуден көп нәрсеге қол жеткізе алады.

Өйткені, екі дағды да түпкілікті өнімді жасау үшін әртүрлі компоненттерді біріктіруден тұрады. Иллюстраторлар әр түрлі фигураларды біріктіріп, сурет салуды аяқтау үшін пішіндермен жұмыс істейді. Front-end әзірлеушілері, өз кезегінде, веб-бет жасау үшін код құрамдастарын біріктіреді.

Векторлық графиканың негіздерін үйрену сізді макеттермен, түс үлгілерімен, пішін динамикасымен және тұтастай алғанда, алдыңғы қатарлы әзірлеуші ​​​​болатын шығармашылықпен таныстырады.

Мен бұл әңгімені векторлық графикамен жақсы таныс фронт-өнерлеушілер болудың артықшылықтары туралы бастадым. таза CSSвекторлық иллюстраторлар мен алдыңғы қатарлы әзірлеушілердің жұмысы арасындағы қиылысу қаншалықты керемет болатынына мысал бола алады.

Таза CSS кескінін жасау векторлық иллюстрациялық бағдарламалық құралды (мысалы, Inkscape, Illustrator, Affinity Designer немесе Sketch) пайдаланудың орнына CSS кодымен тікелей жұмыс жасайтыныңызды білдіреді.

Мамандықтардың ұқсастығына қарамастан, менің ойымша, иллюстратор ретінде кескін жасау үшін қажетті тонна CSS коды қорқынышты болуы мүмкін, алайда, алдыңғы қатарлы әзірлеуші ​​үшін кодты пайдаланып кескін жасау перспективасы.

Осы себепті, мұнда бірінші таза CSS кескінін жасауға арналған нұсқаулық бар, мен үміттенемін:

• таза CSS-де кескіндерді жасау сенімділігін арттырады;
• таза CSS кескіндері қалай жасалатынын түсінуге көмектеседі;
• егер сіз фронтальды әзірлеуші ​​болсаңыз, бұл сіздің векторлық графикаға деген қызығушылығыңызды арттырады;
• егер сіз векторлық иллюстратор болсаңыз, ол фронт-end әзірлеуге қызығушылықты арттырады;
• таза CSS кескіндерін жасау үшін негізгі үлгіні қамтамасыз етеді.

Таза CSS кескін құрамдастары

Алдымен, «таза CSS» дегеніміз не екенін анықтайық.

«Таза CSS» кескіндерін жасау бірнеше HTML div тегтеріне CSS стилін қосуды қамтиды.

Мысалы, біз тек бір div және оған қолданылатын стиль бар шаршы жасай аламыз:

Негізгі мәтін (фон: #1D1F20; ) .square( ені: 100px; биіктік: 100px; фон: #A58CB6; )

Соңғы суретті қалыптастыру үшін блоктарды сәндеу арқылы пішіндерді жасаймыз.

Әрбір таза CSS жобасы келесі компоненттерден тұрады:

• әрбір пішін үшін div тегі;
• әрбір div үшін тағайындалған арнайы CSS класы;
• кенеп ретінде қызмет ететін көрінбейтін блок.

Міне, таза CSS-де жасалған кескіннің соңғы нұсқасы, ол үшін біз тек жоғарыда аталған компоненттерді қолданамыз.

Бірақ кодты жазуды бастамас бұрын, осы коала бейнесі қандай нақты пішіндерден тұратынын анықтап алайық.

Фигуралардың құрылымы

Біріншіден, коаланың бүкіл бейнесі көрінбейтін төртбұрышты кенептің үстіне салынған (бұл ресми термин емес). Бұл көрінбейтін қорап дененің ортасында, ал басы қораптың ортасында болады. Жеке менің ойымша, бұл жауапты дизайнды жеңілдететін жақсы тәжірибе (бұл туралы мақаланың соңында).

Әзірге біз төменде атап өткен көзге көрінбейтін төртбұрышты қораппен айналысатынымызды есте сақтаңыз:

Екіншіден, бізде шеңбервеб-беттің ортасында, оның негізінде біз жасаймыз бас.

Әрі қарай, біз жасаймыз құлақтар, олар бастың бүйірлерінде орналасқан. Әрбір құлақ тұрады екі түсті шеңбер, олар бір-бірімен қабаттасады, бір шеңбер екіншісінен сәл кішірек. Біз құлақ div және «ішкі құлақ» div арасындағы айырмашылықты жасаймыз.

Оған қоса бізде екеуі бар көздер, олар да шеңберлердебірінің үстіне бірінің үстіне қойылады. Олар түсі мен өлшемі бойынша ерекшеленеді: үлкен шеңбер ақ, ал кіші шеңбер (қарашық) қара.

Ал соңғы жанасу - коаланың жоғарғы жағында әртүрлі позицияларға ие үшбұрыштар түріндегі сұр шаштың екі шоғыры.

Тағы бір айта кететін маңызды нәрсе, біз кескінді жасау үшін әртүрлі қабаттарды да қолданамыз. Құлақ бастың артында, мұрын көздің алдында және т.б. Бұл CSS-пен жұмыс істеуге көшкен сайын анық болады.

HTML

Ескертпе Коалаға шаш қосу үшін біз қысқыш жол әдісін қолданамыз. Оған Chrome, Safari және Opera жүйелерінде қолдау көрсетіледі. Егер сіз Firefox-ты пайдаланып жатсаңыз, осы нұсқаулықты оқып жатқанда басқа браузерге ауысуды ұсынамын.

Әдетте, мен пішін болатын бір div қосамын, содан кейін оны мәнерлеймін, содан кейін келесі div -ге ауысамын.

Дегенмен, бұл нұсқаулық болғандықтан, алдымен HTML кодын қарастырып, оны бөлшектеп алайық:

Кейбір divs басқалардың ішінде кірістірілгенін ескеру маңызды. Біздің коаланың оң құлағын көрейік:

«Құлақ-оң» (оң құлақ) - ата-ана div және «ішкі құлақ» (ішкі құлақ) - бала.

Бұл ерекшелік маңызды, себебі пішіндерге пайызбен көрсетілген тұрақты орын, ені және биіктігі беріледі.

Мысалы, бізде биіктігі: 100% және ені: 100% болатын денеде кірістірілген бөлім бар делік:

Some-div сыныбына негізгі блоктың жоғарғы бөлігінен 10% төмен тұрақты орын тағайындалады. Some-div ені 100% және биіктігі 100% болатын body ішіне енгізілгендіктен, div осы блоктың жоғарғы жағынан 10% төмен орналасады.

Енді some-div ішіне басқа div ұясын салып, оған бірдей стиль беріңіз:

Көріп отырғаныңыздай, біз мүлдем басқа макет аламыз.

Бұл мысалда other-div (көк шаршы) some-div (қызыл шаршы) қарағанда 10% төмен.

Енді басқа-div-ді some-div-тен денеге жылжытыңыз және толтыруды 30% дейін арттырыңыз:

another-div енді some-div емес, дененің жоғарғы жағынан 30% шегініске салынған.

Осыны ескере отырып, CSS стильдеріне көшейік.

CSS стильдері

дене

Алдымен дененің фон түсін орнатайық. Бұл Twitter сияқты көк түсті болсын:

Дене (фон: №25A9FC; )

қорап

Енді көрінбейтін блокқа стильдерді қосамыз. Ол көлденеңінен ортасына орналастырылады (өріс орнын қадағалау үшін оған фон немесе жиек қосыңыз):

Box(позиция: салыстырмалы; маржа: авто; дисплей: блок; // қосымша фон және жиек фоны: ақ; жиек: тұтас 4 пиксель қызыл; // осы жерде код)

позиция: салыстырмалы элементтің қалыпты орнына қатысты орналасқанын білдіреді, ол жоғарғы сол жақ бұрыш болып табылады, себебі бұл денедегі бірінші div.

Позиция сипаты салыстырмалы мәніне орнатылғанда, display: block; және маржа: авто; өрісті көлденеңінен автоматты түрде ортаға қою үшін.

Содан кейін біз қорапты 8% төмен орналастыру үшін келесі код бөлігін қосып, биіктік пен енді жоғарыдағы суреттегідей өлшемдерге орнатып, соңында фондық мәнді қажетінше орната аламыз:

Жәшік(орын: салыстырмалы; жиек: авто; дисплей: блок; жиек-жоғарғы: 8%; ені: 600px; биіктік: 420px; фон: жоқ; )

Маржаны 8%-ға төмендету үшін біз margin-top: 8% сипатын пайдаланып жатқанымызды ескеріңіз. top параметрін реттеп жатқандықтан, бұл margin:auto арқылы орнатылған алдыңғы жиектерімізге әсер етпейді.

Енді маржа орнатылғаннан кейін, біздің барлық басқа divs оның ішінде кірістірілген болады. Тағы да, бұл өте маңызды, өйткені абсолютті пайыздық позицияларды тағайындағанда, бұл div-ті маржаның бірдей пайызында орналастырады, бірақ одан емесдене. Дәл осындай принцип біздің биіктігіміз бен енімізбен жұмыс істейді.

Бас

Басты құру кодын қарастырайық, содан кейін оны кезең-кезеңімен бөлеміз:

Бас (позиция: абсолютті; жоғарғы: 16,5%; сол жақ: 25%; ені: 50%; биіктік: 67%; фон: #A6BECF; жиек радиусы: 50%; )

Жоғарғы және сол жаққа арналған пайыздар div қораптың жоғарғы жағынан 15% және сол жақтан 25% болатынын білдіреді. div ені өріс енінің 50% және биіктігі өріс биіктігінің 67% құрайды. Осыдан кейін біз фон түсін ашық сұр етіп орнаттық.

Содан кейін біз шекара радиусын қолданамыз: 50% . Бұл сипатты өткізіп жіберсеңіз, бас әрқашан тіктөртбұрыш (немесе шаршы) түрінде болады. border-radius – пішінді өзгертетін қасиет. Егер сіз Illustrator бағдарламасымен таныс болсаңыз, жиек-радиус сипатын қосуды шаршының жиектерін дөңгелектеу үшін сүйреумен салыстыруға болады. Пішінді шеңберге айналдыру үшін біз әрқашан 50% коэффициентін қолданамыз.

border-radius шеңберді құру үшін ғана емес, сонымен қатар кез келген пішінді, мысалы, коаланың мұрнына арналған тіктөртбұрышты дөңгелектеу үшін де қолдануға болады.

Әрі қарай бармас бұрын, мен жоғарғы, сол жақ, ен және биіктік пайыздарын қайдан алғанымды түсіндіремін. Біз өріске 600 пиксель енін бердік, сондықтан 50% бізге 300 пиксель береді. Қораптың биіктігі небәрі 400 пиксель болғанын ескерсек, бастың пайызы жоғары болуы керек.

Сіз менен биіктікті есептеудің нақты формуласын беруімді күтетін шығарсыз. Шынымды айтсам, мен әдетте теру арқылы қажетті мәнді табамын.

Таза CSS-те неғұрлым көп кескін жасасаңыз, оңтайлы мәндерді соғұрлым жылдам табасыз. Бірақ қазір ойлану керек нәрсе - ата-аналық div биіктігі мен ені және бала div оның ата-анасына қатысты қаншалықты үлкен болуы керек.

Енді позициялық пайыздарға ие бола отырып, абсолютті орталықты есептеу әлдеқайда оңай. Міне формула:

Сол жақ = (100 - ені) / 2 жоғарғы = (100 - биіктігі) / 2 // біздің жағдай (100 - 67)/2 = жоғарғы: 16,5%; (100-50)/2 = сол жақ: 25%;

Енді бұл код бөлігі біздің бас div үшін жұмыс істейді, өйткені біз оны ортаға салғымыз келеді. Дегенмен, біз, мысалы, құлақтарды дәл ортаға қоюды қаламаймыз. Біз бұл нүктеге жақын арада жетеміз, сонымен қатар мен жоғарғы және сол жақтың орнына төменгі және оң жақты қашан пайдалану керектігін түсіндіремін.

Бұл бөлім туралы айтатын соңғы нәрсе, әрбір келесі div бас div ішіне кірістірілген болады, өйткені қосылған әрбір пішін оның үстіне орналастырылады.

Міне, осы кезеңде не алуымыз керек:

бас көшірмесі

Басты көшірме div тек құлақтар бастың артында көрінуі үшін жасалған. Ол үшін z-индекс қасиеті пайдаланылады. Алдыңғы код үзіндісінің соңғы жолына назар аударыңыз:

Z-индекс: 2;

z-индексі экранға перпендикуляр ось бойымен басқаларға қатысты div орнының деңгейін көрсету үшін пайдаланылады (яғни, сізге қарай немесе сізден алыс). Қабаттар осы сипат арқылы орнатылады.

Біздің соңғы бейнемізде көз бастың үстінде болады, мұрын көздің үстінде болады және т.б. Мұның барлығы z-индекс арқылы басқарылатын болады. z-индекс мәні неғұрлым жоғары болса, div соғұрлым жоғары орналасады.

Егер сізде екі div болса, z-index: 1 сіздің төменгі қабатыңыз және z-index: 2 сіздің жоғарғы қабатыңыз болады. Бастың көшірмесін қосқанда, біз оған z-индексін береміз: 2 , бұл біздің коаланың құлағы бастың артында орналасатынын білдіреді.

Қаласаңыз, құлақты қосқанда бастың көшірмесін алып тастап, не болатынын көре аласыз.

Біз ешқандай өзгерістер көрмеуіміз керек. Сурет әлі де келесідей:

Құлақтар

Жоғарыда айтылғандай, бізде әр жағынан шеңберлерден тұратын бір құлақ болады. Әр құлақтың үстінде екі үлкен ашық сұр шеңбер және екі кішірек қара сұр шеңбер (оларды ішкі құлақ деп атаймыз).

Ear-left(позиция: абсолютті; ені: 60%; биіктігі: 65%; сол жақта: -20%; жоғарғы: 5%; фон: #A6BECF; жиек радиусы: 50%; z-индекс: 1; ) .ear -оң жақ(позиция: абсолютті; ені: 60%; биіктік: 65%; оң жақта: -20%; жоғарғы: 5%; фон: #A6BECF; жиек радиусы: 50%; z-индекс: 1; ) .ішкі- ear(позиция: абсолютті; жиек радиусы: 50%; ені: 80%; биіктік: 80%; жоғарғы: 10%; сол жақта: 10%; фон: #819CAF; )

Әрбір сынып үшін біз border-radius:50% пайдаланамыз, өйткені бізге шеңберлер қажет, содан кейін фон арқылы түс қосамыз .
Көріп отырғаныңыздай, біз құлаққа екі түрлі стиль жаздық, бірақ ішкі құлаққа біреуі ғана. Бұл позициялаумен айналысқанда анық болады.

Оң және сол құлаққа арналған негізгі div - бас. Осылайша, пайыздар биіктігі мен ені сияқты басына қатысты есептеледі. Біз биіктігі мен енін есептейміз, біз үлкен құлақтарды қалаймыз, бірақ ол басынан кішірек болуы керек. Сонымен, біз енін аламыз: 60% және биіктігі: 65%.

Ішкі құлақтар сол және оң құлаққа енгізіледі. Біз олардың сәл кішірек болуы керек екенін білеміз, сондықтан біз оларға ені мен биіктігін 80% береміз. Біз сондай-ақ ішкі құлақтың құлақтың дәл ортасында болғанын қалаймыз, сондықтан біз таныс формуланы қайта пайдалана аламыз:

Сол жақ = (100 - ені) / 2 жоғарғы = (100 - биіктігі) / 2 // біздің жағдай (100 - 80)/2 = жоғарғы: 10%; (100-80)/2 = сол жақ: 10%;

Сол және оң жақ құлаққа қатысты болғандықтан, біз сол және оң құлақ үшін бірдей стильді пайдалана аламыз, сондықтан бізде тек бір ішкі құлақ div бар. Біз құлақтар үшін екі бөлек div қолдануға мәжбүрміз, өйткені олардың сол және оң мәндері әртүрлі болады, өйткені олар басына қатысты орналасады.

Біз құлақтың бастың сол және оң жағына шығып тұрғанын қалаймыз. Көрсетілген бағытта жылжу үшін біз теріс мәндерді солға: -20% және оңға: -20% пайдаланамыз.

Соңында не болды:

//сол жақ құлақтың ені: 60%; биіктігі: 65%; сол жақ: -20% жоғарғы: 5%; //оң жақ құлақтың ені: 60%; биіктігі: 65%; оң жақ: -20%; жоғарғы: 5%;

Соңында z-индексін қосамыз: 1 ; сондықтан біздің құлағымыз бастың астына түседі. Міне, біз не алуымыз керек:

Көздер

Көріп отырғаныңыздай, біздің коаланың көздері оның құлақтарына ұқсас. Бізде екі үлкен ақ шеңбер (сол және оң көз) және бір қарашық бар.

Олар үшін шекара радиусын қолданамыз:50% , өйткені олар шеңбер болып табылады, сонымен қатар сәйкес түсті орнату үшін өңді пайдаланыңыз.

Бізде әр көзге сәйкес келетін қарашық бар. Біз қарашықтың биіктігі мен енін болжап, оны ортасына келтіріп, келесі нәтижені аламыз:

Ені: 28%; биіктігі: 30%; жоғарғы: 35%; сол жақ: 36%

Сол жақ көзді толтыруды анықтау үшін сынақ және қате әдісін немесе жоғарыдағы формуланы да пайдалануға болады. Сонымен қатар, біз оңтайлы мәнді тапқанша биіктік пен ені көрсеткіштерін болжаймыз.

//сол жақ көздің ені: 30%; биіктігі: 33%; жоғарғы: 25%; сол жақ: 21% //оң жақ көздің ені: 30%; биіктігі: 33%; жоғарғы: 25%; оң жақта: 21%;

z-индексіне келетін болсақ, келесі мәндер мұрынды көздің үстіне қояды:

//сол жақ көз z-индекс: 3; //оң жақ көз z-индекс: 2;

Нәтижесінде біз мына суретті алуымыз керек:

Мұрын

Енді мұрынды жасайық. Біз барлық мәндерді бірдей таңдаймыз, міне оңтайлылары:

Ені: 25%; биіктігі: 42,5%; сол жақ: 37% жоғарғы: 45%;

Фонды пайдаланып фон түсін қоңыр етіп орнаттық, және тереңдігі z-индексімен:4, сондықтан мұрын көздің үстінде болады.

Біз сондай-ақ border-radius: 50px пайдаланамыз, оны тіктөртбұрыштың бұрыштарын қалағандай дөңгелектеу үшін қолданамыз. Пішінді сәл ғана дөңгелектеу қажет болғанда, пайыздарды емес, пикселдер санын көрсету оңайырақ.

Енді бізде мына сурет бар:

Шаш

Бітуге сәл қалды бітейін деп қалдым! Соңғы қадам - ​​сол және оң жақ екі шоқ шашымызды сәндеу, содан кейін біз дайын коала аламыз.

Шаш-сол (позиция: абсолютті; жоғарғы: -8%; сол: 30%; ені: 20%; биіктік: 20%; фон: #A6BECF; -webkit-clip-path: полигон (50% 0%, 0%) 100%, 100% 100%); қысқыш жол: көпбұрыш (50% 0%, 0% 100%, 100% 100%); ).шаш-оң (позиция: абсолютті; жоғарғы: -4%; сол жақта: 48 %; ені: 20%; биіктік: 20%; фон: #A6BECF; -webkit-clip-path: көпбұрыш (50% 0%, 0% 100%, 100% 100%); кесу жолы: көпбұрыш (50%) 0%, 0% 100%, 100% 100%); )

Көріп отырғаныңыздай, бұл жерде біз border-radius қолданбаймыз, бірақ бізде клип-жолы бар код бар:

webkit-clip-path: көпбұрыш(50% 0%, 0% 100%, 100% 100%); клип-жол: көпбұрыш(50% 0%, 0% 100%, 100% 100%);

Шаршыдан, үшбұрыштан және шеңберден басқа кез келген пішін үшін қисық жол әдісін пайдалану оңайырақ.

Бұл аздап түсініксіз болып көрінуі мүмкін, бірақ бақытымызға орай, әртүрлі фигуралар үшін клип-жолдарды беретін Clippy атты тамаша құрал бар. Оң жақта сіз әртүрлі пішіндерді көресіз:

Жоғарыдағы суретте үшбұрыш таңдалған, сондықтан сіз клип-жолды көшіріп, оны шаштың CSS класына қоюға болады.

Түсті фонмен қайтадан орнатамыз және екі сәуле үшін ені мен биіктігін 20% орнаттық. Сол жақ сәулені солға орнаттық: 30% және оң жақ сәулені солға: 48% . Бұл жақсы үлгінені пайдалану керектігін талқылау үшін: оңға немесе солға . Оң жақ сәулені 5% оңға жылжытқымыз келеді делік. Сол жаққа шығу үшін 5%-дан 48%-ға қосуға болады:53% . Дегенмен, жақсы форманың ережесі солдан оңға және керісінше 50% жоғары мәнде өту болып табылады. Сондықтан сол жақ: 53% оңға баламалы болады:47% .

Үстіңгі ығысу теріс болады, өйткені біз екі шоқ шаштың бастың үстіне шығып тұруын қалаймыз. Сол жақ арқалық сәл көбірек шығады, сондықтан біз оған биіктік береміз: 8% , ал оң жақ сәуле сәл кішірек, биіктігі: 4% .

Біздің коала суретіміз дайын!

Нәтижесінде CSS коды келесідей болуы керек:

Body( фон: #25A9FC; ) .box(позиция: салыстырмалы; жиек: авто; дисплей: блок; жиек-жоғарғы: 8%; ені: 600px; биіктік: 420px; фон: жоқ; ) .head(позиция: абсолютті; жоғарғы:16,5%; сол жақ: 25%; ені: 50%; биіктігі: 67%; фон: #A6BECF; жиек-радиусы: 50%; ) .head-copy( ені: 100%; биіктік: 100%; орны: абсолютті; фон: #A6BECF; жиек радиусы: 50%; z-индекс: 2; ).ear-left(позиция: абсолютті; ені: 60%; биіктік: 65%; сол жақта: -20%; жоғарғы: 5% ;фон: #A6BECF;шекара радиусы: 50%; z-индекс: 1; ) .ear-right(позиция: абсолютті; ені: 60%; биіктік: 65%; оң жақ: -20%; жоғарғы: 5%; фон: #A6BECF; жиек радиусы: 50%; z-индекс: 1; ) .inner-ear(позиция: абсолютті; шекара радиусы: 50%; ені: 80%; биіктік: 80%; жоғарғы: 10%; сол жақ: 10%; фондық: #819CAF; ) .eye-left(позиция: абсолютті; фон: ақ; ені: 30%; биіктік: 33%; жоғарғы: 25%; сол жақта: 21%; шекара радиусы: 50% ; z-индекс: 3; ) .eye-right(позиция: абсолютті; фон: ақ e; ені: 30% биіктігі: 33%; жоғарғы: 25%; оң жақта: 21%; шекара радиусы: 50% z-индекс: 3; ) .pupil( орны: абсолютті; ені: 28%; биіктік: 30%; жоғарғы: 35%; сол жақта: 36%; жиек радиусы: 50%; фондық: #27354A; ) .nose(позиция: абсолютті; фондық: #BE845F; ені: 25%; биіктігі: 42,5%; сол жақ: 37%; жоғарғы: 45%; жиек радиусы: 50px; z-индекс: 4; ) .hair-left(позиция: абсолютті; жоғарғы: -8% ; сол жақ: 30%; ені: 20%; биіктік: 20%; фон: #A6BECF; -webkit-clip-path: көпбұрыш (50% 0%, 0% 100%, 100% 100%); клип-жол: көпбұрыш(50% 0%, 0% 100%, 100% 100%); ) .hair-right( орны: абсолютті; жоғарғы: -4%; сол жақта: 48%; ені: 20%; биіктік: 20%; фон : #A6BECF; -webkit-clip-path: көпбұрыш (50% 0%, 0% 100%, 100% 100%); клип-жол: көпбұрыш (50% 0%, 0% 100%, 100% 100%) ;)

Әрі қарай жаттығу

Бұл мақала сізге таза CSS кескіндерін жасау туралы нақты түсінік берді және сізді осы тақырыпты зерттеуді жалғастыруға шабыттандырады деп үміттенемін. Сондай-ақ, сізде қазір болуы керек жақсы үлгі, оны әрі қарай тәжірибе үшін пайдалануға болады.

Мен де саған екеуін ұсынамын еркін жолдарОсы тақырып бойынша дағдыларыңызды арттырыңыз:

1. Таза CSS кескіндері бейне курсы.
2. Күнделікті CSS кескіндер сайысы.

Бағдарламашыларға кеңес: егер сіз конкурсқа тіркелсеңіз Huawei HonorКубок, мүшелер үшін онлайн мектепке тегін қол жеткізу. Сіз әртүрлі дағдылар бойынша деңгейге көтеріліп, конкурстың өзінде жүлделер ұтып ала аласыз. .

Автордан:Тіктөртбұрыштар ішіндегі тіктөртбұрыш: біздің веб-беттеріміз әрқашан осылай жасалған. Біз жасау үшін CSS пайдалану арқылы ұзақ уақыт бойы осы шектеулерден арылуға тырыстық геометриялық фигуралар, бірақ бұл пішіндер мәнерленген элементтердің ішіндегі мазмұнға немесе беттегі басқа элементтердің мәнерленген элементке қатысты орналасуына ешқашан әсер етпейді.

Пішіндерге арналған жаңа CSS спецификациясы ағымдағы жағдайды өзгертеді. 2012 жылдың ортасында Adobe ұсынған ол веб-дизайнерлерге салыстырмалы түрде күрделі пішіндердегі және айналасындағы мазмұн ағынын өзгерту мүмкіндігін беруді мақсат етеді — бұған дейін біз ешқашан, тіпті JavaScript арқылы қол жеткізе алмаған нәрсе.

Мысалы, мәтіннің келесі дизайндағы дөңгелек суреттерді қалай орап жатқанына назар аударыңыз. Пішіндерсіз мәтін тіктөртбұрышты болады - дизайнды келесі деңгейге шығаратын нәзік трюкті шығарады.

Мәтіннің мазмұнына назар аударыңыз дөңгелек пішіносы мысалдағы пластинаның жиектері бойымен. CSS Shapes көмегімен біз веб-бет үшін ұқсас дизайн жасай аламыз.

Shapes қалай жұмыс істейтінін және оларды пайдалануды қалай бастауға болатынын егжей-тегжейлі қарастырайық.

Браузерді қолдау

CSS пішіндеріне қазір тек Webkit Nightly және Chrome Canary қолданбаларында қолдау көрсетіледі, бірақ олардың 1-деңгейлік модулі PhD дәрежесіне жетті, сондықтан спецификацияда анықталған сипаттар мен синтаксис айтарлықтай тұрақты. Басқа браузерлер оларды қолдағанша көп уақыт өтпейді. Бұл деңгей пішін айналасындағы мазмұн ағынын өзгертетін Пішін сипаттарына назар аударады. Атап айтқанда, ол пішін-сыртқы қасиетке және соған байланысты нәрселерге назар аударады.

Қиып алу және бүркемелеу, CSS сүзгілері және коллаждау және біріктіру сияқты басқа соңғы мүмкіндіктермен біріктірілген CSS пішіндері бізге күрделірек жасауға мүмкіндік береді. талғампаз дизайн Photoshop және InDesign сияқты графикалық редакторларға жүгінудің қажеті жоқ.

CSS пішіндерінің болашақ деңгейлері пішіндер ішіндегі мазмұнды безендіруге де назар аударады. Мысалы, бүгінде CSS көмегімен гауһар тас пішінін жасау жеткілікті оңай: элементті 45 градусқа бұраңыз, содан кейін оның ішіндегі мазмұнды бетке көлденең орналасатындай етіп аударыңыз. Бірақ гауһардың ішіндегі мазмұн тиісті пішінді алмайды және әрқашан тікбұрышты болып қалады. shape-inside қасиеті іске асырылған кезде біз төмендегі суретке ұқсас белгілеу жасай отырып, мазмұнды да ромб тәрізді етіп жасай аламыз.

Жақында CSS пішіндері мәтінді осы гауһар тастар сияқты ішіне орауға мүмкіндік береді, осылайша кесу немесе толып кетуді пайдаланудың орнына мәтіннің өзі контейнердің шеттеріне қатысты орналасады..

Бүгін Chrome Canary жүйесінде CSS пішіндерін пайдалану үшін эксперименттік мүмкіндіктерді қосу үшін құсбелгіні қою керек.

CSS пішіндерін жасау

Пішін сипаттарын пайдаланып элементке пішінді қолдануға болады. Пішін сипатын мән ретінде пішін функциясын бересіз. Пішін функциясы - элементке қолданғыңыз келетін пішінді көрсететін параметрлерді беретін жер.

Пішіндерді біреуін пайдаланып жасауға болады келесі функциялар:

Әрбір пішін нүктелер жиынымен анықталады. Кейбір функциялар нүктелерді параметр ретінде қабылдайды; басқалары офсеттік параметрлерді қабылдайды, бірақ олардың барлығы элементтегі пішіндерді нүктелер жиыны ретінде көрсетеді. Біз осы функциялардың әрқайсысының параметрлерін мысалдармен талдаймыз.

Сондай-ақ кескінді альфа арнасын алу арқылы кескіннен анықтауға болады. Кескін пішін сипатына берілгенде, шолғыш кескін-кескін-шекті мәніне негізделген кескінді кескіннен шығарады. Пішін альфа мәні көрсетілген шекті мәннен жоғары пикселдермен анықталады. Кескін CORS үйлесімді болуы керек. Егер берілген қандай да бір себептермен қолжетімді болмаса (мысалы, ол жоқ), онда ешқандай пішін қолданылмайды.

Төмендегі пішіндер жоғарыдағы функцияларды мәндер ретінде қабылдайды:

пішін сырты: мазмұнды пішіннің айналасына айналдырады (сыртында)

shape-inside: мазмұн пішіннің пішінін ішінен қабылдайды

Кескіннің айналасына сыртқы жиекті қосу үшін пішіннің сыртындағы сипатын пішін-маржамен бірге пайдалануға болады, ол мазмұнды пішіннен алыстатып, олардың арасында бос орын қалдырады. Сырттағы пішін пішін-маржа қасиетін алатыны сияқты, пішін-ішінде толтыру қосатын пішінді толтыру қасиеті болады.

Пішін қасиеттерін немесе функцияларын пайдаланып, пішін элементін жариялау тек CSS кодының бір жолымен орындалуы мүмкін:

Элемент (сыртқы пішін: шеңбер(); /* мазмұн */ элементіне берілген шеңберді айналдырады)

Элемент (сыртқы пішін: url(path/to/image-with-shape.png); )

Бірақ... Егер сіз CSS кодының осы жолын элементке қолдансаңыз, келесі шарттар орындалмайынша пішін оған қолданылмайды:

Элемент қалқымалы болуы керек. Болашақ CSS Shapes деңгейлері қалқымайтын элементтер үшін пішіндерді анықтауға мүмкіндік береді, бірақ бұл әлі мүмкін емес.

Элементтің өлшемі болуы керек. Элементке берілген биіктік пен ені координаттар жүйесін құру үшін пайдаланылады.

Жоғарыдағы функцияларда көргеніңіздей, пішіндер нүктелер жиынымен анықталады. Нүктелердің координаттары болғандықтан, элементтегі әрбір нүктенің қай жерде орналасуы керектігін білу үшін браузерге координаттар жүйесі қажет. Сонымен, жоғарыдағы мысал, егер ол келесі болса, жұмыс істейді:

Элемент ( қалтқы: сол жақ; биіктік: 10 ем; ені: 15 м; пішін-сыртқы: шеңбер(); )

Дегенмен, белгілі бір өлшемдерді элементке беру оның жауап беру қабілетіне әсер етпейді (бұл туралы кейінірек айтатын боламыз). Әрбір пішін координаталар жұбының көмегімен орналасқан нүктелер жиыны ретінде анықталғандықтан, нүктенің координаталарын өзгерту жасалған кескінге тікелей әсер етеді. Мысалы, келесі суретте polygon() функциясы арқылы жасауға болатын алтыбұрыш көрсетілген. Сурет алты нүктеден тұрады. Қызғылт сары нүктенің көлденең координатасын өзгерту соңғы пішінді өзгертеді, сонымен қатар пішін қолданылатын кез келген элементтің ішіндегі/сыртындағы мазмұнның орналасуына әсер етеді.

Егер элемент қалқымалы және оң жаққа тураланған болса және оған қолданылған пішін болса, polygon() функциясының ішіндегі қызғылт сары нүктенің координаттарының бірі өзгерген кезде оның сол жағындағы мазмұн өз орнын өзгертеді..

Анықтамалық блок Фигуралар

CSS пішіндері пішін сызылған анықтамалық жолақтың ішінде анықталады және жасалады. Элементтің биіктігі мен еніне қоса, элементтің қорап үлгісінің құрамдастары — жиек өрісі, мазмұн жолағы, толтыру жолағы және жиек жолағы — элементтің пішінін анықтауға арналған сілтемелер болып табылады.

Әдепкі бойынша, жиек өрісі сілтеме ретінде пайдаланылады, сондықтан сіз пішінді қолданып жатқан элементте төменгі жиек бұрыннан бар болса, кескін жиекте емес, жиектің шетінде аяқталады. Кейбір басқа қорап үлгісі мәндерін пайдаланғыңыз келсе, оларды пішін сипатына өтетін пішін функциясымен бірге көрсетуге болады:

пішін сырты: шеңбер (50% 50%-да 250 пиксель) толтырғыш қорап;

Бұл ережедегі padding-box кілт сөзі пішіннің қолданылуын және толтыру жолағы шектеуін анықтайды. circle() функциясы шеңберді, оның өлшемдерін және элементке қатысты орналасуын анықтайды.

Функциялары бар пішіндерді анықтау

Біз ақпараттық мәтінді пайдаланушы профилі немесе куәлік сияқты пайдаланушы аватар кескінінің айналасына айналдырудан бастаймыз.

CSS пішіндерін пайдалану арқылы пайдаланушы кескінінің айналасындағы мәтін пішінді тікбұрышты ұстаудың орнына айналады..

Келесі белгілеу арқылы профиль суретіне шеңбер пішінін қолдану үшін circle() функциясын қолданамыз:

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

Қателерді жою кезінде қате пайда болуы мүмкін емес деп есептеңіз! Quo nam quasi soluta reprehenderit laudantium optio ipsam ducimus consequatur enim fuga quibusdam mollitia nesciunt modi.

Сіз: «Неге біз кескінді дөңгелектеу үшін шекара радиусын қолдана алмаймыз?» деп сұрайтын шығарсыз. Жауап: border-radius қасиеті мазмұнды ол қолданылатын элементтің ішінде және сыртында орналастыруға әсер етпейді. Ол тек элементтің жиектеріне немесе фонына әсер етеді. Фон дөңгеленген бұрыштарда кесілген, барлығы осы. Элемент ішіндегі мазмұн тікбұрышты болып қалады, ал элементтің сыртындағы мазмұн элемент тікбұрышты болып қалатындай әрекет етеді.

Кескінді дөңгелек ету үшін border-radius қасиетін қолданамыз – беттегі суреттерді немесе басқа элементтерді дөңгелектеу үшін мына әрекетті орындаймыз:

CSS пішіндерінсіз мәтін кескінді шаршы түрінде көреді және дөңгелек пішіннің орнына шаршы пішінді айналады.

CSS пішіндерін қолдамайтын шолғышта дөңгелек кескіннің айналасындағы мазмұн дөңгелек емес сияқты орналасады. Бұл ескі браузерлерде осылай көрінеді. Белгілі бір пішіннің айналасындағы мазмұн ағынын өзгерту үшін пішіннің сипаттарын пайдаланыңыз.

img ( қалқымалы: сол жақ; ені: 150 пиксель; биіктік: 150 пиксель; жиек радиусы: 50%; пішіннің сырты: шеңбер(); пішін-шеті: 15px; )

Бұл кодтың көмегімен мәтін суретке қолданылған дөңгелек пішінді «көре» және бірінші скриншотта көрсетілгендей оны айналдыра алады. (Нәтижені қарауға болады.) Пішіндерді қолдамайтын браузерлерде бұл екінші сурет сияқты болады.

Сіз таза шеңбер() функциясын пайдалана аласыз немесе оған параметрлерді бере аласыз. Міне, оның ресми синтаксисі:

шеңбер() = шеңбер([ ]? ? [ сағ< position > ] ? )

Сұрақ белгілері бұл параметрлердің міндетті емес екенін және оларды өткізіп жіберуге болатынын көрсетеді. Сіз өткізіп жіберген параметрлер әдепкі мәндерді қабылдайды. Сіз circle() функциясын сол күйінде пайдаланған кезде, позицияны тікелей көрсетудің орнына, әдепкі бойынша, шеңбердің ортасы оны қолданатын элементтің ортасында болады.

Шеңбердің радиусын кез келген ұзындық бірлігін (px, em, pt, т.б.) пайдаланып орнатуға болады. Сондай-ақ радиусты ең жақын жағы немесе ең алыс жағы арқылы параметрлермен орнатуға болады, бірақ ең жақын жағы әдепкі болып табылады, бұл шолғыш элементтің ортасынан ең жақын жағына дейінгі қашықтықты радиус ретінде пайдаланады, ең алыс жағы орталықтан ең алыс жағына дейінгі қашықтықты пайдаланады.

пішін-сыртқы: шеңбер (ең алыс жағы 25% 25%); /* радиусы ең ұзын жағының жартысы болатын шеңберді анықтайды, элементтің координат жүйесінде 25% 25% координаттарда орналасқан */ shape-inside: circle(250px 500px 300px); /* центрі көлденеңінен 500 пиксель және тігінен 300 пиксель, радиусы 250 пиксель болатын шеңберді анықтайды */

Ellipse() функциясы шеңбер() сияқты бірдей мәндер жиынымен жұмыс істейді, тек радиус параметрінің орнына ол екі радиусты алады: бір радиус x осінде, екіншісі у осінде.

эллипс() = эллипс([ (2)]? ? [ сағ< position > ] ? )

inset() функциясы шеңбермен немесе эллипспен тікелей байланысты емес, ол элемент ішінде тікбұрышты пішіндерді жасау үшін қолданылады. Элементтер тікбұрышты болғандықтан, тіктөртбұрыштар жасау үшін бізге қажет емес. Оның орнына, inset() бізге дөңгелектелген тіктөртбұрыштарды жасауға көмектеседі, осылайша мазмұн дөңгелектелген бұрыштарды айналдырады.

inset() функциясы элемент ішіндегі жолақты орналастыратын сілтеме жолағының жиектеріне қатысты ығысуды көрсететін бір-төрт ығысу параметрін қабылдайды. Дөңгелектелген бұрыштар төрт мәннің бірін пайдалана отырып, round кілт сөзімен бірге шекара радиусы сияқты көрсетіледі.

inset() = кірістіру(offset(1,4)?)

Келесі код қалқымалы элементте дөңгелектенген тіктөртбұрышты жасайды.

Элемент ( қалтқы: сол жақ; ені: 250 пиксель; биіктігі: 150 пиксель; пішіннің сырты: кірістірілген (0px дөңгелек 100px) жиек өрісі; )

Соңғы Shapes функциясы нүктелердің кез келген санын пайдалана отырып, күрделірек анық емес пішіндерді анықтайтын polygon() болып табылады. Функция координаттар жұптарының жиынын қабылдайды, мұнда әрбір жұп нүктенің орнын анықтайды.

Келесі мысалда қалқымалы кескін экранның толық биіктігін алып, көру порты бірліктерін пайдаланып, оң жақ жиекте орналастырылған. Біз сол жақтағы мәтіннің кескіннің ішіндегі құм сағатының айналасына оралғанын қалаймыз және кескін үшін теңшелетін пішінді анықтау үшін polygon() функциясын қолданамыз.

Жоғарыдағы суреттің CSS коды келесідей:

img.right ( қалқымалы: оң жақта; биіктік: 100 всағ; ені: кальк (100 всағ + 100 всағ/4); сыртқы пішін: көпбұрыш (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60) %, 45% 40%); )

Пішінді ұзындық бірліктерімен немесе мендікі сияқты пайызбен анықтайтын нүктелердің координаталарын орнатуға болады. Бұл код қажетті нәтиже береді, бірақ көріп отырғаныңыздай, пішін функциясы берілген пішіннен тыс кескіннің қалған бөліктеріне әсер етпейді. Мәселе мынада, пішін функциясын элементке қолдану - ол кескін немесе контейнер немесе басқа нәрсе болсын - мазмұнның орау аймағынан басқа ештеңеге әсер етпейді. Фон, жиектер және қалғанының бәрі өзгеріссіз қалады.

Құрылған көпбұрышты визуалды түрде көрсету үшін кескіннің пішіннен тыс бөліктерін «қиып алу» керек. Бұл бізге CSS маскалау модулінің спецификациясындағы клип-жол сипаты көмектеседі.

Клип-жол сипаты пішін сипаты сияқты пішін функциялары мен мәндерін қабылдайды. Егер біз кескіннің сыртындағы сипаты үшін пайдаланған көпбұрышты пішінді clip-path қасиетіне өткізсек, ол кескіннің пішіннен тыс бөлігін қиып алады.

img.right ( қалқымалы: оң жақта; биіктік: 100 всағ; ені: кальк (100 всағ + 100 всағ/4); сыртқы пішін: көпбұрыш (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60) %, 45% 40%); /* кескінді кескіннің контуры бойымен қию */ клип жолы: көпбұрыш (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40% );)

Нәтиже келесідей көрінеді:

Қазіргі уақытта клип-жол сипатына префикстермен бірге қолдау көрсетіледі, яғни. ол Chrome жүйесінде қосылған --webkit- префиксі арқылы жұмыс істейді. Сіз демонстрацияны көре аласыз.

Клип-жол сипаты кескін сипатының тамаша серіктесі болып табылады, өйткені ол жасалған фигураларды визуализациялауға және пішіннен тыс бөліктерді қиюға көмектеседі, сондықтан оларды бірге көп пайдалануыңыз мүмкін.

polygon() функциясы қосымша функцияны да қабылдайды кілт сөзнөл емес немесе жұп болуы мүмкін толтыру үшін. Ол полигон ішіндегі қиылысатын аймақтардың әрекетін анықтайды. Мәліметтер алу үшін SVG толтыру ережесі сипатын қараңыз.

Кескінмен пішінді анықтау

Кескінді пайдаланып кескінді анықтау үшін кескіннің альфа арнасы болуы керек, одан браузер кескінді шығарып алады.

Пішін альфа мәні белгілі бір шекті мәннен жоғары болатын пикселдермен анықталады. Шекті үшін әдепкі мән o.o (толығымен мөлдір) болып табылады немесе оны тікелей пішін-бейне-шектеу сипатымен орнатуға болады. Осылайша, кез келген мөлдір емес пикселді кескінмен анықталған фигураның бөлігі ретінде пайдалануға болады.

CSS пішіндерінің болашақ қабаты альфа арнасының орнына кескін жарықтығы деректерін пайдалануға ауысуға мүмкіндік береді. Бұл орын алса, кескін-кескін шегі ажыратқыш күйіне байланысты жарықтық немесе альфа арнасы үшін шекті қамту үшін кеңейтіледі.

Элементтің пішінін анықтау және мәтінді оның айналасына айналдыру үшін келесі суретті қолданамыз:

Әрине, егер сіз элементке фон қолдансаңыз, фон берілген пішіннің сыртында кесілуі керек. Маска модуліндегі mask-image қасиеті (тиісті префикстермен) бұған көмектесе алады, себебі клип-жол сипаты мән ретінде альфа арна мәнін қабылдамайды. Нәтиже келесідей көрінеді:

Күрделі пішіндер жасасаңыз, суретті пайдаланып пішінді анықтау ыңғайлы болуы мүмкін. Бұл нүктелерді қолмен орнатудың орнына Photoshop бағдарламасында кескіннің альфа-арнасын пайдалануға мүмкіндік береді.

Сондай-ақ, элементте көптеген қалқымалар немесе ерекшеліктер болған кезде пішін функциясының орнына кескінді пайдалану ыңғайлы болады - себебі қосулы. осы сәтбір элементке бірнеше пішінді жариялаудың ешқандай жолы жоқ. Бірақ кескінде бірнеше аймақ болса, шолғыш сол аймақтарды шығарып, оларды пайдаланады.

Жауапты дизайндағы CSS пішіндері

CSS пішіндері жауап беретін дизайн үшін жұмыс істей ала ма? Сыртқы пішінге арналған ағымдағы спецификация осы нүктені қамтиды, себебі ол элементтің өлшемдерін пайыздармен немесе ұзындық бірліктерімен көрсетуге мүмкіндік береді және пішінді анықтайтын нүктелерді (пішін функциясының параметрлері) пайызбен де көрсетуге болады. Бұл сыртқы пішіні берілген элемент пайыздық өлшемдері бар кез келген қалқымалы элемент сияқты толығымен жауап бере алатынын білдіреді.

shape-inside сипаты әлі жауап бермейді, бірақ ол 2-деңгей модуліне жылжытылғандықтан. Оның көптеген қазіргі шектеулері келесі деңгейде жойылады.

Пішін құралдары

Функцияларды пайдаланып күрделі кескіндерді жасау, әсіресе polygon() арқылы көптеген нүктелері мен координаттары бар кескінді жасап жатсаңыз, жалықтыратын тапсырма болуы мүмкін. Бақытымызға орай, Adobe Web Platform командасы бұл процесті айтарлықтай жеңілдету үшін интерактивті құралдарды шығарумен айналысуда. Bear Travis көпбұрышты пішіндерді көрнекі түрде жасауға мүмкіндік беретін Shape Tools жинағын жасады. Құрал пішін функциясын жасайды. Бұл пайдалы болуы мүмкін, бірақ белгілі бір кескінге негізделген пішінді жасағыңыз келсе, оның шектеулері бар, өйткені құрал мұндай опцияны қамтамасыз етпейді.

Неғұрлым жетілдірілген және интерактивті құралды Adobe веб-платформасының командасы әзірледі. Құрал жақында тегін жақшалар редакторының кеңейтімі ретінде шығарылды. Ол кескіндерді тікелей шолғышта көрсетуге және өңдеуге мүмкіндік береді және беттегі пішінді өзгерткен кезде мәнерлер кестесіндегі пішін мәндерін жаңартатын онлайн алдын ала қарау мүмкіндігіне ие. Бұл бірден көрнекі көрініс береді кері байланыспішіндердің беттегі басқа элементтермен қалай әрекеттесетінін көруге мүмкіндік беретін өзгертулеріңіз.

Көпбұрышты пішінді жақшадағы алдын ала қарау режимін пайдаланып тікелей шолғышта өңдеу. Разван Калиман түсірген экран.

Бұл құрал таптырмас құрал болады, өйткені ол пішіндерді жасауды, өңдеуді және жөндеуді жеңілдетеді. Разван Калиман, ол жақшалар пішіні редакторын қалай көтеру және оны пайдалануды бастау жолын түсіндіреді.

Болашақ: CSS ерекшеліктер

CSS пішіндерінің спецификациясы CSS пішіндері мен ерекшеліктеріне арналған спецификация болды, бірақ ол бөлінген. CSS пішіні пішіннің ішкі және сыртқы пішінінің сипаттарын анықтаса, CSS Ерекшеліктері мазмұнды абсолютті орналасуы барлар сияқты өзгермейтін элементтердің айналасына орау үшін мәжбүрлейтін сипаттарды анықтайды. Олар төмендегі суретте көрсетілгендей мазмұнның әртүрлі бағыттар бойынша тұтас пішінді айналып өтуіне мүмкіндік береді.

Болашақта CSS Ерекшеліктері журналдың бірінші бетінде көрсетілгендей, мазмұнды ойық сияқты пішінге орап алуға мүмкіндік береді. Кетік те дөңгелек болуы мүмкін және мәтін оның айналасына дәл солай оралады..

Жаңа фигура деңгейі

Ағымдағы CSS Shapes спецификациясы бірінші қадам ғана. Жақында жаңа мүмкіндіктер бізге мазмұнды жасау мен ағынын бақылауға мүмкіндік береді, сондықтан бізге макеттерді кодтың бірнеше жолы арқылы тірі дизайнға айналдыру оңайырақ болады. Бүгінгі күні спецификациялық редакторлар сыртқы пішінді аяқтауға бағытталған және 2014 жылдың соңына қарай CSS Shapes үшін көбірек шолғыш қолдауын көре аласыз.

Пішіндерді қолдау көрсетілмейтін браузерлерде қолайлы ауыстыру бар екенін біле отырып, прогрессивті жақсарту стратегиясының бөлігі ретінде бүгін пайдалануға болады. Мен жақында оларды өз сайтымда қолдана бастадым және ауыстыру өте қолайлы болып көрінеді. Неғұрлым күрделі дизайндар үшін браузердің қолдауын тексеру үшін сценарийді пайдалануға және қолдау көрсетілмесе, кез келген ауыстыруды қамтамасыз етуге болады. Сондай-ақ, сыртқы пішін сипатына қолдау көрсетілетінін тексеру үшін осы сценариймен Modernizr сынақтарын пайдалануға болады немесе осы сынақты қамтитын жеке құрастыруды жүктей аласыз.

CSS пішіндері басып шығару мен веб-дизайн арасында тағы бір көпір жасауға мүмкіндік береді. Бұл мақаладағы мысалдар қарапайым, бірақ олар күрделілігі бойынша журнал немесе постерге ұқсас дизайнды экранда қайта жасай аласыз ба деп алаңдамай жасауға негіз береді. Нені зерттеп жатсаңыз да – тікбұрышты емес макеттерден пішін анимациясына дейін – қазір эксперимент жасайтын уақыт.

Беттің орналасуы күрделене түскен сайын әзірлеушілерге рұқсат қажет Көбірекдизайнды өмірге келтіру үшін өлшем бірліктері. Таныс пайыздарға, em және rem және пикселдерге қосымша, көбірек қамтамасыз ететін vw және vh және қатысты vmin және vmax жаңа бірліктері бар. күшті жолдарқұру адаптивті дизайн, бұл жиі @media тоқтау нүктелерін пайдалануды жоюға көмектеседі.

Проценттерді қолдану шеңберінен шығу

Дәстүрлі CSS бірліктері веб-дизайнда келесі мәселелерді тудырады:

• Пайыздық бірлік әрқашан күткендей жұмыс істемейді. Элементтердің өлшемін белгілеу кезінде әзірлеушілер шеттерді есте ұстауы керек. Корпус элементінің биіктігін орнату үшін пайыздық өлшем бірлігін пайдаланбаңыз. Шрифт өлшемі: 50% жазбасы мәтін өлшемі мен оны қамтитын элемент өлшемі арасындағы қатынасты орнатудың орнына мәтінді стандартты өлшемінің жартысына орнатады.
• Браузер терезесінің әртүрлі өлшемдері үшін тамаша пішінді пішіндерді жасау мүмкін емес дерлік. Керемет шаршы және бір мезгілде жауап беретін элементке жету өте қиын.

vw және vh қондырғылары барлық осы мәселелерді шешеді.

Идеал пропорцияларды сақтау

vw және vh бірліктері арқылы веб-беттерде тамаша пішіндерді жасау өте оңай. Бұл бірліктерді барлық дерлік CSS сипаттары үшін өлшем мәндерін орнату үшін пайдалануға болады. Сондықтан, егер сіз браузер терезесінің кез келген өлшемінде оның енінің 20% алатын және бір уақытта шаршы болып қалатын элементті жасағыңыз келсе, ені мен биіктігі сипаттарына бірдей мәндерді орнатуыңыз керек, vw бірлігін пайдалану:

Div.twentysquare ( фон : # 999 ; ені: 20vw; биіктігі: 20vw; )

Төмендегі осы мысалдың демонстрациясын қарап шығыңыз, сілтемені орындаңыз және кескіндердің өлшемін өзгерту үшін көру терезесінің өлшемін өзгертіп көріңіз.

Сол әдісті пайдаланып, браузер терезесінің кез келген өлшемі үшін биіктігі енінен екі есе үлкен тіктөртбұрышты оңай жасауға болады:

Div.onetworect (ені: 20vw; биіктігі: 40vw;)

Баннерді идеалды арақатынасқа орнату келесі CSS кодымен оңай:

Div.goldenrect ( ені : 100 в ; биіктігі : 61 ,8 в ; фон : қызыл ; )

Бейімделетін блоктағы мәтінді оңтайлы масштабтау үшін жолдарға бөлу арқылы оған берілген барлық кеңістікті алу үшін сізге қаріп өлшемін vw бірліктерінде орнату қажет.

Аударма - үстел

Мәселе

Кескіндерді гауһар тас пішініне қию - бұл жалпы визуалды дизайн әдісі, бірақ оны CSS-те енгізу оңай емес. Шын мәнінде, соңғы уақытқа дейін бұл мүмкін емес еді.

Сондықтан, өз идеяларын жүзеге асыру үшін дизайнерлер алдымен қажетті кескіндерді қиюы керек болды графикалық редактор. Эффектіні қолданудың бұл жолы веб-сайтты ұстаудың үлкен күрделілігін және болашақта біреу кескіндердің стилін өзгерткісі келсе, шатасуға кепілдік береді деп айтудың қажеті жоқ. Әрине, бүгін бізде жақсырақ жол болуы керек. Шын мәнінде, мұндай екі жол бар!

Трансформация шешімі

Негізгі идея бірінші шешіммен бірдей алдыңғы құпия(жоғарыдағы «Параллелограмм» құпиясын қараңыз) - біз суретімізді орауымыз керек

, содан кейін оған қарама-қарсы түрлендіруді қолданыңыз айналдыру()
HTML

.сурет(
ені: 400px
түрлендіру: айналдыру (45 градус);
толып кету: жасырын;
}
.picture > img(
максималды ені: 100%
түрлендіру: айналдыру (-45 градус);
}
Дегенмен, суретте көріп отырғанымыздай, біз талап етілетін стилизацияға қол жеткізе алмадық. Әрине, егер сіз кескінді сегізбұрышты пішінге қиюды жоспарласаңыз, аяқталды деп айтып, басқа нәрсеге көшуге болады. Бірақ суретті гауһар тас түрінде қию үшін әлі де терлеу керек.

Қажетті нәтижеге жету үшін rotate() функциясының қарама-қарсы түрлендірулері жеткіліксіз (.сурет деп аталатын div нүктелі контурмен көрсетілген)
Негізгі мәселе максималды енде жатыр: 100% декларация. 100% біздің контейнердің жағын білдіреді.сурет . Дегенмен, біз түпкілікті кескіннің ені оның жағы емес, түпнұсқаның диагоналіне тең болғанын қалаймыз. Сіз ойладыңыз, бізге тағы да Пифагор теоремасының көмегі қажет (егер сіз оны жадыңызда жаңарту қажет болса, онда түсініктемені құпиядан табасыз). Теорема бойынша шаршының диагоналы оның қабырғасының еселеріне тең .

Сондықтан, максималды ен мәнін 2 × 100% ≈ 141,4213562% немесе дөңгелектеу, 142% етіп орнату мағынасы бар, өйткені біз кескіннің қандай да бір жолмен кішірейгенін қаламаймыз (және егер ол сәл үлкенірек болып шықса). , содан кейін бәрі жақсы, өйткені біз оны бәрібір кесіп тастадық).

Шындығында, кескінді scale() түрлендіруімен масштабтау одан да жақсы және мұның екі себебі бар: CSS түрлендірулеріне қолдау көрсетілмейтін жағдайда кескін өлшемін 100% деңгейінде сақтағымыз келеді;
Кескін scale() түрлендіруі арқылы үлкейтілгенде, ол орталықтан масштабталады (түрлендірудің басқа мәні көрсетілмесе). Егер сіз оны width қасиетінің мәнін өзгерту арқылы арттырсаңыз, онда ол жоғарғы сол жақ бұрыштан масштабталады және оны жылжыту үшін бізге теріс маржа мәндерін пайдалану керек. Барлығын біріктіре отырып, біз кодтың келесі соңғы нұсқасын аламыз:
.сурет(
ені: 400px
түрлендіру: айналдыру (45 градус);
толып кету: жасырын;
}
.picture > img(
максималды ені: 100%
түрлендіру: айналдыру(-45deg) шкаласы(1,42);
}
Суретте көріп отырғаныңыздай, бұл бізге қажетті нәтижені береді.

ӨЗІҢІЗДІ сынап көріңіз!
http://play.csssecrets.io/diamond-images

Кесу жолының шешімі

Алдыңғы шешім жұмыс істейді, бірақ бұл табиғи түрде лас трюк. Ол талап етеді қосымша элемент HTML, бұл беймаза, түсініксіз және сынғыш шешім екенін білдіреді: егер квадрат емес кескіндермен жұмыс істеуге тура келсе, нәтиже нашар болады.

Шындығында, көп Ең жақсы жолқалаған нәтижеге қол жеткізу. Негізгі идея - мүлікті пайдалану клип жолы- SVG-ден алынған тағы бір мүмкіндік. Бұл сипатты енді HTML мазмұнына да (кем дегенде қолдайтын браузерлерде) және жақсы және оқылатын синтаксиспен қолдануға болады, бұл SVG эквивалентінен айырмашылығы, ол адамдарды есінен шығаратыны белгілі.

Оның бір ғана кемшілігі бар (осы жазу кезінде) - шектеулі шолғышты қолдау. Дегенмен, бұл шешім оңайлатылған рендерингке (кесусіз) қайта оралады, сондықтан бұл қарастыруға лайықты үміткер. Суретті өңдеуге арналған қолданбалардың арқасында сіз кесу жолдарымен бұрыннан таныс болуыңыз мүмкін. Adobe Photoshop. Қиып алу жолдары элементті қалаған кез келген пішінге қиюға мүмкіндік береді. Бұл жағдайда біз көпбұрыш() пішінін қолданамыз.

Біз ромбты анықтаймыз, бірақ жалпы бұл пішін кез келген көпбұрышты үтірмен бөлінген нүктелер тізбегі арқылы анықтауға мүмкіндік береді. Сіз тіпті пайыздарды пайдалана аласыз - соңғы мәндер элементтің жалпы өлшемдеріне қатысты есептеледі. Код өте қарапайым:
клип-жол: көпбұрыш(50% 0, 100% 50%, 50% 100%, 0 50%);

Сенсеңіз де, сенбесеңіз де, бірақ солай! Бірақ екі HTML элементінің және түсініксіз CSS кодының сегіз жолының орнына біз бір қарапайым жол арқылы мақсатымызға жеттік. Бірақ клип жолының керемет мүмкіндіктері мұнымен шектелмейді. Бұл сипат тіпті анимацияны қолдайды - егер біз бірдей нүктелер санымен екі бірдей пішін функциялары (біздің жағдайда полигон()) арасындағы өтуді жандандырамыз. Осылайша, меңзердегі толық кескінді тегіс кеңейткіміз келсе, мұны келесі жолмен жасауға болады:
img(
клип-жол: көпбұрыш(50% 0, 100% 50%,
50% 100%, 0 50%);
өту: 1с клип-жолы;
}
сурет: меңзерді апару (
клип-жол: көпбұрыш(0 0, 100% 0,
100% 100%, 0 100%);
}
Сондай-ақ, бұл әдіс квадрат емес кескіндерге жақсы бейімделеді, Ah, қазіргі заманғы CSS қуаныштары ...
ӨЗІҢІЗДІ сынап көріңіз!

Бәріңе сәлем. Бүгін біз өте ерекше тақырыпты қозғаймыз, атап айтқанда веб-дизайнның болашағы, бұл CSS пішіндері.

Өздеріңіз білетіндей, бұл қазір өте сәнді, бірақ ол негізінен тіктөртбұрыштардан тұрады, бұл өз кезегінде дизайнерлердің көкжиегін айтарлықтай шектейді. Содан кейін бейімделу бар .. Бұл шығармашылықты шектейді. Бірақ мұнда бір үлкен плюс бар - бұл мәтінді тіктөртбұрыштың айналасына орау, бұл бұрынғыдан оңай, бірақ мәтінді дөңгелек немесе біркелкі емес пішіндерге қалай орау керек, бұл қиынырақ. Өйткені суреттерді дөңгелектеу мүмкін емес.

Дәл осы жағдайда сандар бізге көмекке келеді. Танымал W3C CSS сайты пішіндер туралы алғашқы құжаттаманы жариялады. Міне, бұл жазба ағылшын тіліндегі CSS пішіндері модулінің 1-деңгейі. Бұл модуль жақында 20 маусымда шығарылды. Әзірге бұл тіктөртбұрыш, үшбұрыш, эллипс, шеңбер және көпбұрыш сияқты пішіндерді қамтитын бета нұсқасы.

Енді мысал арқылы CSS пішіндерінің артықшылығы неде екенін егжей-тегжейлі қарастырайық.

Бастау үшін қарапайымды алайық HTML белгілеубұл үшін рахмет http://www.webdesignerdepot.com:

Бұл мысал мәтін