Рецепты CSS

Рецепты CSS

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

Проблема

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

Проблема

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

 При использовании подобных эффектов очень легко позабыть о доступности текста, так что никогда не ленитесь тестировать степень контрастности оформления
на оптических иллюзиях. Если вам уже известны используемые трюки, то создавать такие эффекты очень легко, однако они не всегда поддаются простому обратному декодированию посредством инструментов разработки. Секрет посвящен созданию подобных эффектов, для того чтобы вы никогда
больше не задавались вопросом: «Как вообще это работает?!»

Проблема

Дизайнеры — большие привереды. Мы всегда пытаемся переделать все под себя и очень щепетильны в реализации идей, добиваясь максимального соответствия с видением и стремясь создавать интуитивно понятные и простые в использовании дизайны. Значения по умолчанию редко бывают достаточно хороши для нас. Подчеркивание текста — одна из тех вещей, которые нам очень нравится подгонять под свой вкус. Хотя стандартное подчеркивание также работает неплохо, чаще всего оно смотрится слишком навязчиво, не говоря уже о том, что в разных браузерах оно визуализируется по-разному. И несмотря на то чтоподчеркивание текста доступно нам со времен зарождения Сети, у нас никогда не было возможности настраивать его вид. Даже появление CSS дало нам только обыкновенный выключатель — использовать подчеркивание или нет: text-decoration: underline; Как обычно, когда нам не предоставляют нужных инструментов, мы сами придумываем трюки. У нас не было возможности настраивать вид подчеркивания текста, поэтому мы начали имитировать его с помощью рамок — не исключено, что это вообще самый первый трюк CSS,  придуманный дизайнерами:
a[href] {
border-bottom: 1px solid gray;
text-decoration: none;
}
Несмотря на то что, имитируя подчеркивание текста с помощью  border-bottom, мы можем управлять цветом, толщиной и стилем линии, это решение далеко от идеала. Как видно на рисунке, такие «подчеркивания» находятся слишком далеко от текста — даже под нижними выносными элементами глифов! Можно было бы попытаться решить проблему, определив для ссылок свойство  display со значением  inline-block и меньшую величину  line-height , например так:
display: inline-block;
border-bottom: 1px solid gray;
line-height: .9;
Это работает — подчеркивание становится ближе к тексту, — но перенос слов на новую строку при этом работает неправильно, как демонстрирует риснок ниже.


Современный дизайнер мог бы попробовать применить для имитации подчеркивания внутреннюю тень, определяемую посредством  box-shadow : box-shadow: 0 -1px gray inset; Однако при этом возникают те же сложности, что и с border-bottom , за исключением того, что подчеркивание отображается чуть ближе к тексту. Существует ли другой способ получать правильные, гибкие и поддающиеся тонкой настройке подчеркивания?

Проблема


Несколько милых амперсандов в шрифтах, доступных по умолчанию на большинстве компьютеров. Слева направо: Baskerville, Goudy Old Style, Garamond, Palatino (все курсивные)
Вы наверняка заметили, что в книгах, посвященных типографике, скромный амперсанд всегда превозносится до небес. Никакой другой символ не придает тексту столько элегантности, сколько изящный амперсанд. Целые веб-сайты посвящают поиску шрифтов с самыми красивыми амперсандами. Однако найденный шрифт необязательно будет тем, какой вы хотели бы использовать для всего остального текста. В конце концов, действительно красивый и элегантный эффект в заголовках создается контрастом между симпатичным шрифтом без засечек и прелестными, замысловатыми амперсандами из шрифтов с засечками. Веб-дизайнеры осознали это уже довольно давно, но техника достижения этого эффекта остается кустарной и трудоемкой. Чаще всего амперсанд приходится оборачивать в  <span> , делая это либо посредством сценария, либо вручную,

например:
HTML
HTML <span class="amp">&amp;</span>
Затем мы задаем желаемые настройки стиля шрифта только к классу  .amp :
.amp {
font-family: Baskerville, "Goudy Old Style",
Garamond, Palatino, serif;
font-style: italic;
}
Это прекрасно работает, и пример оформления текста до и после применения данного решения вы можете видеть на рисунке. Однако это грязная техника, а в некоторых ситуациях, когда у нас нет возможности с легкостью редактировать разметку HTML (например, при использовании CMS), ее и вовсе применить невозможно. Нельзя ли просто приказать CSS применять другие стили к определенным символам?

Проблема

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

Лигатуры в css

Также существуют так называемые дискретные лигатуры, которые разрабатываются ради стилистической альтернативы, а не потому, что с соответствующими символами связаны какие-то проблемы отображения, когда те стоят вплотную друг к другу. Однако в браузерах дискретные лигатуры никогда по умолчанию не используются (и это правильно), а зачастую не используются и обыкновенные лигатуры (а это уже ошибка). В действительности до недавнего времени единственным способом задействовать любую лигатуру было добавление в код эквивалентного символа Unicode: например,  &#xfb01; для лигатуры fi. Но этот метод создает больше проблем, чем решает:
‰ очевидно, что разметку становится трудно читать и еще сложнее писать (попробуйте догадаться, что за слово кроется в шифре  de&#xfb01;ne !);
‰ если текущий шрифт не включает символ для данной лигатуры, то результат начинает смахивать на анонимки из вырезанных газетных букв ‰ не для каждой лигатуры существует эквивалентный стандартизированный символ 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, которое не буксует в подобных случаях?

TemplateMonster

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

Связной трэвел

tezeks

Google+