Часта неабходна ажывіць элементы старонкі, не звяртаючыся да працаёмкім варыянтам выкарыстання JavaScript. Правіла transform CSS - зручны інструмент для надання складанай дынамікі, на стварэнне якой не спатрэбіцца шмат высілкаў.
Усе асноўныя дзеянні па змене элемента: становішча, памеры, павароты, скрыўленне і кручэнне — даступныя ў прымяненні да асноўных элементаў HTML-вёрсткі, а ў камбінацыі адзін з адным дазваляюць ствараць складаную дынаміку.
Правіла transform CSS прызначана для выкарыстання простых трансфармацый элементаў старонкі і выкарыстоўваецца вельмі проста:
У прыведзеным ніжэй прыкладзе пералічаныя асноўныя функцыі, якія можна выкарыстоўваць для пераўтварэння элементаў, паказана іх дзеянне на прыкладах.
Простыя прымянення трансфармацый звязаныя з кнопкамі і элементамі рэалізацыі дыялогу з наведвальнікам. Практычна выкарыстанне дынамічных эфектаў для суправаджэння перасоўванняў мышкі або прыцягненне ўвагі да акцый па паслугах або таварах, прапанаваных уладальнікам рэсурсу.
Трансфармацыя запатрабаваная ў меню, калі наведвальнік яшчэ не выбраў патрэбны кірунак дзеянняў, але мышка ўжо на элеменце: пункце меню. У гэтым выпадку што-то можа трансфармавацца: павялічыцца ў памеры, нахіліцца, павярнуцца ці інакш «даць зразумець», што старонка «актыўная» і гатовая выканаць дзеянне.
Зручна прымяненне правілы transform CSS для стварэння падказак і каментароў да элементаў старонкі. Наведвальнік не заўсёды арыентуецца на старонцы, асабліва калі ён прыйшоў упершыню. Па традыцыі, кожны распрацоўшчык сайта лічыць, што дызайн вэб-рэсурсу і дыялог з наведвальнікам - гэта яго сфера кампетэнцыі.
Больш:
Lenovo v580c: падрабязны агляд
Сёння мы вырашылі напісаць пра ноўтбуку Lenovo v580c. Агляд будзе падрабязным, так як гэты партатыўны ПК серыі IdeaPad мае высокую папулярнасць, але не многія ведаюць, чым жа прыцягвае гэта прылада пакупнікоў. Мадэль з'яўляецца хуткай і змяшчае ў саб...
Брандмаўэр - што гэта? Стандартны абаронца ПК
Брандмаўэр – што гэта такое? Карысная функцыя ў аперацыйнай сістэме або малаэфектыўныя сродак абароны? Перш чым адказаць на гэтае пытанне, нам трэба высветліць, што робіць кампутар і як правільна яго наладзіць.Агульныя звесткіДля паспяховай пра...
"Аблівіян": праходжанне гульні. Кіраўніцтва і парады па праходжанні гульні "Аблівіян"
The Elder Scrolls IV: Oblivion — ролевая гульня ад кампаніі Bethesda Games Studios. Адразу ж пасля рэлізу у 2006 годзе яна стала вельмі папулярнай. Сюжэт заснаваны на супрацьстаянні галоўнага героя і культу Прынца Разбурэння, які плануе адкрыць...
З пункту гледжання наведвальніка, яму вырашаць, які функцыянал ён чакае ад сайта, на які прыйшоў, якім павінен быць дызайн і дыялог. Калі што-то тут не падабаецца, ён знойдзе сабе тое, што падабаецца на іншым вэб-рэсурсе.
Анімацыя transform CSS дапускаецца праз некалькі функцый у адным правіле. Можна задаваць станоўчыя і адмоўныя значэння трансфармацый, важна, каб яны мелі сэнс.
У прыкладзе паказана, як мяняе свой аблічча карцінка пры навядзенні мышкі, калі правіла трансфармацыі ўключае ў сябе:
Патройны эфект спланаваць лёгка, але часта без доўгага падбору значэнняў не абысціся. Адна справа, калі адным правілам можна дакладна вызначыць патрэбныя змены: яны вядомыя. Іншае - калі даводзіцца прыдумляць дынаміку паводле сэнсу элемента.
У некаторых выпадках лепш сумясціць, напрыклад: два дзіва ўкладзеныя сябар у сябра. Вонкавым прызначанае адно правіла трансфармацыі, ўнутранага - іншае. Калі агульная логіка патрэбных змяненняў будзе вызначана, то можна яе перанесці на правіла аднаго элемента.
У прыкладзе, выніковае рашэнне нагадвае пераўтварэнне ў трохмернай прасторы, але гэта не мае адносіны да правіл CSS 3D transform. Ўлік восі Z і маніпуляцыі з зваротнай бокам элемента - гэта асобная група уласцівасцяў і правілаў.
Аднак, якая б ні была графічная ідэя, усе трансфармацыі вырабляюцца на плоскасці, эфекты ўтвараюцца за кошт візуальна ўспрымання і карэктнага змены формаў элементаў. Змест элементаў і малюнак ліній маюць значэнне.
Па агульнаму правілу CSS, transform style - гэта статычная логіка пераўтварэнняў элементаў, алгарытм якой не можа быць зменены пасля таго, як набор правілаў сфармуляваны.
Гэта не выходзіць за рамкі канцэпцыі каскадных табліц стыляў, але ў кожным канкрэтным ужыванні даводзіцца ўлічваць той фактар, што дынаміка тут не мае ні падзей, ні ўмоў, ні магчымасці маніпуляваць самім працэсам.
Распрацоўшчык можа толькі сфармуляваць жаданае правіла transform, і CSS выканае яго ў дакладнасці. Змяніць потым або ў працэсе функцыянавання вэб-рэсурсу будзе нічога нельга.
Больш за таго, маюць істотнае значэнне памеры блока, яго змест, форма і колер ўнутраных элементаў. Выкарыстоўваючы правілы празрыстасці (opacity), можна атрымліваць складаныя малюнкі, а накладваючы іх адзін на аднаго - складаныя эфекты.
Істотным акалічнасцю з'яўляецца некіравальныя ўсіх трансфармацый. Ўсе правілы выконваюцца пэўнымі алгарытмамі, воспринимающими толькі тыя значэнні, якія указаны ў параметрах функцый пераўтварэнні. Правільнае спалучэнне функцый і іх значэнняў вызначае выніковы алгарытм трансфармацыі.
Варта ўлічваць, што змяненне зместу элемента, асабліва ўласцівасці background-image, можа прывесці да «вздрагиванию» - парушэння патрэбнай логікі трансфармацыі за кошт тэхнічных асаблівасцяў рэалізацыі (браўзэр, пратакол, сервер, іншае). Мае сэнс хаваць элемент перад змяненнем яго зместу: паказваць і працягваць, калі працэс абнаўлення ўжо завершаны.
Калі ад неабходнасці поўнага абнаўлення старонкі распрацоўшчыкі сышлі досыць даўно і тэхналогіі тыпу AJAX сталі нормай для адлюстравання і абнаўлення элементаў старонкі, то цалкам чаканай з'яўляецца дынаміказмяненняў табліц стыляў у працэсе працы вэб-рэсурсу.
Традыцыйны падыход, калі старонкі фармаваліся распрацоўшчыкам і сайт здаваўся ў эксплуатацыю як ёсць - ужо несучасна. Чаму б не распрацоўваць ўвесь камплект файлаў сайта, як вынік дынамікі дыялогу з наведвальнікам: «на лета».
Прымяненне JavaScript + AJAX - гэта дынаміка элемента, але выкарыстанне сервернага мовы для змены файла CSS - цалкам разумная дадатковая магчымасць. Наведвальнікі адрозніваюцца не толькі па тэмпераменце працы, але і па той функцыянальнасці, якую яны чакаюць і здольнасці яе адлюстравання.
Прапаноўваючы неабходны функцыянал ў фармаце адаптуецца дынамікі (змяняючы правілы CSS на лета), можна дасягнуць вялікіх поспехаў і змяніць рэйтынг вэб-рэсурсу ў лепшы бок.
Article in other languages:
AR: https://tostpost.com/ar/computers/13026-css.html
DE: https://tostpost.com/de/computer/23330-die-praxis-der-verwendung-von-regeln-transform-css.html
En: https://tostpost.com/computers/12353-the-practice-of-using-transform-css-rules.html
HI: https://tostpost.com/hi/computers/13046-the-practice-of-using-transform-css-rules.html
JA: https://tostpost.com/ja/computers/13048-css.html
KK: https://tostpost.com/kk/komp-yuterler/23313-praktika-paydalanu-erezhes-transform-css.html
PL: https://tostpost.com/pl/komputery/23269-praktyka-stosowania-zasady-transform-css.html
PT: https://tostpost.com/pt/computadores/23270-a-pr-tica-de-usar-as-regras-de-css-transform.html
TR: https://tostpost.com/tr/bilgisayarlar/23318-pratik-kullan-m-kurallar-css-transform.html
UK: https://tostpost.com/uk/komp-yuteri/23299-praktika-vikoristannya-pravila-transform-css.html
Alin Trodden - аўтар артыкула, рэдактар
"Прывітанне, Я Алін Тродден. Я пішу тэксты, чытаю кнігі і шукаю ўражанні. І я нядрэнна ўмею распавядаць вам пра гэта. Я заўсёды рады ўдзельнічаць у цікавых праектах."
Навіны
Што рабіць, калі адмоўлена ў доступе да скачанному файла?
На дадзены момант торэнт-кліенты лічацца ледзь ці не абавязковым дадаткам да браўзэра. Спампоўваць дробныя файлы апошнія сее-як навучыліся, але калі справа даходзіць да файла вагой у пару гігабайт, тут ужо без торэнта не абысціся....
Праходжанне "Ведзьмака", адной з лепшых RPG сучаснасці
Напэўна, многія пагодзяцца з выказваннем аб тым, што цікавыя гульні праходзяцца на адным дыханні за пару дзён ці тыдзень, у залежнасці ад яе працягласці. Менавіта так можна апісаць праходжанне "Ведзьмака", а дакладней, яго другой ...
Майнинг - што гэта? Майнинг на працэсары. Заробак на майнинге
Развіццё чалавечай цывілізацыі немагчыма ўявіць без грошай. Без гэтага універсальнага меркі кошту тавараў і паслуг. У якасці грошай на кожным этапе чалавечага развіцця выкарыстоўваліся розныя прадметы, такія як зброя, камяні, прад...
МФУ Samsung SCX-3405W: характарыстыкі і водгукі
Просты чорна-белы шматфункцыянальны лазерны прынтэр можа спатрэбіцца ў невялікай ці хатнім офісе, дзе каляровая друк не з'яўляецца абавязковым патрабаваннем, але неабходна высокую якасць тэксту. Samsung SCX-3405W – гэта бесп...
Як адфарматаваць флешку праз камандную радок і якія ёсць спосабы?
Здымныя USB-флэш-назапашвальнікі даводзіцца фарматаваць даволі часта, прычым не толькі для поўнай ачысткі іх ад наяўнай інфармацыі, але і для стварэння загрузных носьбітаў або ў выпадку пашкоджанні файлавай сістэмы з прычыны якіх-...
Як праверыць сумяшчальнасць мацярынскай платы і аператыўнай памяці: некалькі простых спосабаў
Верагодна, кожны карыстальнік сучаснага кампутара, які спрабуе яго мадэрнізаваць з мэтай павышэння хуткадзейнасці за кошт устаноўкі дадатковых планак аператыўнай памяці, ведае ці, па меншай меры, здагадваецца, што адной толькі куп...
Заўвага (0)
Гэтая артыкул не мае каментароў, будзьце першым!