Рецепты CSS

Рецепты CSS

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

Проблема

Полоса прокрутки — главный способ указать, что элемент включает больше содержимого, чем видно на экране. Однако очень часто они бывают неуклюжими и отвлекают внимание пользователя, поэтому разработчики современных операционных систем стремятся их упрощать, зачастую даже полностью скрывают полосы прокрутки с экрана до тех пор, пока пользователь не начинает активно взаимодействовать с элементом, поддерживающим прокрутку. Хотя сегодня полосы прокрутки используются все реже (пользователи обычно прокручивают содержимое с помощью жестов), указание на то, что внутри элемента больше содержимого, чем видно в данный момент на экране, — чрезвычайно полезная информация, и ее рекомендуется ненавязчиво добавлять даже к тем элементам, с которыми пользователь в настоящее время не взаимодействует. Дизайнеры-проектировщики пользовательского взаимодействия, разрабатывавшие Google Reader, клиент для чтения RSS-лент от Google (сейчас этот проект уже закрыт), нашли очень элегантный способ указания на наличие дополнительного


содержимого: если элемент содержит больше данных, чем видно на экране,сверху и/или снизу врезки отображается легкая тень.


Однако для того чтобы добиться этого эффекта в Google Reader, разработчикам пришлось добавить немало сценариев. Было ли это действительно необходимо или тот же эффект можно реализовать на чистом CSS?

Проблема

В статье  «Как сделать эффект лайтбокса » мы познакомились со способом отвлечения внимания от фрагментов веб-приложения посредством их затемнения с помощью полупрозрачной черной подложки. Но если страница содержит большое количество деталей, то затемнять ее приходится очень сильно, для того чтобы обеспечить достаточный контраст с отображающимся поверх текстом или привлечь внимание к световому коробу или другому элементу. Более элегантный способ, заключается в том, что мы размываем все остальное, за исключением подсвеченного элемента, в дополнение к затемнению или вместо него. Кроме того, это создает более реалистичный эффект глубины, имитируя то, как наше зрение воспринимает объекты, находящиеся физически ближе к нам, когда мы на них фокусируемся. Однако реализовать этот эффект куда сложнее. До появления спецификации Filter Effects это было вообще невозможно, и даже с использованием фильтра  blur() задача остается непростой. К чему привязывать размывающий фильтр? Или мы должны применить его ко всему, за исключением определенного элемента? Если мы применим его к элементу <body> , то будет размыто все содержимое страницы, включая элемент, к которому мы хотим привлечь внимание. Ситуация очень похожа на ту, которую мы рассматривали в статье «Эффект матированного стекла», однако прибегнуть к тому же решению здесь мы не можем, так как позади нашего диалоговогоокна может находиться все что угодно, а не только фоновое изображение. Что же делать?

Проблема

Нередко возникает необходимость затемнить все содержимое позади элемента с помощью полупрозрачной темной подложки, для того чтобы подчеркнуть данный элемент пользовательского интерфейса и привлечь к нему внимание пользователя. Например, этот эффект часто используется для создания «световых коробов» или лайтбоксов  и «экскурсий» по интерфейсу. В самой распространенной технике реализации роль затемняющего занавеса играет новый элемент HTML, к которому применено немного стилизации CSS, как в следующем
фрагменте кода:
.overlay { /* Для затемнения */
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.8);
}
.lightbox { /* Элемент, к которому мы хотим привлечь внимание */
position: absolute;
z-index: 1;
/* [остальные стили] */
}


Подложка затеняет все содержимое позади того элемента, к которому мы хотим привлечь внимание.  .lightbox получает более высокое значение  z-index , для того чтобы этот элемент выводился поверх подложки. Это, конечно, прекрасно, но все же данное решение требует дополнительного элемента HTML, то есть реализовать его с помощью чистого CSS невозможно. Не самая большая проблема, но по возможности нам все же хотелось бы избежать этого неудобства. К счастью, в большинстве случаев это возможно.

Проблема

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

Проблема

Если вы интересуетесь вопросами взаимодействия с пользователем, то наверняка слышали о законе Фиттса. Впервые предложенный американским психологом Полом Фиттсом (Paul Fitts) еще в 1954 году, закон Фиттса гласит, что время, необходимое для быстрого перемещения в целевую область, представляет собой логарифмическую функцию отношения между расстоянием до цели и шириной цели. Его наиболее часто используемая математическая формули ровка выражается как

, где T — затраченное время, D — расстояние до центра цели, W — ширина цели, а a и b — константы. Хотя графические интерфейсы пользователя в то время еще не существовали, закон Фиттса распространяется в том числе и на координатно-указательные устройства, а сегодня стал самым известным принципом человеко-машинного взаимодействия (Human-Computer Interaction, HCI). Возможно, поначалу это может казаться чем-то удивительным, но помните, что закон Фиттса в большей степени относится к человеческим моторным навыкам, чем к конкретному аппаратному обеспечению. Очевидное следствие данного закона состоит в том, что чем больше цель, тем проще в нее попасть. Следовательно, расширение области, реагирующей на щелчки мыши (области попадания), вокруг небольших элементов управления, с которыми в противном случае может быть сложно взаимодействовать (а увеличить их невозможно), зачастую повышает удобство использования.Это становится тем важнее, чем большую популярность завоевывают сенсорныеэкраны. Никому не нравится тыкать пальцем в экран десять раз подряд, чтобы попасть в эту мерзкую маленькую кнопочку, и все же подобные ситуации возникают каждый день. В других сценариях мы хотим, чтобы элемент выдвигался, когда пользователь подводит указатель мыши к краю окна, — как, например, в случае с автоматически скрываемым заголовком, который выскальзывает из-под верхней кромки при приближении указателя мыши. Это также включает необходимость увеличения области попадания (но только в одном направлении). Возможно ли это средствами чистого CSS?

Проблема

Назначение указателя мыши — не просто показывать, в какой точке экрана находится курсор, но также сообщать пользователю, какие действия ему доступны. Об этой распространенной практике проектирования пользовательских интерфейсов настольных приложений в веб-приложениях часто забывают. Но вина лежит не только на разработчиках. Во времена CSS 2.1 у нас попросту не было доступа ко многим встроенным курсорам. В основном мы использовали свойство  cursor для указания, что на чем-то можно щелкнуть, дополняя его курсором  pointer , или же иногда добавляли всплывающие подсказки с помощью курсора  help . Некоторые также применили курсоры  wait и  progress вместо или в дополнение к указателю загрузки. Но этим дело и ограничивалось. И хотя в CSS User Interface Level 3  мы получили целую пачку новых встроенных курсоров, большинство разработчиков продолжают в этом вопросе придерживаться старых привычек. Как это часто бывает при работе над взаимодействием с пользователем, вы в действительности не осознаете существования проблемы до тех пор, пока не сталкиваетесь с решением. Позвольте мне показать вам эти решения!

Проблема

Хотя это не самый распространенный эффект, иногда возникает необходимость вывести короткую строку текста вдоль дуги окружности. Но, сталкиваясь с таким требованием, мы осознаем, что помощи от 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 применять другие стили к определенным символам?

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

Google+