Как сделать вкладки в форме трапеций

Оцените материал
(0 голосов)

Проблема

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

 


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

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

 

Решение

Если бы существовала комбинация двумерных трансформаций, позволяющая создавать трапециевидные фигуры, то мы могли бы просто применить вариацию решения из секрета «Параллелограммы» и покончить с этим. К сожалению, такой комбинации не существует.
Однако вообразите вращение прямоугольника в физическом, трехмерном мире. Чаще всего получившаяся фигура, благодаря перспективе, в двумернойпроекции выглядит именно как трапеция. И этот эффект можно имитировать в CSS с помощью трехмерного вращения:
transform: perspective(.5em) rotateX(5deg);
На рисeyrt видно, что в результате получается трапеция. Разумеется, так как мы применили трехмерную трансформацию ко всему элементу, искажение распространилось и на текст тоже. Трехмерные трансформации невозможно «отменять» внутри элемента так, как мы делали это с двумерными трансформациями (то есть посредством противоположной трансформации).

Отменить трехмерную трансформацию на внутреннем элементе технически возможно, но чрезвычайно сложно. Следовательно, единственный практический способ воспользоваться преимуществом трехмерных трансформаций для создания трапеции — применить трансформацию к псевдоэлементу, по аналогии с подходом, который мы применили для параллелограммов
.tab {
position: relative;
display: inline-block;
padding: .5em 1em .35em;
color: white;
}
.tab::before {
content: ''; /* Чтобы сгенерировать поле */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #58a;
transform: perspective(.5em) rotateX(5deg);
}
Как видно, это позволяет создать простейшую трапециевидную фигуру. Но остается нерешенной еще одна проблема. Когда мы применяем трансформацию, не устанавливая значение transform-origin , элемент поворачивается в пространстве вокруг своего центра.

Следовательно, его габариты на двумерной проекции, которую мы видим на экране, меняются сразу в нескольких аспектах,: он становится шире и немного смещается вверх, его высота чуть-чуть сокращается и т. п. Все это создает сложности в проработке дизайна.
Для того чтобы получить больший контроль над размерами элемента, можно определить свойство transform-origin: bottom; — оно фиксирует основание элемента при повороте его в пространстве. Отличие от предыдущего варианта вращения вы видите на рисунке ниже

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


Вместо этого давайте увеличим размер элемента посредством еще одной трансформации, для того чтобы в случаях, когда трехмерные трансформации не поддерживаются, отменялись вообще все изменения формы объекта. Немного поэкспериментировав, можно убедиться, что небольшого масштабирования по вертикали (то есть трансформации  scaleY() ) — около 130% — достаточно, чтобы компенсировать потерянное пространство. Конечный результат и резервное решение показаны ниже.

Сейчас результат визуально эквивалентен тому, который дает нам описанная выше старая добрая техника, основанная на рамках, — однако новый синтаксис намного более емкий. Превосходство данной техники становится очевидным, когда вы начинаете применять стилизацию ко вкладкам. Например, взгляните на следующий код, в котором мы определяем стили для вкладок:
nav > a {
position: relative;
display: inline-block;
padding: .3em 1em 0;
}
nav > a::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #ccc;
background-image: linear-gradient(
hsla(0,0%,100%,.6),
hsla(0,0%,100%,0));
border: 1px solid rgba(0,0,0,.4);
border-bottom: none;
border-radius: .5em .5em 0 0;
box-shadow: 0 .15em white inset;
transform: perspective(.5em) rotateX(5deg);
transform-origin: bottom;
}


Как вы видите, мы определили фоны, рамки, скругленные углы и тени для полей — и все это сразу заработало безо всяких плясок с бубнами! Кроме того, всего лишь изменив значение  transform-origin на  bottom left или  bottom right, мы можем получить вкладки, скошенные соответственно влево или вправо! Несмотря на все ее добродетели, идеальной данную технику все же не назовешь. У нее есть один крупный недостаток: угол наклона сторон зависит от ширины элемента. Поэтому при работе с содержимым переменной длины получить трапеции с одинаковыми углами становится очень сложно. И все же описанная техника прекрасно подходит для элементов, включающих лишь небольшие вариации ширины, таких как навигационное меню. При определении таких элементов различия почти не заметны.

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/trapezoid-tabs

Десерт на сегодня – ускоренное видео снегопада. Досмотрите до конца!

Прочитано 891 раз Последнее изменение Понедельник, 06 марта 2017 13:37
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

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

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

Google+