Содержание
- 01. Сопоставьте изображения с цветовыми схемами сайта.
- 02. Распределите пространство в последней строке сетки равномерно.
- 03. Создание анимации частиц с помощью box-shadow.
- 04. Анимируйте многогранники с помощью преобразований.
- 05. Master ’calc ()’ для позиционирования
- 06. Сделайте коробочную модель разумной с помощью 'box-sizing'
- 07. Вертикальное центрирование с помощью CSS
- 08. Настройте таргетинг на банк связанных объектов.
- 09. Контрольные расстановки переносов
- 10. Воспользуйтесь преимуществами написания режимов.
- 11. Необычным образом используйте градиенты.
- 12. Используйте сопоставление строк в ссылках.
- 13. Заставьте FOUT работать на вас
- 14. Изучите SVG для фона
- 15. Привлекайте внимание пользователей с помощью трехмерных переходов.
- 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. Создание анимации частиц с помощью box-shadow.
Ана Тюдор, программист и фанатик математики
Путем смешивания тень коробки с помощью математики и Sass вы можете строить 2D-кривые, имитировать 3D-движение и создавать сумасшедшие анимации частиц, которые все будут принимать за холсты! Смотрите демо и еще одно.
04. Анимируйте многогранники с помощью преобразований.
Ана Тюдор, программист и фанатик математики
Вы, наверное, видели многоугольники на чистом CSS, созданные с границами, но у нас есть гораздо более мощный инструмент в преобразовать имущество. Объединение и применение преобразований к вложенным элементам позволяет нам создавать сложные многоугольники с фоном изображения или границами и прозрачным внутренним пространством. Используя 3D-преобразования, мы можем объединить эти 2D-формы в многогранники и заставить тела сливаться, разворачиваться, взрываться или рекомбинировать способом, который легко принять за WebGL. Посмотреть демо.
05. Master ’calc ()’ для позиционирования
Ана Тюдор, программист и фанатик математики
я любил calc () с того момента, как я это обнаружил. Он полезен для приручения полей, отступов или размеров и может быть спасением при использовании для позиционирования или изменения размера фона, внутренних градиентов или преобразований и в сочетании не только с теми же старыми единицами, но и с новыми и интересными единицами просмотра.
06. Сделайте коробочную модель разумной с помощью 'box-sizing'
Сойер Холленсхед, разработчик и дизайнер 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 ($ color) {background-image: linear-gradient (left, lighten ($ color, 15%) 10px, $ color 11px, $ color 20px, darken ($ color, 15%) 21px, darken ($ color , 15%) 30px, прозрачный 31px); }
12. Используйте сопоставление строк в ссылках.
Рут Джон, дизайнер
В своем блоге я использовал селекторы атрибутов CSS с сопоставлением строк для стилизации значков социальных сетей. Они появляются в моем блоге, иногда с текстом, а иногда без него, но всегда со значком. Чтобы стилизовать правильную ссылку с правильным значком социальной сети, я использую соответствие строки на href атрибут якорного элемента. я использую *= Итак href в элементе привязки должна содержаться только указанная мной строка.
/ * для всех социальных ссылок * / .social a: before {display: inline-block; отступ справа: 30 пикселей; font-family: ’FontAwesome’;} / * Каждая конкретная ссылка * / .social a [href * = "twitter"]: перед {content: " f099"; цвет: # 52ae9f;}. социальный a [href * = "github"]: before {content: " f09b"; color: # 5f2e44;} .social a [href * = "feed"]: before {content: " f09e"; цвет: # b47742;}
13. Заставьте FOUT работать на вас
Джейсон Пэменталь, директор H + W Design
Интернет построен на том условии, что он должен доставлять контент, даже если браузер не может его отобразить. Медленная загрузка веб-шрифтов может расстраивать, 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. Привлекайте внимание пользователей с помощью трехмерных переходов.
Эмиль Бьёрклунд, веб-разработчик inUse
Использование трехмерных преобразований и использование z-размер в пользовательских интерфейсах может быть действительно полезным, особенно для скрытия / отображения или сворачивания / развертывания контента. В таких ситуациях также довольно легко вернуться к двухмерному переходу или вообще отказаться от него. Это область, в которой небольшое прогрессивное улучшение может иметь большое значение.
16. Создавайте круговые меню с помощью CSS и математики.
Сара Суэйдан, фронтенд-разработчик
Круглые меню популярны в мобильных приложениях, и вы можете использовать преобразования и переходы CSS для создания простого кругового меню. Это меню можно изменить и настроить для создания меню, открывающегося вверх или вниз. В CSS нет прямого способа перевести элемент по диагонали, но вы можете использовать значение радиуса круга, на котором вы хотите расположить элементы, и применить простое математическое правило для вычисления значений горизонтального и вертикального смещения, передаваемых в translateX () а также translateY () функции. Таким образом, вы получите диагональ перевод, чтобы переместить пункты меню в правильные позиции на круге. Событие щелчка, которое закрывает / открывает меню, может быть обработано с помощью JavaScript, или вы можете сделать еще один шаг и получить меню только для CSS, используя взлом флажка CSS. В своей демонстрации я использую JavaScript и HTML5 classList API, который поддерживается не во всех браузерах, поэтому вам нужно будет просмотреть демонстрацию в современном браузере, чтобы заставить ее работать, или раскомментируйте код jQuery вместо использования classList API. код.
См. Демонстрацию и полное руководство. Пример взлома CSS Checkbox.
17. Анимируйте ссылки при наведении курсора
Пол Ллойд, дизайнер взаимодействия в The Guardian
На состояния наведения не следует полагаться, чтобы заставить действие работать или предоставить важную информацию, но вы все равно можете улучшить интерфейсы для пользователей, использующих мышь. На 24ways.org мы показываем заголовки статей, когда вы наводите курсор на ссылки в предыдущей / следующей навигации. Это было достигнуто путем создания ::после псевдоэлемент, содержащий сгенерированный контент, полученный из значения данные- атрибут, с примененным переходом CSS, чтобы он отображался в поле зрения при наведении курсора. Посмотреть демо.
18. Создавайте простые анимации по ключевым кадрам.
Пол Ллойд, дизайнер взаимодействия в The Guardian
На 24ways.org мы добавили анимированные угловые откидные створки к сводкам, которые открываются при наведении курсора. Это было сделано путем объединения @keyframes правило со свойством анимации, изменяя положение фонового изображения для получения анимации на основе спрайтов. Хитрость заключается в том, чтобы объявить количество кадров в анимационном спрайте с помощью шаги () значение. Посмотреть демо.
19. Создавайте плавающие 3D-эффекты с тенями.
Кэтрин Фарман, разработчик Happy Cog
Недавний проект требовал плавающей фотографии продукта с круглой тенью под ним, создающей трехмерный эффект выскакивания за пределы экрана. Тень использует несколько функций CSS3: border-radius альфа-прозрачность и тень коробки. Он хорошо работает для продуктовых сеток, демонстрации изображений на главной странице или любого причудливого дизайна со скевоморфным уклоном. Посмотреть демо.
20. Обновите элементы страницы с помощью ’: target’
Саймон Мадин, старший веб-разработчик HeRe
CSS не является языком программирования в обычном смысле слова, но вы все равно можете делать умные вещи, не прибегая к JavaScript. Например, :цель псевдокласс применяется к элементам, которые являются целью нажатой ссылки.
Вы можете использовать это, чтобы определить состояние страницы, настроить таргетинг на родительский элемент, содержащий множество элементов, а ваши ссылки станут средством управления внешним видом и компоновкой всех дочерних элементов одним щелчком мыши. Посмотреть демо.
21. Обеспечьте обратную связь с помощью тонкой анимации
Нил Реникер, дизайнер и разработчик
Псевдоэлементы CSS ::перед а также ::после наряду с переходами CSS, может включать восхитительную анимацию, которая обеспечивает тонкую обратную связь для пользователей мыши. Например, создайте стрелку CSS внутри псевдоэлемента, примените переход к псевдоэлементу (переход: все легкость входа .15s;), а затем добавьте простое изменение макета в : hover псевдокласс (например, изменение верхняя граница). Посмотреть демо.
22. Приготовьтесь к "одушевлению"
Пол Льюис, программист и член команды разработчиков Chrome
Если вы использовали -webkit-transform: translateZ (0) чтобы волшебным образом сделать ваши страницы быстрее, хак, который во многих браузерах просто создает новый слой композитора, заменяется на оживлять. Вскоре вы сможете сообщить браузеру, что вы планируете изменить в элементе (его положение, размер, содержимое или положение прокрутки), и браузер применит правильную оптимизацию под капотом. Больше информации.
23. Гуманизируйте поля ввода
Ярон Шон, основатель Made For Humans
Добавление быстрой анимации к элементам, с которыми взаимодействуют пользователи, делает интерфейс менее компьютерным. В полях ввода попробуйте поставить переходный звонок внутри, поэтому всякий раз, когда вы фокусируетесь или расфокусируете его, переход будет плавным.
input, textarea {-moz-transition: все 0.2s замедление; -o-transition: все задержки на 0,2 с; -webkit-transition: все задержки на 0,2 с; -ms-transition: все задержки на 0,2 с; переход: все ослабление 0,2 с;
24. Приостановить и воспроизвести анимацию CSS.
Вал Хед, дизайнер и консультант
Вы можете "приостановить" и "воспроизвести" CSS-анимацию, изменив ее состояние воспроизведения анимации имущество. При установке значения "пауза" анимация останавливается, пока вы не измените состояние воспроизведения анимации к Бег, например при наведении.
.animating_thing {анимация: бесконечное линейное вращение 10 секунд; состояние воспроизведения анимации: приостановлено; }. animating_thing: наведите указатель мыши {состояние воспроизведения-анимации: работает; }
25. Не используйте переменные CSS.
Дэйв Ши, дизайнер и автор
Наконец-то мы получили переменные CSS, например, чтобы один раз записать шестнадцатеричное значение цвета и ссылаться на него через таблицу стилей. Но официальная спецификация многословна, добавляет синтаксическую сложность, предлагает недостаточную функциональность и практически не поддерживается большинством браузеров. В эпоху, когда Sass широко популярен и выходит за рамки переменных с мощной логикой программирования, такой как пользовательские функции и операторы if / else, официальная спецификация оказывается очень короткой.
Надеюсь, эти главные советы обновили ваше представление о CSS и возможностях, которые он представляет в веб-разработке и дизайне. Не забудьте тщательно протестировать любой из этих методов, чтобы проверить поддержку браузера, прежде чем начинать работу.
Слова: Крейг Граннелл Иллюстрация: Майк Чипперфилд
Эта статья впервые появилась в 253 выпуске сетевого журнала.
