Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа 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"scriptcode"><!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"scriptcode"><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"scriptcode">/*
=============================================================
© 2011 CSS-Tricks / Chris Coyier
© 2011 Российская школа CSS (Russian CSS School)

http://css-school.ru
Урок CSS №27. Закладки с круглыми углами
style.css"scriptcode">    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"scriptcode">Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



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

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

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

«    Июль 2019    »
ПнВтСрЧтПтСбВс
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!