Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS » Урок CSS 27. Закладки с круглыми углами
Не нравится(-) 6 Нравится(+)
15-09-2011, 14:13 - OniX (Уроки CSS)
Урок CSS 27. Закладки с круглыми углами

Здравствуйте уважаемые посетители, журналисты и администраторы Российской школы CSS. Сегодня я представляю вам свой перевод замечательного урока Chris Coyier, в котором будет рассказано о создании красивых закладок (заголовков) с закругленными углами средствами CSS.
Итак, приступим к созданию.

В данном уроке не будут использоваться какие-либо изображения, так что понадобится только текстовый редактор. Рекомендую пользоваться Notepad ++. Как и в предыдущем уроке создаём в программе два чистых файла: index.html и style.css (в одной папке).
В код html страницы записываем стандартный начальный код для XHTML, содержащий ссылку на файл стилей (style.css):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Закладки с круглыми углами</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

Далее идет содержание страницы, которое включает в себя поле закладок и основное содержание. Закладки создаются маркированным списком:
<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>
  <div id="content">
      <h1>Российская школа CSS. Урок 27. Закладки с круглыми углами</h1>
  </div>

К файлу HTML мы вернемся в конце урока. Теперь по пунктам посмотрим, как нам создать необходимые закругления:
1. Без специальной обработки закладки выглядят так:
Пункты списка (черный цвет) являются блочными элементами (ul li), ссылки (красным) - строчными (а).
Урок CSS 27. Закладки с круглыми углами

2. Применяем атрибут float:
К блочным элементам применяем атрибут обтекания по левому краю (float:left).
Урок CSS 27. Закладки с круглыми углами

3. Делаем закладки одного размера:
Отменяем для блочных элементов все поля и отступы для придания закладкам одинакового размера.
Урок CSS 27. Закладки с круглыми углами

4. Отдельно:
Теперь посмотрим манипуляции с конкретной закладкой.
Урок CSS 27. Закладки с круглыми углами

5. Закругления:
Используем атрибуты CSS 3.0 (border-radius) для создания кругов рядом с закладкой
Урок CSS 27. Закладки с круглыми углами

6. Квадраты:
Используем два блока для создания квадратов внутри кругов
Урок CSS 27. Закладки с круглыми углами

7. Окрашиваем поля и блоки:
Задаем различные атрибуты заливки для блоков и закладок
Урок CSS 27. Закладки с круглыми углами

8. Цвета кругов и квадратов:
Квадратам задаем цвет такой же как у поля содержания, а кругам цвет фона активной закладки
Урок CSS 27. Закладки с круглыми углами

9. Порядок блоков:
Используем атрибут z-index для установления порядка кругов и квадратов
Урок CSS 27. Закладки с круглыми углами

10. Завершение:
Используем тот же алгоритм для пассивных закладок. Верхние углы закругляем атрибутом border-radius
Урок CSS 27. Закладки с круглыми углами


Теперь реализуем этот алгоритм на практике. Начинаем работу с файлом стилей style.css:
/*
=============================================================
© 2011 CSS-Tricks / Chris Coyier
© 2011 Российская школа CSS (Russian CSS School)

http://www.css-school.ru
Урок CSS №27. Закладки с круглыми углами
style.css - Набор стилей для урока
=============================================================
*/
body {
        background: #222;
    }
    #content {
        background:#fff;
        height: 400px;
          -webkit-border-radius: 15px;
          -moz-border-radius: 15px;
          border-radius: 15px;
    }
    
    .tabs {
        list-style: none;
        margin: 60px auto 0;
        width: 660px;
    }
        .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;
        }
        
h1 {
    width: 970px;
    margin: 0 auto;
    padding: 15px 0;
    color: #555;
}

.group:before,
.group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1;
}


Почти готово, осталось только сделать наши закладки активными. Выполнит это скрипт введенный между тегами head в index.html. Вот этот код:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script>
        $(function() {
            $("li").click(function(e) {
              e.preventDefault();
              $("li").removeClass("active");
              $(this).addClass("active");
            });
        });
    </script>


Вот и всё. Надеюсь урок оказался полезным и понятным для Вас. Скачать материалы урока и посмотреть демо можно на этой странице.
Спасибо за внимание!

Автор урока:CSS-Tricks / Chris Coyier (_http://css-tricks.com/14001-tabs-with-round-out-borders/)
Автор перевода: Илья Сальников, Российская школа CSS
Совместимость: Internet Explorer 8 - 9; Mozilla Firefox, Opera, Chrome, Safari.


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 19824 раз(а) и написали 6 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Июль 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!