Рецепты CSS

Рецепты CSS

В этой категории вы найдете уроки по CSS, которые показывают нестандартное применение CSS для простых и не очень задач

Проблема

Так же как и люди, не все глифы хорошо уживаются вместе. Взять, например, символы f и i в большинстве шрифтов с засечками. Точка, принадлежащая символу i, часто налезает на верхний выносной элемент символа f, из-за чего эта пара выглядит некрасиво (первый пример на рисунке). Чтобы устранить это недоразумение, в дизайн шрифтов часто включают дополнительные глифы, называемые лигатурами. Это индивидуально разработанные пары и тройки глифов, которые программа набора текста автоматически подставляет, когда соответствующие символы находятся друг рядом с другом. Например, на рисунке вы видите несколько распространенных лигатур. Обратите внимание, насколько лучше они смотрятся, чем просто находящиеся рядом эквивалентные глифы.

Лигатуры в css

Также существуют так называемые дискретные лигатуры, которые разрабатываются ради стилистической альтернативы, а не потому, что с соответствующими символами связаны какие-то проблемы отображения, когда те стоят вплотную друг к другу. Однако в браузерах дискретные лигатуры никогда по умолчанию не используются (и это правильно), а зачастую не используются и обыкновенные лигатуры (а это уже ошибка). В действительности до недавнего времени единственным способом задействовать любую лигатуру было добавление в код эквивалентного символа Unicode: например,  fi для лигатуры fi. Но этот метод создает больше проблем, чем решает:
‰ очевидно, что разметку становится трудно читать и еще сложнее писать (попробуйте догадаться, что за слово кроется в шифре  define !);
‰ если текущий шрифт не включает символ для данной лигатуры, то результат начинает смахивать на анонимки из вырезанных газетных букв ‰ не для каждой лигатуры существует эквивалентный стандартизированный символ Unicode. Например, лигатуре ct не  соответствует никакой символ Unicode, и в любых шрифтах, включающих ее, этот символ должен быть помещен в блок Unicode PUA (Private User Area, область частного использования);
‰ это снижает доступность текста, в том числе для копирования и вставки, поиска и программ голосового чтения экрана. Многие приложения достаточно умны, чтобы правильно обрабатывать такие символы, но далеко не все. Поиск может даже сломаться в некоторых браузерах. Определенно, в наше время должен существовать способ получше!

Проблема

С веб-страницами, содержащими большое количество кода, такими как страницы документации или учебников, связаны собственные уникальные сложности стилизации. К элементам  <pre> и  <code>, с помощью которых мы оформляем код, применяется стилизация по умолчанию, определяемая пользовательским агентом, например такая:
pre, code {
font-family: monospace;
}
pre {
display: block;
margin: 1em 0;
white-space: pre;
}
Однако этого определенно недостаточно для того, чтобы учесть все уникальные трудности отображения кода. Одна из самых серьезных проблем заключается в том, что хотя табуляция идеально подходит для создания отступов в коде, очень часто ее стараются избегать, так как место, выделяемое браузером для отображения табуляции, по ширине равно целым восьми (!) символам. Посмотрите на рисунок — как плохо выглядят такие большие отступы и как бездарно расходуется место на экране:
наш код даже не поместился в свой контейнер!

Проблема

Когда несколько лет назад мы впервые получили псевдоклассы  :nth-child()/:nth-of-type() , одним из наиболее распространенных вариантов их применения стали таблицы с полосатой заливкой «зеброй». То, что раньше требовало написания кода на серверной стороне, сценариев на клиентской стороне или утомительного ручного кодирования, теперь может быть реализовано всего лишь несколькими строками кода:
tr:nth-child(even) {
background: rgba(0,0,0,.2);
}
Однако когда дело касается применения того же эффекта к строкам текста, а не к строкам таблицы, мы все так же бессильны. Этот прием особенно удобен для оформления фрагментов кода, так как позволяет делать код более читабельным. Многие разработчики прибегают к помощи JavaScript, оборачивая каждую строку в собственный  <div> , для того чтобы все так же иметь возможность использовать технику с  :nth-child(), часто абстрагируясь от этого безобразия с помощью функций подсветки синтаксиса. Но это не только субоптимально с точки зрения чистоты кода. JS не должен быть связан со стилизацией); слишком большое количество DOM-элементов может замедлить работу страницы, кроме того, это в любом случае хрупкое решение (что произойдет, если вы увеличите размер шрифта и потребуется дать текст с обтеканием?). Существует ли лучший способ?

Таблицы с полосатой заливкой -зеброй» всегда были популярны как в дизайне пользовательских интерфейсов (так оформлен список файлов в Mac OS X), так и в печатном дизайне, поскольку чередование фонового цвета помогает отслеживать взглядом содержимое длинной строки

 

Проблема

Необходимость разрывать строки средствами CSS обычно возникает при использовании списков определений, но также в некоторых других случаях. Чаще всего мы используем списки определений, потому что хотим быть добропорядочными кибергражданами и создавать правильную семантическую разметку, даже если визуальный результат, который нам требуется, — это всего лишь несколько строк с парами из имени и значения. Рассмотрим такую разметку:
HTML
<dl>
<dt>Name:</dt>
<dd>Lea Verou</dd>
<dt>Email:</dt>
<dd>Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.<;/dd>
<dt>Location:</dt>
а<dd>Earth</dd>
</dl>
Ожидаемый визуальный результат — простая стилизация, показанная на рисунке.
На первом шаге мы чаще всего применяем пару простых приемов CSS, например:
dd {
margin: 0;
font-weight: bold;
}
Как вставить разрыв строкиОднако поскольку  <dt> и  <dd> — это блочные элементы, в результате у нас получается нечто более напоминающее рисунок ниже, когда каждое имя и каждое значение отображаются на отдельной строке.

Последующие попытки обычно включают тестирование разных значений свойства  display для элемента  <dt>, <dd> или обоих, вплоть до абсолютно произвольных, по мере того как мы приходим в полное отчаяние. Но результат при этом чаще всего оказывается похожим на рисунок ниже.


Прежде чем рвать на себе волосы, проклиная всех богов CSS, или прощаться с идеей разделения понятий и переходить к модифицированию разметки, нужно все же оценить, нет ли способа сохранить ясность ума и высокие стандарты кодирования.

 

Проблема

Дизайнеры просто обожают выравнивание текста по ширине. Взглянув на шикарно оформленный журнал или книгу, вы увидите, что этот прием используется повсеместно. Однако в Сети выравнивание по ширине встречается гораздо реже, особенно в работах опытных дизайнеров. Почему же так происходит, учитывая, что  text-align: justify; присутствует в нашем арсенале со времен CSS 1?
Причина станет очевидной, если вы присмотритесь к «коридорам» на рисунке. Они создают увеличенные межсловные интервалы, призванные выровнять текст слева и справа. Это не только ужасно выглядит, но и ухудшает читабельность. В печатном дизайне выравнивание по ширине всегда сочетается с расстановкой переносов. Поскольку слова при этом разбиваются на слоги, дополнительных пробелов почти не требуется, и текст в результатевыглядит намного естественнее. До недавнего времени включить переносы на веб-странице было настолько сложно, что решение оказывалось хуже самой проблемы. Типичный сценарий предполагал использование кода на стороне сервера, код JavaScript, интерактивные генераторы, а также руки разработчика и безграничное терпение, чтобы расставить мягкие переносы ( &shy; ), подсказывая браузеру, в каком месте каждое слово может быть разорвано. Обычно такие трудозатраты себя не оправдывали, и дизайнеры прибегали к другому способу выравнивания текста.

расстановка переносов в тексте css

 

Проблема

Стилизация одного угла элемента (обычно верхнего правого или нижнего правого) так, чтобы он выглядел загнутым, с разной степенью реализма — это дизайнерский прием, не теряющий своей популярности вот уже много лет. Сегодня в его применении нам помогают несколько решений на чистом CSS, первое из которых было опубликовано еще в 2010 году мастером работы с псевдоэлементами Николасом Галлахером. Основной путь решения — добавить два треугольника в верхнем правом углу: один для представления загнутого уголка страницы и второй — закрывающий собой угол главного элемента. Эти треугольники чаще всего создаются с помощью проверенного временем трюка с рамкой. В свое время эти решения смотрелись весьма впечатляюще, но сегодня мы понимаем, насколько они ограниченны. В некоторых ситуациях они попросту неприменимы: ‰ когда фон, находящийся позади нашего элемента, не залит сплошным цветом, а оформлен с использованием узора, текстуры, фотографии, градиента или фонового изображения любого другого типа; ‰ когда мы хотим загнуть уголок под другим углом, отличным от 45°, или же добавить легкое вращение.

В нескольких ранних версиях дизаqна веб-саqта http://css-tricks.com загнутые уголки исgользовались для оформления верхнего правого угла полей, содержащих отдельные статьи сайта
Существует ли более гибкое решение для создания загнутых уголков с помощью CSS, которое не буксует в подобных случаях?

Проблема

Одним из первых вариантов использования полупрозрачных цветов было создание с их помощью фона поверх фотографий или других насыщенных деталями подложек, для того чтобы уменьшить контраст и улучшить читабельность текста. Результат получается довольно впечатляющим, но текст все равно бывает сложно прочитать, особенно если используются очень слабонасыщенные цвета и/или шумные подложки. Например, взгляните на рисунок на котором у главного элемента имеется полупрозрачный
белый фон.

Разметка выглядит так:
HTML
<main>
<blockquote>
"The only way to get rid of a temptation[…]"
<footer>—
<cite>
Oscar Wilde,
The Picture of Dorian Gray
</cite>
</footer>
</blockquote>
</main>
Здесь мы используем термин подложка» для обозначения той части страницы, которая находится под элементом и которая проглядывает сквозь его полупрозрачный фон.
А CSS-код выглядит так (для краткости все незначительные детали опущены):
body {
background: url("tiger.jpg") 0 / cover fixed;
}
main {
background: hsla(0,0%,100%,.3);
}


Как вы видите, текст прочитать очень сложно, так как изображение яркое и содержит множество деталей, а фоновый цвет непрозрачен только на 25%. Разумеется, мы могли бы улучшить читабельность, увеличив параметр альфа-канала в определении фонового цвета, но тогда эффект будет не таким интересным. В традиционном печатном дизайне эту проблему часто решают путем размывания фрагмента фотографии, находящегося прямо под текстовым контейнером. Размытые фоны не такие шумные, и, следовательно, текст поверх них читается намного проще. Поскольку эффект размытия дорогостоящ в терминах вычислительных ресурсов, в прошлом эту технику невозможно было использовать на веб-сайтах и в дизайне пользовательских интерфейсов. Однако графические процессоры непрерывно совершенствуются, а аппаратное ускорение становится доступным все в большем количестве разнообразных сценариев, поэтому сегодня мы сталкиваемся с эффектом размытия в оформлении интерфейсов довольно часто. За последние несколько лет нам довелось повстречать эту технику в новых версиях как Microsoft Windows, так и Apple iOS и Mac OS X.


Увеличение значения альфа-канала для фонового цвета решает проблему читабельности, но дизайн при этом теряет изюминку


В последние годы полупрозрачные пользовательские интерфейсы с размытой подложкой встречаются все чаще, так как нагрузка на системные ресурсы, которую оказывает эффект размытия, перестала быть чрезмерно дорогой (слева -  фрагмент интерфейса из Apple
iOS 8.1; справа - фрагмент интерфейса из Apple OS X Yosemite).

В CSS у нас также есть возможность размывать элементы. Для этого используется фильтр blur() , по сути, представляющий собой аппаратно ускоренную версию соответствующего примитива фильтрации из SVG, который всегда был доступен в этом формате для размывания SVG-элементов. Однако если мы напрямую применим фильтр  blur() в нашем примере, то размытию подвергнется весь элемент, что сделает его еще менее читабельным. Существует ли способ применить эффект размытия только к подложке элемента (то есть к части фона, находящейся позади нашего элемента)?

 

Проблема

Добавление цветового тона к изображению в оттенках серого (или к изображению, преобразованному в оттенки серого) — популярный и элегантный способ придания визуального единообразия группе фотографий, выполненных в совершенно непохожих стилях. Часто этот эффект применяется статически и убирается по событию  :hover и/или при других вариантах взаимодействия с изображением. Традиционно мы создаем две версии изображения в графическом редакторе и добавляем немного простого CSS-кода, задача которого — подменять одну версию другой. Этот подход работает, но он раздувает исходный код и требует дополнительных HTTP-запросов, а сопровождать такой веб-сайт — это настоящая головная боль. Представьте, что было принято решение изменить цвет, использующийся для создания этого эффекта. Вам придется перебрать все изображения и создать для каждого новую монохромную версию! Другие подходы включают наложение полупрозрачного цвета поверх изображения или изменение степени непрозрачности изображения и наложение его на подложку сплошного цвета. Однако это не настоящий тон: в таком решении не только цвета изображения не преобразуются в оттенки целевого цвета, но и существенно снижается контрастность.

Этот эффект используется для оформления фотографий лекторов. Полноцветное изображение оказывается при наведении указателя мыши и переводе фокуса на выбранный элемент
Также существуют сценарии, превращающие изображения в элемент  <canvas> и применяющие тон средствами JavaScript. При этом действительно получается реальное тонированное изображение, но решение работает очень медленно и накладывает множество ограничений. Согласитесь, было бы намного проще и удобнее применять цветовые тона к изображениям прямо в коде CSS?

Проблема

Свойство  box-shadow прекрасно работает, когда нам требуется тень, отбрасываемая прямоугольником или любой другой фигурой, которую можно создать с помощью border-radius (несколько примеров вы найдете здесь). Однако от него гораздо меньше пользы, когда мы работаем с псевдоэлементами или другими полупрозрачными вариантами декорирования, потому что  box-shadow бессовестно игнорирует прозрачность. Приведу несколько примеров:‰ полупрозрачные изображения, фоновые изображения и рамки, созданные с применением  border-image (например, винтажная рама с позолотой); ‰ штрихпунктирные рамки, рамки с точечным пунктиром и полупрозрачные рамки без фона (или со значением  background-clip , отличным от  border-box ); ‰ облачко с текстом, указатель для которого создан с помощью псевдоэлемента; ‰ скошенные углы, аналогичные тем, которые мы учились делать в секрете "Как срезать углы на css"; ‰ большинство эффектов загнутого уголка, включая описанный далее в этой
главе; ‰ контуры, создаваемые с помощью  clip-path , например ромбовидные изображения из секрета «Как сделать ромб на css».

 Элементы, стилизованные с помощью CSS, с которыми использование box-shadow теряет всякий смысл (здесь применяется значение свойства box-shadow, равное 2px 2px 10px rgba(0,0,0,.5))
Существует ли решение для подобных случаев или нам придется вообще отказаться от использования теней?

Проблема

Один из наиболее часто задаваемых вопросов относительно свойства  box-shadow, которые я получаю на веб-сайтах с вопросами и ответами, — как создать тень только с одной стороны (или, реже, только с двух). Быстрый поиск по  http://stackoverflow.com возвращает около тысячи результатов по данному запросу. И ничего удивительного, ведь отображение тени только с одной стороны создает более утонченный, но настолько же реалистичный эффект. Часто потерявшие надежду разработчики даже отправляют сообщения в список рассылки рабочей группы CSS, запрашивая создание новых свойств вроде  box-shadow-bottom,которые могли бы обеспечить такой результат. Однако подобные эффекты уже возможны при умном использовании старого доброго свойства  box-shadow, которое мы все знаем и любим.

Как сделать тень с одной стороны

Поиск по сайту

Google+