Только CSS: закладки с круглыми углами

Скругленные углы очень просто сделать с помощью правила border-radius. Но оно ограничивает нас формой. А что если нам нужно соединить одну форму с другой с помощью внешних круглых углов. Вот как выглядит результат графически:

 

Разметка HTML

Кончено, в пространстве веб можно визуализировать что угодно. Самый плохой сценарий - использовать изображения. Мы же будем использовать семантическую разметку HTML и код CSS. Вот как выглядит структура закладок:

	<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="#three">Четыре</a></li> 
	</ul>

Класс active указывает на активную закладку.

 

Решение

Нам нужна форма, которая будет торчать наружу из элемента закладки. Чтобы получить ее и сохранить семантичность разметки, используем псевдо элементы. Их можно добавить к структуре страницы прямо из CSS. Каждый элемент имеет два псевдо элемента -  :before и :after. В конечном счете мы будем использовать четыре псевдо элемента  на закладку, так как она состоит из двух элементов - пункта списка и ссылки.

Визуализируем решение шаг за шагом, без кода.

1) Исходное состояние

Пункты списка являются блочными элементами, а ссылки - строчными. Наш код будет выглядеть так:

2) Используем float

Делая пункты списка плавающими, мы выстраиваем их в линию один рядом с другим и обрезаем размер до размера ссылки внутри.

3) Одинаковый размер

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

4) Только один

Сфокусируемся на одном элементе:

5) Круги

Используем два наших доступных псевдо элемента для размещения кругов внизу слева и справа от закладки.

6) Квадраты

А два других псевдо элемента используем для создания маленьких квадратов.

7) Задаем цвета для содержания и закладок

Активная закладка и содержание имеет одинаковый цвет фона.

8) Цвета для псевдо элементов

Квадраты имеют цвет активной закладки, круги имеют цвет фона размещаемого позади активной закладки.

9) Размещение элементов

Используем свойство z-index для помещения кругов поверх квадратов для формирования нужной формы границы.

10) Отключаем рамки

Рамки использовались только для иллюстрации, и в действительности они не нужны.

11) Завершаем работу

Используем тот же метод для внешних закладок и закругляем верхние углы с использованием свойства border-radius.

 

CSS

А вот и код CSS, который реализует решение:

		.tabs li { 
		  /* Делаем горизонтальную строку */
			float: left; 
			
			/* Теперь псевдо элементы могут быть абсолютно позиционированы внутри */
			position: relative; 
		}
		.tabs a { 
		  /* Делаем его блочным и так ширины, как ему требуется */
		  float: left; 
		  padding: 10px 40px; 
		  text-decoration: none;
		  
		  /* Цвета по умолчанию */ 
		  color: black;
		  background: #ddc385; 
		  
		  /* Скругляем только верхние углы */
		  -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;
		}

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/oVqTrNeXWqw/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Только CSS: закладки с круглыми углами | | 2012-06-19 12:03:37 | | Статьи Web-мастеру | | Скругленные углы очень просто сделать с помощью правила border-radius. Но оно ограничивает нас формой. А что если нам нужно соединить одну форму с другой с помощью внешних круглых углов. Вот как | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: