Рецепты CSS

Рецепты CSS

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

Проблема

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

 

Проблема

Трапеции — это еще более генерализованные фигуры, чем параллелограммы: у них только две параллельные стороны. Две оставшиеся могут быть наклонены под любым углом. Эти фигуры тради- ционно славятся сложностью создания с помощью чистого CSS, но при этом очень часто используются в веб-дизайне, особенно для оформления вкладок. Если разработчики не имитируют их посредством скрупулезно подготовленных фоновых изображений, то воссоздают с помощью прямоугольника с двумя треугольниками, сделанными из рамок, по бокам. Хотя эта техника экономит HTTP-запросы, которые могли бы понадобиться вследствие использования дополнительных изображений, и легко адаптируется к изменению размеров элементов, она все же далека от совершенства. Нам приходится создавать практически бесполезные псевдоэлементы, а кроме того, мы невероятно ограничены в вариантах стилизации. Например, попробуйте добавить рамку, фоновый узор или скругленные углы к такой вкладке.

 


В Cloud9  все открытые документы отображаются на вкладках в форме траgеций

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

Проблема

Срезание углов — это не только быстрый способ достичь цели, но и популярный вариант стилизации как в печатном дизайне, так и в веб-дизайне. Чаще всего он подразумевает обрезание одного или нескольких уголков контейнера под углом 45°. В последнее время, в связи с тем, что скевоморфизм начал сдавать позиции плоскому дизайну, этот эффект пользуется особенной популярностью. Когда углы срезаются только с одной стороны и каждый из них занимает 50% высоты элемента, это создает фигуру в форме стрелки, что также часто используется в оформлении кнопок и элементов навигации типа «хлебные крошки».

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


 Пример веб-сайта, где срезанный угол (нижний левый у полупрозрачного поля Find & Book) отлично вписывается в дизайн

 

Проблема


Обрезка изображений до ромбовидной формы — распространенный прием в визуальном дизайне, но реализовать его на CSS далеко не просто. На самом деле до недавнего времени это было практически невозможно.

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

Проблема

Параллелограммы — это расширенная версия прямоугольников: их стороны параллельны, но углы не обязательно прямые. В визуальном дизайне они часто используются для придания оформлению динамичности и передачи ощущения движения.
Давайте попробуем создать ссылку, оформленную с помощью CSS в стиле скошенной кнопки. Нашей отправной точкой будет обычная плоская кнопка с очень простым оформлением. Форму скошенного прямоугольника мы придадим ей с помощью трансформации  skew() , (о трансформациях в css я писал здесь) вот так:
transform: skewX(-45deg);
Однако в результате этого содержимое кнопки также исказилось, стало некрасивым и нечитаемым. Существует ли способ создавать скошенные контейнеры так, чтобы их содержимое при этом не перекашивалось?

Проблема

Вероятно, вы замечали, что любой квадратный элемент, для которого определено достаточно большое значение  border-radius , можно превратить в круг с помощью примерно такого CSS-кода:
background: #fb3;
width: 200px;
height: 200px;
border-radius: 100px; /* >= половины длины стороны */
Возможно, вы также замечали, что в подобной ситуации можно было бы указать любое значение радиуса больше  100px и все равно получить в результате круг. Причина объясняется в спецификации: Если сумма любых двух радиусов соседних рамок превышает размер поля рамки, пользовательские агенты должны пропорционально уменьшать используемые значениях всех радиусов рамки, чтобы наложения не происходило.
Однако часто бывает так, что указать точные значения ширины и высоты элемента невозможно, так как мы хотим, чтобы он подстраивался под свое содержимое, что может быть неизвестно наперед. Даже если мы проектируем статичный веб-сайт и его точное то содержимое определено заранее, не исключено, что в какой-то момент мы захотим модифицировать его или он будет отображаться с использованием резервного шрифта с другими метриками. В этом случае мы хотим, чтобы на выходе получался эллипс в ситуации, когда ширина и высота не равны между собой, и круг, когда они совпадают. Однако наш предыдущий код не способен обработать такой сценарий. Результирующая фигура для случая, когда ширина больше высоты, показана на рисунке. Можно
ли в принципе создавать эллипсы с помощью  border-radius , не говоря уже о том, чтобы делать их гибкими?

Проблема

Сделать вокруг изображения паспарту, состоящее из рамки и цветной области.

Решение

Паспарту называется картонная рамка для фотографии или рисунка. Использование паспарту зрительно увеличивает изображение, привлекает к нему внимание и делает картину более эффектной. Конечно, на веб-странице нет нужды имитировать подобную рамку, поэтому паспарту в данном случае будем называть цветную прямоугольную область вокруг изображения. На рисунке ниже  продемонстрирована фотография с паспарту.

Пример паспарту

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

Проблема

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

Как создать нечто подобное с помощью CSS? Возможно, у вас в голове сейчас звучит громкий крик: «border-image,  border-image, мы можем использовать  border-image , это больше не проблема!!!» Не так быстро, юный падаван. Вспомните, как на самом деле работает  border-image : по сути, это масштабирование девяти фрагментов. Вы разрезаете изображение на девять блоков и применяете их к углам и сторонам соответственно. Как с помощью  border-image нарезать изображение, чтобы воспроизвести пример с рисунка выше? Даже если мы потратим кучу времени и правильно разделим его для элемента конкретного размера с конкретной шириной рамки, оно не будет масштабироваться при изменении размера элемента. Проблема в том, что мы не собираемся всегда использовать в углах лишь определенные части изображения; то, какой фрагмент изображения будет отображаться в углу, зависит от размера элемента и ширины рамки. Попробуйте поэкспериментировать, и, скорее всего, вы поймете, что с  border-image это невозможно. Но что же тогда делать? Самый простой способ — использовать два элемента HTML: один, для которого фоном будет служить наша картинка с камнем, и второй — с белым фоном для области содержимого элемента:
HTML
<div class="something-meaningful"><div>
I have a nice stone art border,
don't I look pretty?
</div></div>
.something-meaningful {
background: url(stone-art.jpg);
background-size: cover;
padding: 1em;
}
.something-meaningful > div {
background: white;
padding: 1em;
}


Это решение хорошо работает и создает «рамку», показанную на рисунке, но требует наличия дополнительного элемента HTML. Таким образом, оно не оптимально: оно не только смешивает представление и структуру, но в определенных случаях изменить HTML-код  вообще невозможно. Существует ли способ реализовать то же самое с помощью одного элемента?

Проблема

Повторяющиеся геометрические узоры смотрятся мило, но бывают немного скучными. Вряд ли гдето в природе можно встретить узор, состоящий из идентичных повторяющихся плиток. Даже когда рисунок повторяется, он все равно содержит массу вариаций и случайностей. Взгляните на цветочное поле: хотя оно достаточно однородно, чтобы казаться нам красивым, все равно там присутствует достаточно бессистемности, чтобы вызывать интерес. Невозможно найти два абсолютно одинаковых цветка. Вот почему, когда мы пытаемся создавать фоновые узоры, выглядящие как можно более естественными, мы одновременно стараемся, чтобы «швов» между повторяющимися плитками было как можно меньше и они были как можно менее заметными, а это прямо противоречит нашему желанию сохранять небольшой размер файла.

 

Когда характерная черта — например, завиток в текстуре древесины — повторяется через равные интервалы, это сразу разрушает иллюзию природной случайности. Воспроизвести случайность — задача непростая, так как в CSS не предусмотрено никаких встроенных возможностей генерации случайных значений. Рассмотрим пример с полосами. Предположим, что мы хотим создать вертикальные полосы разных цветов и ширины (для простоты ограничимся четырьмя цветами) без каких-либо видимых «швов» между повторяющимися плитками. Первой мыслью может быть создание одного градиента со всеми четырьмя полосами, например, так:

background: linear-gradient(90deg, #fb3 15%, #655 0, #655 40%, #ab4 0, #ab4 65%, hsl(20, 40%, 90%) 0);
background-size: 80px 100%;


Как видно  повторения очевидны, так как шаблон воспроизводится каждые  80px (это значение  background-size ). Можно ли добиться чего-то лучшего?

 

Проблема

В предыдущем разделе мы узнали, как с помощью градиентов CSS создавать всевозможные полосы. Однако полосами фоновые узоры, да и любые другие геометрические рисунки, не ограничиваются. Часто у нас возникает необходимость создавать другие типы узоров: сетки, узор в горошек, шахматный узор и многие другие.
К счастью, градиенты CSS могут помочь и со многими из этих задач. С помощью градиентов CSS можно создать почти любой геометрический узор, хотя это и не всегда практично: если мы не будем соблюдать осторожность, то на руках у нас окажется безумный объем не поддающегося сопровождению кода. Создание узоров средствами CSS — это также одна из ситуаций, когда использование препроцессора CSS, например Sass оправданно. Это позволяет сократить количество повторений, так как чем сложнее становятся узоры, тем менее соответствует принципам DRY описывающий их CSS-код. В этом секрете мы сосредоточимся на создании самых простых и наиболее востребованных узоров.

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

Google+