Создание скошенных вкладок с использованием трехмерных трансформаций CSS3

6 ноября 2015 | Опубликовано в css | Нет комментариев »

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

Демонстрация работы

Код HTML

<p>Trapezoid</p>
<p class="tab">Trapezoid tab</p>

Код CSS

/** * Простой способ создания трапеций с помощью трехмерных трансформаций */

p {
position: relative;
display: inline-block;
padding: 1em;
margin: 2em;
}

p::before {
content: ''; /* Для создания формы */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: skyblue;
transform: perspective(4px) rotateX(1deg);
}
p.tab::before {
/* Совет о скруглении углов */
border-radius: 10px 10px 0 0;
}

После этого мы подумали, почему бы не сделать из этой идеи пример создания вкладок? Мы создали демонстрацию работы, и заметили, что если изменить значение свойства начала трансформации, получатся другие интересные формы вкладок:

Демонстрация работы

Код HTML

<!-- Этот код HTML только для демонстрации работы. Не используйте несколько главных элементов -->

<nav>
	<a href="#">Home</a>
	<a href="#" class="selected">Projects</a>
	<a href="#">About</a>
</nav>
<main>
	Content area
</main>

<nav class="left">
	<a href="#">Home</a>
	<a href="#" class="selected">Projects</a>
	<a href="#">About</a>
</nav>
<main>
	Content area
</main>
<nav class="right">
	<a href="#">Home</a>
	<a href="#" class="selected">Projects</a>
	<a href="#">About</a>
</nav>
<main>
	Content area
</main>

Код CSS

/** * Скошенные вкладки с помощью трехмерных трансформаций */

body { padding: 50px; }

nav {
	position: relative;
	z-index: 1;
	white-space: nowrap;
}

nav a {
	position: relative;
	display: inline-block;
	padding: 1.5em 1.5em 1em;
	color: inherit;
	text-decoration: none;
	margin: 0 -7px;
} 

nav a::before,
main {
	border: .1em solid #aaa;
}

nav a::before {
	content: ''; /* To generate the box */
	position: absolute;
	top: 0; right: 0; bottom: .5em; left: 0;
	z-index: -1;
	border-bottom: none;
	border-radius: 10px 10px 0 0;
	background: #ddd;
	box-shadow: 0 2px hsla(0,0%,100%,.5) inset;
	transform: perspective(5px) rotateX(2deg);
	transform-origin: bottom;
}

nav.left a {
	padding: 1.5em 2em 1em 1em;
}

nav.left a::before {
	transform-origin: bottom left;
}

nav.right a {
	padding: 1.5em 1em 1em 2em;
}

nav.right a::before {
	transform-origin: bottom right;
}

nav a.selected {
	z-index: 2;
}

nav a.selected::before {
	margin-bottom: -1px;
	border-top-width: 1px;
}

nav a.selected::before,
main {
	background: #eee;
}
main {
	display: block;
	margin: -8px 0 30px -15px;
	padding: 1em;
	border-radius: 3px;
}

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

Надеемся, Вам понравилась эта идея, и она пригодится Вам в работе. Проверено в браузерах Chrome, Firefox, Safari, но для корректного отображения может понадобиться добавить свойства с приставками производителей, Internet Explorer версии 9, с помощью обходного пути с использованием Modernizr, и Internet Explorer версий 10 и 11.

Автор урока Lea Verou

Перевод — Дежурка

Смотрите также:

Опубликовано в css, ноября 6, 2015
Метки: css, css3, верстка, урок css, урок css3, урок верстка

�

Коментарии запрещены.

Создание скошенных вкладок с использованием трехмерных трансформаций CSS3

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые