Как сделать табы с закруглёнными углами

Конечно же, новые технологии позволяют создавать разные эффекты. Закруглённые углы — это далеко не новинка, если раньше их приходилось делать при помощи изображений, то сейчас вам достаточно написать пару строк (которые будет содержать описание для border-radius), чтобы браузер понял как правильно отобразить форму.

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

И так, вот как они будут выглядеть.Табы

1. Для начала создадим простой HTML код, который опишет наш таб с закладками. Как правило, это простой ненумерованный список с ссылками.

<ul class="tabs group">
	<li class="active"><a href="#one">Первая закладка</a></li>
	<li><a href="#two">Вторая закладка</a></li>
	<li><a href="#three">Третья закладка</a></li>
	<li><a href="#four">Четвёртая закладка</a></li>
</ul>

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

3. Теперь весь процесс необходимо описать при помощи CSS стилей, заметьте мы не будем использовать ни одного изображения.

.tabs li {
/*Создаём список, расположенный по горизонтали */
float: left;

/* Псевдо элементы могут быть расположены внутри */
position: relative;
}
.tabs a {
/* Делаем ссылки такой ширины, какой им необходимо, а также блокируем уровни*/
float: left;
padding: 10px 40px;
text-decoration: none;

/* Устанавливаем любые цвета, какие вы захотите */
color: black; /*Цвет текста*/
background: #ddc385; /*Цвет фона*/

/* Делаем 2 верхних угла закруглёнными */
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.tabs .active {
/* Активная закладка должна быть расположена поверх всех */
z-index: 3;
}
.tabs .active a {
/* Придаём новые цвета, когда закладка активна */
background: white;
color: black;
}
/*Описываем дополнительные псевдо-классы*/
.tabs li:before, .tabs li:after,
.tabs li a:before, .tabs li a:after {
/* Заметьте,что все псевдо элементы расположены внизу*/
position: absolute;
bottom: 0;
}
/* Только первая, последняя и активная закладка нуждаются в псевдо-классах*/
.tabs li:last-child:after,   .tabs li:last-child a:after,
.tabs li:first-child:before, .tabs li:first-child a:before,
.tabs .active:after,   .tabs .active:before,
.tabs .active a:after, .tabs .active a:before {
content: "";
}
.tabs .active:before, .tabs .active:after {
background: white;

/* Располагаем квадраты под кружочками */
z-index: 1;
}
/* Описываем квадраты */
.tabs li:before, .tabs li:after {
background: #ddc385;
width: 10px;
height: 10px;
}
.tabs li:before {
left: -10px;
}
.tabs li:after {
right: -10px;
}
/* Описываем кружочки */
.tabs li a:after, .tabs li a:before {
width: 20px;
height: 20px;
/* Кружочки должны быть кружочками */
-webkit-border-radius: 10px;
-moz-border-radius:    10px;
border-radius:         10px;
background: #222;

/* Располагаем кружочки поверх квадратов */
z-index: 2;
}
.tabs .active a:after, .tabs .active a:before {
background: #ddc385;
}
/* Первая и последняя закладка должны иметь другой внешний цвет фона */
.tabs li:first-child.active a:before,
.tabs li:last-child.active a:after {
background: #222;
}
.tabs li a:before {
left: -20px;
}
.tabs li a:after {
right: -20px;
}

Это всё. Урок был написан Крисом Койером. Скачать все необходимые файлы можно тут.



Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *