Съдържание
- 01. Съчетайте изображенията с цветовите схеми на сайта
- 02. Споделяйте равномерно място в последния ред на мрежата
- 03. Създайте анимации на частици с кутия-сянка
- 04. Анимиране на многогранници с преобразувания
- 05. Master ’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. Подгответе се за ‘will-animate’
- 23. Полета за въвеждане на хуманизация
- 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. Направете модела на кутията разумен с „оразмеряване на кутията“
Сойер Холенсхед, разработчик и дизайнер на 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, отворен уеб адвокат
Тирето се приема за даденост в печат и някои разработчици използват тирета собственост онлайн, но малцина са наясно с други свойства, които осигуряват по-фин контрол. Ако не сте внимателни, получавате стълби за преноса, където тирета се използват през няколко реда. Общо правило е не повече от две подред, които можете да контролирате с помощта хифенатни-гранични линии. Също, hyphenate-limit-chars ви позволява да посочите минималната дължина на дума, която ще бъде тире, заедно с минималния брой знаци преди и след тирето.
10. Възползвайте се от режимите на писане
Дейвид Стори, отворен защитник на мрежата
Режимите на писане ви позволяват да определите посоката, в която текстът да тече. Някои източноазиатски текстове са написани вертикално, редове растат отдясно наляво, посочени с режим на писане: вертикален-rl (tb-rl в IE). Вертикалният текст всъщност не се използва в европейските системи за писане, но може да бъде полезен за заглавия на таблици, когато сте ограничили хоризонталното пространство.
11. Използвайте градиенти по необичайни начини
Рут Джон, дизайнер
Фоновите градиенти могат да изглеждат страхотно, когато се използват с граници и символи. Използвам както в моя блог, така и с препроцесор, мога да извикам комбинация с повторно използвания код, за да не го повтарям ръчно. Не изпадайте в суперлуди, защото градиентите могат да бъдат тежки за процесора. SCSS миксин за маркери от списък:
@mixin gradedBullet ($ color) {фоново изображение: линеен градиент (вляво, изсветляване ($ color, 15%) 10px, $ color 11px, $ color 20px, потъмняване ($ color, 15%) 21px, потъмняване ($ color , 15%) 30px, прозрачен 31px); }
12. Използвайте съвпадение на низове на връзки
Рут Джон, дизайнер
В моя блог използвах селектори на CSS атрибути със съвпадение на низове, за да оформя социални икони. Те се появяват в целия ми блог, понякога с текст, а понякога и без, но винаги с икона. За да оформя правилната връзка с правилната социална икона, използвам съвпадение на низове на href атрибут на котвата елемент. използвам *= така че href на котвата елементът трябва да съдържа само низа, който съм посочил.
/ * за всички социални връзки * / .social a: преди {display: inline-block; подложка вдясно: 30px; семейство шрифтове: ‘FontAwesome’;} / * Всяка конкретна връзка * / .social a [href * = "twitter"]: преди {content: " f099"; цвят: # 52ae9f;} .social a [href * = "github"]: преди {съдържание: " f09b"; цвят: # 5f2e44;} .social a [href * = "feed"]: преди {content: " 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 () и translateY () функции. По този начин в крайна сметка получавате a диагонал превод, за да преместите елементите от менюто на правилните позиции в кръга. Събитието за щракване, което затваря / отваря менюто, може да бъде обработено с помощта на 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;) и след това добавете проста промяна на оформлението към : задръжте псевдоклас (като изменяне margin-top). Вижте демонстрация.
22. Подгответе се за ‘will-animate’
Пол Луис, програмист и член на екипа за връзки с разработчиците на Chrome
Ако сте използвали -webkit-transform: translateZ (0) за да направят вашите страници по-магически по-бързи, хакът, който в много браузъри просто създава нов слой на композитор, се заменя с ще анимира. Скоро ще можете да кажете на браузъра какво планирате да промените за даден елемент (неговата позиция, размер, съдържание или позиция на превъртане) и браузърът ще приложи правилната оптимизация под капака. Повече информация.
23. Полета за въвеждане на хуманизация
Yaron Schoen, основател за създаването на хора
Добавянето на бързи анимации към елементи, с които потребителите взаимодействат, прави интерфейса по-малко изискан. С полета за въвеждане опитайте да поставите a обаждане за преход вътре, така че винаги, когато го фокусирате или дефокусирате, има плавен преход.
вход, текстова област {-moz-преход: всички 0.2s облекчаване; -o-преход: облекчаване на всички 0.2s; -webkit-преход: облекчаване на всички 0.2s; -ms-преход: всички 0.2s облекчаване; преход: всички 0.2s облекчаване;
24. Пауза и възпроизвеждане на CSS анимации
Вал Хед, дизайнер и консултант
Можете да поставите на пауза и да играете CSS анимация, като я промените анимация-игра-състояние Имот. Задаването му на „пауза“ спира анимацията ви на място, докато не я промените анимация-игра-състояние да се бягане, например при нанасяне на курсора на мишката.
.animating_thing {анимация: въртене на 10s линейно безкрайно; анимация-игра-състояние: пауза; }. animating_thing: hover {animation-play-state: running; }
25. Не използвайте CSS променливи
Дейв Ший, дизайнер и автор
Най-накрая получаваме CSS променливи, например да напишем шестнадесетичната стойност на даден цвят и да го препращаме през таблица със стилове. Но официалната спецификация е многословна, добавя синтактична сложност, предлага невероятна функционалност и до голяма степен не се поддържа от повечето браузъри. В епоха, в която Sass е широко популярен и надхвърля променливите с мощна програмна логика, като потребителски функции и if / else изявления, официалните спецификации се появяват далеч накратко.
Надяваме се, че тези най-добри съвети са подновили вашето виждане за CSS и възможностите, които той представлява в уеб разработката и дизайна. Не забравяйте да тествате старателно някоя от тези техники, за да проверите поддръжката на браузъра, преди да пуснете каквато и да е работа на живо.
Думи: Крейг Гранъл Илюстрация: Майк Чипърфийлд
Тази статия първоначално се появи в брой 253 на нетното списание.
