Задаволены
- 01. Супастаўце малюнкі з каляровымі схемамі сайта
- 02. Раўнамерна падзяліце прастору ў апошнім шэрагу сеткі
- 03. Стварыце анімацыю часціц пры дапамозе скрыні-цені
- 04. Анімацыя мнагаграннікаў з пераўтварэннямі
- 05. Майстар 'calc ()' для пазіцыянавання
- 06. Зрабіце мадэль скрынкі разумнай з дапамогай "памеру скрынкі"
- 07. Вертыкальна цэнтр з CSS
- 08. Арыентуйцеся на банк звязаных аб'ектаў
- 09. Кантрольны перанос
- 10. Скарыстайцеся рэжымамі напісання
- 11. Выкарыстоўвайце градыенты незвычайнымі спосабамі
- 12. Выкарыстоўвайце адпаведнасць радкоў па спасылках
- 13. Прымусіце FOUT працаваць на вас
- 14. Даследуйце SVG, каб даведацца пра фоны
- 15. Фокус карыстальнікаў з 3D-пераходамі
- 16. Стварыце кругавыя меню з дапамогай CSS і матэматыкі
- 17. Анімацыя спасылак пры навядзенні
- 18. Зрабіце простыя анімацыі ключавых кадраў
- 19. Стварыце плаваюць 3D-эфекты з ценямі
- 20. Абнавіце элементы старонкі з дапамогай ': target'
- 21. Забяспечце зваротную сувязь тонкай анімацыяй
- 22. Падрыхтоўка да «вольнага ажыўлення»
- 23. Гуманізаваныя палі ўводу
- 24. Прыпыненне і прайграванне анімацыі CSS
- 25. Не выкарыстоўвайце CSS-зменныя
У нейкі момант з любой тэхналогіяй узнікае адчуванне, што зроблена практычна ўсё, што можна зрабіць. Калі нешта ўжо не такое новае і бліскучае, цікавасць слабее і ўвагу прыцягвае наступная вялікая справа. Так часта бывала ў вэб-індустрыі, якая схільна страшэнна ўзбуджацца пэўным аспектам тэхналогіі, перш чым, рана ці позна, аднесці яе да звычайнага жыцця.
Калі CSS з'явіўся ўпершыню, ён быў рэвалюцыйным, і з цягам часу ён развіўся, каб даць дызайнерам магчымасць ствараць гнуткія, дакладна распрацаваныя і прыгожыя макеты вэб-старонак. З апошніх часоў, аднак, з розных бакоў выказваецца меркаванне, што CSS стаміўся і, магчыма, час на сонцы сышоў.
Я хачу прадэманстраваць, што ў свеце CSS па-ранейшаму шмат хваляванняў і жыцця, незалежна ад таго, ці ёсць гэта ў сучасных уласцівасцях, якія вы яшчэ не вывучылі, альбо з выкарыстаннем аспекту CSS такім чынам, які вы раней не разглядалі.
Вось некалькі парад некаторых вядучых экспертаў CSS у гэтай галіне.
(Заўвага: Некаторыя метады ў гэтай функцыі перадавыя і, магчыма, не падтрымліваюцца ва ўсіх браўзэрах. Дбайна пратэстуйце і пераканайцеся ў наяўнасці рэзервовых копій перад тым, як пачаць любую працу.)
01. Супастаўце малюнкі з каляровымі схемамі сайта
Крыстафер Шміт, арганізатар канферэнцыі
Канферэнцыі маюць свае ўласныя каляровыя схемы, і ў многіх дынамікаў працэс кіравання партрэтамі можа быць складаным. Прымяненне фільтраў уручную не маштабуецца і залежыць ад таго, што вы маеце доступ, напрыклад, да пэўнага дзеяння Photoshop. Цяпер я выкарыстоўваю PNG у высокім дазволе ў адценнях шэрага і дадаю тоны з дапамогай фільтраў CSS. Гэта дазваляе мне супаставіць любы партрэт са схемай падзеі, а таксама паўторна выкарыстоўваць выявы ў некалькіх тэмах. Мне проста трэба новае правіла CSS для кожнага. Глядзіце дэма.
02. Раўнамерна падзяліце прастору ў апошнім шэрагу сеткі
Стывен Хэй, дызайнер і аўтар
Калі ў вас ёсць невядомая колькасць элементаў для адлюстравання ў сетцы, вы можаце выкарыстоўваць Flexbox, каб раўнамерна падзяліць апошні радок. Такім чынам, калі ёсць толькі адзін прадмет, ён зойме ўвесь радок; калі ёсць два элементы, радок будзе падзелены напалову і г.д. Глядзіце дэма.
03. Стварыце анімацыю часціц пры дапамозе скрыні-цені
Ана Тудор, праграмістка і фанатык па матэматыцы
Змешваючы скрынка-цень з некаторай матэматыкай і Сасам, вы можаце адлюстраваць 2D-крывыя, эмуляваць 3D-рух і ствараць шалёныя анімацыі часціц, якія ўсе памылкова прымаюць за палатняныя! Глядзіце дэма і іншае.
04. Анімацыя мнагаграннікаў з пераўтварэннямі
Ана Тудор, праграмістка і фанатык па матэматыцы
Вы, напэўна, бачылі чыстыя полігоны CSS, створаныя з межамі, але ў нас нашмат больш магутны інструмент пераўтварыць маёмасць. Звязванне і прымяненне пераўтварэнняў на ўкладзеных элементах дазваляе нам ствараць складаныя шматкутнікі з фонавым малюнкам альбо межамі і празрыстым інтэр'ерам. Выкарыстоўваючы 3D-пераўтварэнні, мы можам аб'яднаць гэтыя 2D-формы ў мнагаграннікі і прымусіць цвёрдыя рэчывы злівацца, разгортвацца, выбухаць альбо рэкамбінаваць такім чынам, што лёгка прыняць за WebGL. Глядзіце дэма.
05. Майстар 'calc ()' для пазіцыянавання
Ана Тудор, праграмістка і фанатык па матэматыцы
я кахаў разлік () з таго моманту, як я яго выявіў. Гэта карысна для прыручэння палёў, абіўкі альбо памераў і можа быць выратаваннем, калі выкарыстоўваецца для пазіцыянавання альбо памеру фона, унутры градыентаў альбо пераўтварэнняў, а таксама ў спалучэнні не толькі з тымі ж старымі адзінкамі, але і з новымі і цікавымі відарысамі.
06. Зрабіце мадэль скрынкі разумнай з дапамогай "памеру скрынкі"
Соер Холенсхед, распрацоўшчык і дызайнер Oak Studios
Выкарыстоўвайце памер скрынкі каб выратаваць ваш розум. Без гэтага элемент з вызначанай шырынёй 250 пікселяў і 25 пікселяў пракладкі аб'ядноўваецца да шырыні 300 пікселяў, робячы змешванне пікселяў і працэнтаў жорсткім. З памер скрынкі:мяжа-скрынка межы і пракладкі замест гэтага размяшчаюцца ў межах вызначанай шырыні.
07. Вертыкальна цэнтр з CSS
Трэнт Уолтан, заснавальнік Paravel
Гістарычна складана было сканцэнтраваць нешта па вертыкалі з дапамогай CSS, напрыклад, калі ў вас ёсць малюнак з суседнім тэкстам, які вы хочаце выраўнаваць па вертыкалі. Замест таго, каб тупаць і лаяцца, выкарыстоўвайце Flexbox, каб справіцца з бядой па выраўноўванні. Глядзіце дэма.
08. Арыентуйцеся на банк звязаных аб'ектаў
Джонатан Смайлі, партнёр Zurb і дызайнер
Паголіце вага CSS-лінейкі, выкарыстоўваючы прыблізныя селектары атрыбутаў у назвах класаў, каб нацэліць вялікі банк звязаных аб'ектаў, а не прымацоўваць агульныя атрыбуты да кожнага асобнага класа. Напрыклад ... [class * = "- block-grid-"] {} ... будзе арыентаваны на: .small-block-grid-3 .large-block-grid-5
09. Кантрольны перанос
Савід Сторы, абаронца адкрытага Інтэрнэту
Перанос прымаецца як належнае ў друку, і некаторыя распрацоўшчыкі выкарыстоўваюць злучкі уласнасць у Інтэрнэце, але мала хто ведае пра іншыя ўласцівасці, якія забяспечваюць больш дакладны кантроль. Калі вы не будзеце асцярожныя, вы атрымаеце лесвіцы для пераносу, дзе працяжнікі выкарыстоўваюцца праз некалькі радкоў. Агульнае правіла - не больш за два запар, якімі вы можаце кіраваць дэфіс-лімітавыя лініі. Акрамя таго, дэфіс-ліміт-сімвалы дазваляе ўказаць мінімальную даўжыню слова, якое будзе пераносіцца, а таксама мінімальную колькасць знакаў да і пасля разрыву працяжніка.
10. Скарыстайцеся рэжымамі напісання
Дэвід Сторы, абаронца адкрытага Інтэрнэту
Рэжымы запісу дазваляюць вызначыць кірунак руху тэксту. Некаторыя ўсходнеазіяцкія тэксты напісаны вертыкальна, радкі растуць справа налева, пазначаныя знакам рэжым запісу: вертыкальны rl (tb-rl у IE). Вертыкальны тэкст на самай справе не выкарыстоўваецца ў еўрапейскіх пісьмовых сістэмах, але можа быць карысным для загалоўкаў табліц, калі вы абмежаваны гарызантальнай прасторай.
11. Выкарыстоўвайце градыенты незвычайнымі спосабамі
Рут Джон, дызайнер
Градыенты фону могуць выдатна выглядаць пры выкарыстанні з рамкамі і маркіроўкамі. Я выкарыстоўваю як у сваім блогу, так і з прэпрацэсарам, магу выклікаць мікшын з паўторна выкарыстаным кодам, каб не паўтараць яго ўручную. Не варта звар'яцець, бо градыенты могуць быць вельмі цяжкімі для працэсара. Камбінат SCSS для маркераў са спісам:
@mixin gradedBullet ($ колер) {фонавы малюнак: лінейны градыент (злева, асвятленне ($ колер, 15%) 10 пікселяў, $ колер 11 пікс, $ колер 20 пікселяў, пацямненне ($ колер, 15%) 21 пікс, пацямненне ($ колер , 15%) 30px, празрысты 31px); }
12. Выкарыстоўвайце адпаведнасць радкоў па спасылках
Рут Джон, дызайнер
У сваім блогу я выкарыстаў селектары атрыбутаў CSS з супадзеннем радкоў для стылізацыі сацыяльных абразкоў. Яны з'яўляюцца ў маім блогу, часам з тэкстам, а часам і без, але заўсёды з абразком. Каб стылізаваць правільную спасылку з дапамогай правільнай сацыяльнай абразкі, я выкарыстоўваю адпаведнасць радкоў на HREF атрыбут якарнага элемента. Я выкарыстоўваю *= так што HREF на прывязаным элеменце павінен утрымліваць толькі радок, які я ўказваю.
/ * для ўсіх сацыяльных спасылак * / .social a: before {display: inline-block; пракладка справа: 30 пікселяў; сямейства шрыфтоў: ’FontAwesome’;} / * Кожная канкрэтная спасылка * / .social a [href * = "шчабятанне"]: да {змест: " f099"; колер: # 52ae9f;} .social a [href * = "github"]: да {змест: " f09b"; колер: # 5f2e44;} .social a [href * = "падача"]: да {змест: " f09e"; колер: # b47742;}
13. Прымусіце FOUT працаваць на вас
Джэйсан Фундаментал, кіраўнік праекта H + W
Інтэрнэт пабудаваны на перадумове, што ён павінен прадастаўляць кантэнт, нават калі браўзэр не можа зрабіць bling. Павольная загрузка вэб-шрыфтоў можа выклікаць расчараванне, FOUT (Flash Of Unstyled Text) выклікае засмучэнне, бо навігацыя і тэкст перапрацоўваюцца падчас загрузкі шрыфтоў. Google і Typekit даюць адказ: загрузчык шрыфтоў. Уводзячы класы на старонку, зыходзячы са стану загрузкі шрыфтоў, вы можаце стылізаваць рэзервовыя копіі гэтых класаў, каб мінімізаваць перапланіроўку, таксама выкараняючы сіндром "нябачнага змесціва" WebKit. Глядзіце дэма.
14. Даследуйце SVG, каб даведацца пра фоны
Эміль Б'ёрклунд, вэб-распрацоўшчык inUse
Адзінымі браўзэрамі, якія зараз не падтрымліваюць SVG, з'яўляюцца IE8 і ніжэй, і Android 2 WebKit, таму выкарыстанне SVG для фонавага рэжыму ў CSS магчыма, асабліва разам з рэзервовым рашэннем PNG, такім як Grunticon. SVG можна стылізаваць з дапамогай CSS, і ёсць цікавая праборка ўласцівасцей CSS (фільтраў!) Ад SVG, з якімі мы можам гуляць у дачыненні да HTML.
15. Фокус карыстальнікаў з 3D-пераходамі
Эміль Б'ёрклунд, вэб-распрацоўшчык inUse
Выкарыстанне 3D-пераўтварэнняў і выкарыстанне z-вымярэнне у карыстацкіх інтэрфейсах можа быць сапраўды карысным, у прыватнасці, для схавання / паказу альбо згортвання / пашырэння змесціва. Акрамя таго, у такіх сітуацыях можна лёгка вярнуцца да 2D-пераходу альбо наогул не перайсці. Гэта вобласць, дзе невялікае прагрэсіўнае ўдасканаленне можа пайсці далёка наперад.
16. Стварыце кругавыя меню з дапамогай CSS і матэматыкі
Сара Суэйдан, распрацоўшчык інтэрфейсу
Кругавыя меню папулярныя ў мабільных праграмах, і вы можаце выкарыстоўваць CSS-пераўтварэнні і пераходы, каб стварыць простае кругавое меню. Гэта меню можна змяніць і наладзіць, каб таксама стварыць меню, якое адкрываецца ўверх ці ўніз. У CSS няма прамога спосабу перакласці элемент па дыяганалі, але вы можаце выкарыстоўваць значэнне радыуса акружнасці, на якім вы хочаце размясціць элементы, і прымяніць простае матэматычнае правіла для разліку гарызантальных і вертыкальных значэнняў перакладу, якія будуць перадавацца ў translateX () і перакласціY () функцыі. Такім чынам, вы атрымаеце дыяганаль пераклад, каб перамясціць пункты меню ў патрэбныя пазіцыі па крузе. Падзея кліку, якая закрывае / адкрывае меню, можа быць апрацавана з выкарыстаннем JavaScript, альбо вы можаце зрабіць яшчэ адзін крок далей і стварыць меню толькі для CSS, выкарыстоўваючы ўзламаны сцяжок CSS. У сваёй дэманстрацыі я выкарыстоўваю JavaScript і API HTML5 classList, які падтрымліваецца не ва ўсіх браўзэрах, таму вам трэба будзе праглядзець дэманстрацыю ў сучасным браўзэры, каб яна працавала, альбо раскаментаваць код jQuery замест таго, каб выкарыстоўваць API classList код.
Глядзіце дэманстрацыю і поўны падручнік. Прыклад узлому CSS Checkbox.
17. Анімацыя спасылак пры навядзенні
Пол Лойд, дызайнер узаемадзеяння The Guardian
Не трэба спадзявацца на стану навядзення, каб зрабіць дзеянне дзеяннем альбо даць важную інфармацыю, але вы ўсё роўна можаце палепшыць інтэрфейсы для карыстальнікаў, якія працуюць на мышы. На 24ways.org мы раскрываем загалоўкі артыкулаў пры навядзенні курсора на спасылкі ў папярэдняй / наступнай навігацыі. Гэта было дасягнута шляхам стварэння :: пасля псеўдаэлемент, які змяшчае згенераваны змест, атрыманы са значэння a дадзеныя- атрыбут, з выкарыстаннем пераходу CSS, каб ён слізгаў у поле зроку пры навядзенні. Глядзіце дэма.
18. Зрабіце простыя анімацыі ключавых кадраў
Пол Лойд, дызайнер узаемадзеяння The Guardian
На 24ways.org мы дадалі анімацыйныя вуглавыя закрылкі да рэзюмэ, якое адкрывалася пры навядзенні. Гэта было зроблена шляхам аб'яднання @keyframes правіла са ўласцівасцю анімацыі, змяняючы становішча фонавага малюнка для дасягнення анімацыі на аснове спрайтаў. Хітрасць заключаецца ў тым, каб аб'явіць колькасць кадраў у вашым анімацыйным спрайце з дапамогай крокі () значэнне. Глядзіце дэма.
19. Стварыце плаваюць 3D-эфекты з ценямі
Кэтрын Фарман, распрацоўшчык Happy Cog
У нядаўнім праекце спатрэбілася плаваючая фатаграфія прадукту з круглай ценем унізе, ствараючы 3D-эфект, які выскоквае з экрана. Цень выкарыстоўвае некалькі функцый CSS3: мяжа-радыус альфа-празрыстасць і скрынка-цень. Гэта добра падыходзіць для сетак прадуктаў, дэманстрацыі выяваў героя хатняй старонкі альбо любога мудрагелістага дызайну са скеуаморфным выгібам. Глядзіце дэма.
20. Абнавіце элементы старонкі з дапамогай ': target'
Сайман Мэдзін, старэйшы вэб-распрацоўшчык HeRe
CSS не з'яўляецца мовай праграмавання ў звычайным разуменні, але вы ўсё роўна можаце рабіць разумныя рэчы, не вяртаючыся да JavaScript. Напрыклад, : мэта псеўда-клас прымяняецца да элементаў, на якія націскаецца спасылка.
Вы можаце выкарыстоўваць гэта для вызначэння стану старонкі, арыентацыі на бацькоў, які змяшчае мноства элементаў, і вашы спасылкі стануць сродкам кіравання знешнім выглядам і макетам усіх дзяцей адным націскам кнопкі. Глядзіце дэма.
21. Забяспечце зваротную сувязь тонкай анімацыяй
Ніл Рэнікер, дызайнер і распрацоўшчык
Псеўдаэлементы CSS :: раней і :: пасля разам з пераходамі CSS, можа ўключыць цудоўную анімацыю, якая забяспечвае тонкую зваротную сувязь карыстальнікам мышы. Напрыклад, пабудаваць CSS-стрэлку ў псеўдаэлеменце, прымяніць пераход да псеўдаэлемента (пераход: усе зручнасці .15s;), а затым дадаць простае змяненне макета ў : навядзіце курсор псеўдаклас (напрыклад, папраўка маржа-зверху). Глядзіце дэма.
22. Падрыхтоўка да «вольнага ажыўлення»
Пол Люіс, праграміст і член групы па сувязях з распрацоўшчыкамі Chrome
Калі вы выкарыстоўвалі -webkit-пераўтварэнне: translateZ (0) каб чароўней зрабіць вашы старонкі хутчэйшымі, узлом, які ў многіх аглядальніках проста стварае новы пласт кампазітара, замяняецца на воля-адушаўленне. Неўзабаве вы зможаце паведаміць браўзэру, што вы плануеце змяніць у дачыненні да элемента (яго становішча, памер, змест або становішча пракруткі), і браўзэр прымяніць правільную аптымізацыю пад капотам. Больш інфармацыі.
23. Гуманізаваныя палі ўводу
Ярон Шон, заснавальнік "Зроблена для людзей"
Даданне хуткай анімацыі да элементаў, з якімі ўзаемадзейнічаюць карыстальнікі, робіць інтэрфейс менш адчувальным. З поля ўводу паспрабуйце паставіць пераходны выклік усярэдзіне, так што кожны раз, калі вы сфакусуеце яго альбо не сканцэнтруеце яго, адбываецца плыўны пераход.
увод, тэкставая вобласць {-moz-пераход: усе 0,2-х разгрузкі; -o-пераход: усе 0,2-секундавыя; -webkit-пераход: усе 0,2-х спрашчэнне; -ms-пераход: усе 0,2-х прасцей; пераход: усе 0,2 секундныя паслабленні;
24. Прыпыненне і прайграванне анімацыі CSS
Вэл Хед, дызайнер і кансультант
Вы можаце "прыпыніць" і "прайграць" анімацыю CSS, змяніўшы яе анімацыя-гульня-стан маёмасць. Усталяванне "прыпынена" спыняе анімацыю на месцы, пакуль вы не зменіцеся анімацыя-гульня-стан да бег, напрыклад пры навядзенні.
.animating_thing {анімацыя: круціць 10-х лінейны бясконцы; анімацыя-гульня-стан: прыпынена; }. animating_thing: hover {animation-play-state: працуе; }
25. Не выкарыстоўвайце CSS-зменныя
Дэйв Шы, дызайнер і аўтар
Нарэшце мы атрымліваем пераменныя CSS, напрыклад, каб напісаць шаснаццатковае значэнне колеру адзін раз і спасылацца на яго праз табліцу стыляў. Але афіцыйная спецыфікацыя шматслоўная, дадае сінтаксічную складанасць, прапануе надзвычайную функцыянальнасць і ў асноўным не падтрымліваецца большасцю браўзэраў. У эпоху, калі Sass карыстаецца шырокай папулярнасцю і выходзіць за рамкі зменных з магутнай логікай праграмавання, такіх як карыстацкія функцыі і выказванні if / else, афіцыйная спецыфікацыя вельмі кароткая.
Будзем спадзявацца, што гэтыя галоўныя парады абнавілі ваш погляд на CSS і магчымасці, якія ён прадстаўляе ў вэб-распрацоўцы і дызайне. Не забудзьцеся праверыць любы з гэтых метадаў, каб праверыць падтрымку браўзэра перад тым, як пачаць працу.
Словы: Крэйг Гранэл Ілюстрацыя: Майк Чыпэрфілд
Гэты артыкул першапачаткова з'явіўся ў нумары 253 часопіса net.
