Мазмун
- 01. Сүрөттөрдү сайттын түс схемаларына дал келтирүү
- 02. Тордун акыркы катарында мейкиндикти бирдей бөлүштүрүңүз
- 03. Көлөкө менен бөлүкчөлөрдүн анимацияларын түзүңүз
- 04. Трансформацияланган полиэдраны жандандыруу
- 05. Жайгаштыруу үчүн Master 'calc ()'
- 06. "Box-sizeing" менен кутуча моделин акыл-эси жайында кылыңыз
- 07. CSS менен тигинен борборлоштуруу
- 08. Байланыштуу объектилердин банкын максаттуу багыттоо
- 09. Дефис аркылуу жазуу
- 10. Жазуу режимдеринен пайдаланыңыз
- 11. Градиенттерди адаттан тыш жолдор менен колдонуңуз
- 12. Шилтемелерде string-Matching колдон
- 13. FOUTту сиз үчүн иштетиңиз
- 14. SVG тек-жайын изилдөө
- 15. 3D өтүүлөрү бар колдонуучуларга көңүл буруңуз
- 16. CSS жана математика менен тегерек менюларды түзүңүз
- 17. Хопердеги шилтемелерди жандандыруу
- 18. Жөнөкөй фрейм-анимацияларды жасаңыз
- 19. Көлөкөлөр менен калкып жүргөн 3D эффекттерин түзүңүз
- 20. EleMents барагын ': target' аркылуу жаңыртыңыз
- 21. Кылдат анимациялар менен байланыш түзүңүз
- 22. 'will-animate' даярдануу
- 23. Humanise киргизүү талаалары
- 24. CSS анимацияларын тындырып, ойнотуңуз
- 25. CSS өзгөрмөлөрүн колдонбоңуз
Кандайдыр бир технология менен кандайдыр бир учурда, дээрлик бардык нерсе жасалды деген сезим бар. Бир нерсе жаңы жана жалтырак болбой калганда, кызыгуу азайып, кийинки чоң нерсеге көңүл бурулат. Мындай көрүнүш веб-индустрияда көп болуп келген, эртедир-кечтир аны технологиянын белгилүү бир аспектиси күндөлүк турмушка оодарып жиберип, аябай толкундандырат.
CSS биринчи пайда болгондо, ал революциялык мүнөздө болуп, убакыттын өтүшү менен дизайнерлерге ийкемдүү, тыгыз иштелип чыккан жана кооз веб барактардын макетин түзүүгө мүмкүнчүлүк берди. Кеч болуп калса дагы, ар кайсы чөйрөдөн CSS чарчап, балким, анын күнгө ысыган убактысы өтүп кетти деген сунуштар болду.
CSS дүйнөсүндө толкундануу жана жашоо дагы деле көп экендигин, сиз көрө элек касиеттерде болобу же CSS аспектисин сиз буга чейин ойлонуп көрбөгөн ыкмада колдонуу менен болгум келет.
Бул жерде тармактын мыкты CSS эксперттеринин айрым кеңештери келтирилген.
(Эскертүү: Бул функциядагы айрым ыкмалар заманбап болуп саналат жана бардык браузерлерде толугу менен колдоого алынбашы мүмкүн. Кандайдыр бир ишти түз эфирге чыгаруудан мурун кемчиликтерди текшерип, кемчиликтерди камсыз кылыңыз.)
01. Сүрөттөрдү сайттын түс схемаларына дал келтирүү
Кристофер Шмитт, конференциянын уюштуруучусу
Конференциялардын өз түс схемалары бар жана көптөгөн баяндамачылар менен бирге, портреттерди башкаруу боюнча иш процесси татаал болушу мүмкүн. Кол менен чыпкаларды колдонуу масштабды көтөрбөйт жана сиз, мисалы, белгилүү бир Photoshop аракетине мүмкүнчүлүгүңүз бар деп эсептейт. Мен азыр жогорку деңгээлдеги боз түстөгү PNGдерди колдонуп, CSS чыпкаларынын жардамы менен обондорду кошуп жатам. Бул мага каалаган портретти иш-чаранын схемасына дал келтирүүгө, ошондой эле бир нече темадагы сүрөттөрдү кайра колдонууга мүмкүнчүлүк берет. Мага ар бири үчүн жаңы CSS эрежеси керек. Демону көрүңүз.
02. Тордун акыркы катарында мейкиндикти бирдей бөлүштүрүңүз
Стивен Хей, дизайнер жана жазуучу
Эгерде сизде тордо көрсөтүлө турган белгисиз сандагы нерселер бар болсо, анда Flexbox'ту колдонуп, акыркы сапты бирдей кылып бөлсөңүз болот. Ошентип, бир гана нерсе бар болсо, ал бүт катарды ээлейт; эгер эки нерсе болсо, катар экиге бөлүнөт ж.б.у.с. Демону көрүңүз.
03. Көлөкө менен бөлүкчөлөрдүн анимацияларын түзүңүз
Ана Тудор, кодер жана математика фанаттары
Аралаштыруу жолу менен көлөкө кээ бир математика жана Sass менен, сиз 2D ийри сызууларды сызып, 3D кыймылын туурап, жинди бөлүкчөлөрдүн анимацияларын түзүп, ар бир адам кенеп деп жаңылышат! Демону жана башкасын караңыз.
04. Трансформацияланган полиэдраны жандандыруу
Ана Тудор, кодер жана математика фанаттары
Сиз чек аралар менен түзүлгөн таза CSS көп бурчтуктарын көрдүңүз, бирок бизде алда канча күчтүү курал бар өзгөртүү мүлк. Уюштурулган элементтердеги трансформацияларды чынжырлоо жана колдонуу бизге сүрөттөлүштөрдүн фоны же чектери менен тунук интерьери бар татаал көп бурчтуктарды түзүүгө мүмкүндүк берет. 3D трансформаларын колдонуп, бул 2D формаларын полиэдрага бириктирип, катуу нерселерди WebGL деп оңой жаңылыштык менен бириктирип, жайып, жарылып же рекомбинациялай алабыз. Демону көрүңүз.
05. Жайгаштыруу үчүн Master 'calc ()'
Ана Тудор, кодер жана математика фанаттары
Мен жакшы көрчүмүн calc () мен аны тапкан учурдан тартып. Бул чектерди, толтурууну же өлчөмдөрдү үйрөтүү үчүн пайдалуу, ошондой эле фондорду, градиенттерди же трансформацияларды жайгаштырууда же өлчөмдөодо, ошондой эле эски бирдиктер менен гана эмес, ошондой эле жаңы жана салкын көрүнүш терезелери менен айкалыштырганда куткаруучу болушу мүмкүн.
06. "Box-sizeing" менен кутуча моделин акыл-эси жайында кылыңыз
Сойер Холленсхед, Oak Studios компаниясынын дизайнери жана дизайнери
Колдонуу кутучаны өлчөө акылыңды сактап калуу үчүн. Ансыз, 250px жана 25px толтурулган туурасы бар элемент 300px кеңдикке чейин айкалышып, аралаштыруучу пикселдерди жана пайыздарды катаал кылат. Менен куту өлчөмү:чек ара кутусу анын ордуна чектер жана толтуруу белгиленген кеңдиктин чегинде жайгаштырылат.
07. CSS менен тигинен борборлоштуруу
Трент Уолтон, Paravelдин негиздөөчүсү
Тарыхый түрдө, CSS менен тигинен бир нерсени борборлоштуруу өтө кыйын болду, мисалы, сиз текстти тигинен тигиндештирүүнү кааласаңыз. Тебелеп-тепсөөнүн ордуна, тегиздөө көйгөйлөрү менен күрөшүү үчүн Flexboxту колдонуңуз. Демону көрүңүз.
08. Байланыштуу объектилердин банкын максаттуу багыттоо
Джонатан Смайл, Zurb өнөктөшү жана дизайндын жетекчиси
Жалпы атрибуттарды ар бир класска бекитпестен, байланышкан объектилердин чоң банкына багыт алуу үчүн, класстын аталыштарында болжолдуу атрибутикалык селекторлорду колдонуп, CSS линиясынын салмагын кыркыңыз. Мисалы ... [class * = "- block-grid-"] {} ... сыяктуу жактырууларды максат кылат: .small-block-grid-3 .large-block-grid-5
09. Дефис аркылуу жазуу
Savid Storey, ачык веб-адвокат
Гифенция басма сөзүндө эле кабыл алынып, айрым иштеп чыгуучулар аны колдонушат дефис мүлк онлайн, бирок анча-мынча адамдар көзөмөлдү жакшыраак камсыз кылган башка касиеттер жөнүндө билишет. Этият болбосоңуз, сызыкчалар бир нече сапта колдонулган дефис тепкичтерин аласыз. Жалпы эреже катары менен экиден ашык эмес, сиз аны колдонуп башкара аласыз сызык сызыктары. Ошондой эле, дефис-чек-белгилери дефиске чейинки жана андан кийинки белгилердин минималдуу саны менен кошо дефиске салынуучу сөздүн минималдуу узундугун көрсөтүүгө мүмкүндүк берет.
10. Жазуу режимдеринен пайдаланыңыз
Дэвид Стори, ачык веб-адвокат
Жазуу режимдери текст агымынын багытын аныктоого мүмкүндүк берет. Кээ бир Чыгыш Азия тексттери тигинен жазылган, саптар оңдон солго өсүп, көрсөтүлгөн жазуу режими: vertical-rl (tb-rl IE). Тик текст чындыгында европалык жазуу тутумдарында колдонулбайт, бирок горизонталдык мейкиндик чектелгенде, жадыбалдын аталыштары үчүн ыңгайлуу болушу мүмкүн.
11. Градиенттерди адаттан тыш жолдор менен колдонуңуз
Рут Джон, дизайнер
Фон градиенттери чек аралар жана октор менен колдонулганда сонун көрүнүшү мүмкүн. Мен өзүмдүн блогумда дагы колдоном, ошондой эле кол менен кайталабаш үчүн, кайра колдонулган код менен миксин чакыра турган препроцессор менен. Супер жинди болбоңуз, анткени градиенттер процессорго оор болушу мүмкүн. SCSS аралашмасы тизме үчүн ок:
@mixin gradedBullet ($ color) {фон-сүрөт: сызыктуу-градиент (сол, ачык ($ color, 15%) 10px, $ color 11px, $ color 20px, darken ($ color, 15%) 21px, darken ($ color) , 15%) 30px, тунук 31px); }
12. Шилтемелерде string-Matching колдон
Рут Джон, дизайнер
Блогумда социалдык белгилерди стилдөө үчүн CSS атрибутикалык селекторлорду сапка дал келтирүү менен колдондум. Булар менин блогумда кээде текст менен, кээде жок, бирок ар дайым сүрөтчөсү менен пайда болот. Туура социалдык сөлөкөт менен туура шилтемени стилдештирүү үчүн, мен href казык элементинин атрибуту. Мен колдоном *= ошондуктан href анкер элементинде мен көрсөткөн сап гана болушу керек.
/ * бардык социалдык шилтемелер үчүн * / .social a: before {display: inline-block; оң толтуруу: 30px; font-family: ’FontAwesome’;} / * Ар бир белгилүү шилтеме * / .social a [href * = "twitter"]: чейин {content: " f099"; color: # 52ae9f;} .social a [href * = "github"]: алдында {content: " f09b"; color: # 5f2e44;} .social a [href * = "feed"]: алдында {content: " f09e"; color: # b47742;}
13. FOUTту сиз үчүн иштетиңиз
Джейсон Пементал, H + W дизайнынын директору
Веб браузер блингди көрсөтө албаса дагы, ал камтылганы жеткириши керек деген негизде курулган. Жай жүктөлгөн веб-ариптер көңүлдү иренжитиши мүмкүн, FOUT (Flash Of Unstyled Text) жаңылыштык жана ариптер жүктөлүп жатканда тексттин жаңыртылышы. Google жана Typekit жооп берет: веб-арип жүктөгүч. Шрифттерди жүктөө статусуна негизделген барактарга класстарды сайып коюу менен, ошол класстар менен кемчиликтерди стилдештирип, эң аз деңгээлде жаңыланып турасыз, ошондой эле WebKitтин "көрүнбөгөн мазмунун" синдромунан арылта аласыз. Демону көрүңүз.
14. SVG тек-жайын изилдөө
Эмил Бьорклунд, Веб-иштеп чыгуучуну колдонуңуз
Азыр SVG колдоосу жок бирден-бир браузер IE8 жана андан төмөн жана Android 2 WebKit болуп саналат, андыктан SVGни CSSтеги фондор үчүн колдонуу мүмкүн, айрыкча Grunticon сыяктуу PNG резервдик чечими менен. SVG CSS аркылуу жасалгаланышы мүмкүн, жана SVGден CSS касиеттеринин (фильтрлердин!) Кан агуусу абдан кызыктуу, биз HTMLге карата колдонуп ойной алабыз.
15. 3D өтүүлөрү бар колдонуучуларга көңүл буруңуз
Эмил Бьорклунд, Веб-иштеп чыгуучуну колдонуңуз
3D өзгөртүүлөрдү колдонуу жана z-өлчөм колдонуучу интерфейстеринде чындыгында пайдалуу болушу мүмкүн, айрыкча, жашыруу / көрсөтүү же кыйратуу / кеңейтүү үчүн. Ошондой эле, мындай кырдаалда 2D өтүү же таптакыр өтпөй калуу оңой болот. Бул бир аз прогрессивдүү өркүндөтүү узак жол жүрүшү мүмкүн болгон аймак.
16. CSS жана математика менен тегерек менюларды түзүңүз
Сара Суйейдан, алдыңкы иштеп чыгуучу
Мобилдик колдонмолордо циркулярдык менюлар популярдуу, жана сиз жөнөкөй тегерек меню түзүүдө CSS өзгөртүүлөрүн жана өткөөлдөрүн колдоно аласыз. Жогору же ылдый ачылуучу менюну түзүү үчүн, бул меню өзгөртүлүп, ыңгайлаштырылышы мүмкүн. CSSте бир нерсени диагонал менен которуунун эч кандай түз жолу жок, бирок сиз нерселерди жайгаштыргыңыз келген тегерек радиустун маанисин колдонуп, жөнөкөй математикалык эрежелерди колдонуп, горизонталдык жана вертикалдык котормо баалуулуктарын өткөрүп, translateX () жана translateY () функциялар. Ошентип, а диагональ менюдагы нерселерди чөйрөдөгү туура позицияларга жылдыруу үчүн котормо. Менюну жапкан / ачкан чыкылдатуу иш-чарасы JavaScriptтин жардамы менен жүргүзүлүшү мүмкүн, же бир кадам алдыга жылып, CSS кутучасын бузуп, CSS гана менюсуна ээ болосуз. Менин демонстрацияда JavaScript жана HTML5 classList API колдонулат, ал бардык браузерлерде колдоого алынбайт, андыктан демону иштеши үчүн заманбап браузерден көрүшүңүз керек, же classList API колдонуунун ордуна jQuery кодун алып салыңыз код.
Демо жана толук окуу куралын көрүңүз. CSS Checkbox мисалы.
17. Хопердеги шилтемелерди жандандыруу
Пол Ллойд, Guardian өз ара аракеттенүү дизайнери
Иш-аракетти жасоодо же маанилүү маалымат менен камсыз кылууда Hover мамлекеттерине ишенбөө керек, бирок сиз чычканга негизделген колдонуучулар үчүн интерфейстерди жакшырта аласыз. 24ways.org сайтында, макаланын аталыштарын мурунку / кийинки навигациядагы шилтемелердин үстүнө жылдырганда ачып беребиз. Бул түзүү аркылуу жетишилген :: кийин а маанисинен келип чыккан, түзүлгөн мазмунду камтыган псевдоэлемент берилиштер атрибуту, аны hover режиминде көрүнүшү үчүн жылдыруу үчүн колдонулган CSS өткөөлү менен. Демону көрүңүз.
18. Жөнөкөй фрейм-анимацияларды жасаңыз
Пол Ллойд, Guardian өз ара аракеттенүү дизайнери
24ways.org сайтында, кыймылдаткычта ачылган кыскача кыскача анимациялык бурчтук жапкычтарды коштук. Бул бириктирүү жолу менен жасалган @keyframes спрайтка негизделген анимацияга жетүү үчүн фондук сүрөттүн ордун өзгөртүп, анимация касиети менен эреже. Айла жок, сиз менен анимациялык спрайтта канча кадр бар экендигин жарыялоо кадамдар () мааниси. Демону көрүңүз.
19. Көлөкөлөр менен калкып жүргөн 3D эффекттерин түзүңүз
Кэтрин Фарман, Happy Cog иштеп чыгуучусу
Жакында ишке ашырылган долбоордун алкагында экрандан калкып чыккан 3D эффектин жаратып, астына тегерек көлөкө түшүрүлгөн калкып чыккан продукт сүрөтү талап кылынган. Көлөкө бир нече CSS3 функцияларын колдонот: чек ара радиусу альфа тунуктугу жана көлөкө. Бул продукт торлору, үй бетиндеги баатырдагы сүрөттөрдү көрсөтүү же скевоморфтук ийилген ар кандай кызыктуу дизайн үчүн жакшы иштейт. Демону көрүңүз.
20. EleMents барагын ': target' аркылуу жаңыртыңыз
Simon Madine, HeRe улук веб-иштеп чыгуучу
CSS кадимки мааниде программалоо тили эмес, бирок JavaScript'ке кайтпай эле, акылдуу нерселерди жасай берсеңиз болот. Мисалы, : target псевдо-класс басылган шилтеменин максаты болгон элементтерге карата колдонулат.
Бул нерсени барактын абалын аныктоо үчүн, көптөгөн элементтерди камтыган ата-энени багыттоо үчүн жана шилтемелериңиз бир чыкылдатуу менен бардык балдардын көрүнүшүн жана жайгашуусун көзөмөлдөө каражаты болуп калат. Демону көрүңүз.
21. Кылдат анимациялар менен байланыш түзүңүз
Нил Реникер, дизайнер жана иштеп чыгуучу
CSS псевдоэлементтери :: мурун жана :: кийин CSS өтүүлөрү менен бирге, чычкан колдонуучуларына тымызын жооп кайтарган жагымдуу анимацияны иштете алат. Мисалы, псевдоэлементтин ичинде CSS жебесин куруп, псевдоэлементке өтүүнү колдонуңуз (өткөөл: бардык жеңилдиктер .15s;), андан кийин жөнөкөй макет өзгөрүүсүн кошуңуз : hover псевдо-класс (оңдоо сыяктуу) жогорку маржа). Демону көрүңүз.
22. 'will-animate' даярдануу
Пол Льюис, кодер жана Chrome иштеп чыгуучулар менен мамилелер тобунун мүчөсү
Эгер сиз колдонгон болсоңуз -webkit-transform: translateZ (0) баракчаларды сыйкырдуу кылып тезирээк жасоо үчүн, көптөгөн браузерлерде жөн гана жаңы композитор катмарын жараткан хак менен алмаштырылууда эрк-анимация. Көп өтпөй, сиз браузерге бир элемент жөнүндө өзгөртө турган нерсеңизди айта аласыз (анын орду, көлөмү, мазмуну же жылдыруу абалы) жана браузер капоттун астында туура оптимизацияны колдонот. Көбүрөөк маалымат.
23. Humanise киргизүү талаалары
Yaron Schoen, Адамдар үчүн түзүлгөн
Колдонуучулар өз ара байланышкан элементтерге тез анимацияларды кошуу интерфейсти эсептөө сезимин азайтат. Киргизүү талаалары менен, a коюңуз өткөөл чакыруу ичинде, ошондуктан сиз көңүл буруп же бурбасаңыз, анда жылмакай өткөөл болот.
киргизүү, textarea {-moz-өткөөл: бардык 0.2s жеңилдетүү; -o-өткөөл: бардык 0.2s жеңилдетүү; -webkit-өткөөл: бардык 0.2s жеңилдетүү; -ms-өткөөл: бардык 0.2s жеңилдетүү; өткөөл: бардык 0.2s жеңилдетүү;
24. CSS анимацияларын тындырып, ойнотуңуз
Вал Хед, дизайнер жана консультант
CSS анимациясын өзгөртүп, аны 'тындырып' жана 'ойной' аласыз анимация-ойноо абалы мүлк. Аны "тындырылды" деп койсоңуз, анимацияңыз өзгөрмөйүнчө токтойт анимация-ойноо абалы чейин чуркоо, мисалы, hover боюнча.
.animating_thing {анимация: spin 10s сызыктуу чексиз; анимациялык ойноо абалы: тындырылды; }. animating_thing: hover {animation-play-state: running; }
25. CSS өзгөрмөлөрүн колдонбоңуз
Дэйв Ши, дизайнер жана жазуучу
Акыры, CSS өзгөрмөлөрүн алабыз, мисалы, бир түстүн алтылык маанисин бир жолу жазып, стилдик баракчага шилтеме берүү үчүн. Бирок расмий мүнөздөмө сөзмө-сөз, синтаксистик татаалдыкты кошуп, функционалдык мүмкүнчүлүктөрдү сунуштайт жана көпчүлүк браузерлер тарабынан колдоого алынбайт. Sass кеңири популярдуулукка жеткен жана бажы функциялары сыяктуу күчтүү программалоо логикасы менен өзгөрмөлөрдүн чегинен чыккан жана / if операторунун билдирүүлөрүндө, официалдуу спекулиттер кыска мөөнөттө келип чыгат.
Бул мыкты кеңештер CSSке болгон көз карашыңызды жана анын веб иштеп чыгууда жана иштеп чыгууда көрсөткөн мүмкүнчүлүктөрүн жаңыртты деп үмүттөнөм. Түз эфирге чыгардан мурун, браузердин колдоосун текшерүү үчүн ушул ыкмалардын ар бирин кылдаттык менен текшерип көрүүнү унутпаңыз.
Сөздөр: Крейг Граннелл Иллюстрация: Майк Чипперфилд
Бул макала алгач 253-журналдын нетто чыккан.
