Программирование - это просто
Advertisement
Главная arrow Web-программирование arrow Уроки CSS arrow Уроки web-программирования. CSS: Закругление углов.
18.04.2024 г.
Главное меню
Главная
Интернет магазин
Программные продукты
Биржевые роботы
Искусственный интеллект
Математика и информатика
1С:Предприятие
Уроки C#
Уроки Delphi
Уроки программирования
Web-программирование
Дизайн и графика
Компьютер для блондинок
Исходники
Статьи
Платный раздел
Рассказы про компьютеры
Хитрости и секреты
Системный подход
Размышления
Наука для чайников
Друзья сайта
Excel-это не сложно
Все о финансах
.
Уроки web-программирования. CSS: Закругление углов. Печать E-mail
Автор megabax   
15.06.2010 г.

Урок 13. Управление шрифтами в CSS New Page 1

Уроки web-программирования. CSS: Закругление углов.

Сегодня мы при помощи CSS оформим текст в  рамке с закругленным углами. Вот так:

 

Тема сегодняшнего урока: «CSS: Закругление углов.

 

Для начала создадим HTML файл:

<html>

<head>
<title>Пример CSS файла. Закругление углов</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>

<body>
<div class="round_div">
<em class="tl"><b>•</b></em>
<em class="bl"><b>•</b></em>
<em class="tr"><b>•</b></em>
<em class="br"><b>•</b></em>
<p>Пример использования CSS.<br />
Урок CSS. Закругление углов</p>
</div>
</body>

</html>

В нем у нас имеется тэг div внутри которого мы и разместили текст.  Тэг • выводит специальный знак в виде кругляшка. Он то и создаст закругленные края.

Теперь перейдем к файлу styles.css:

.round_div {
position:relative;
width:220px;
background:#0072B9;
color:#FFFFFF;
}

.tl, .bl, .tr, .br {
position:absolute;
width:20px;
height:20px;
color:#0072B9;
background:#FFFFFF;
overflow:hidden;
z-index:1;
}

.tl {top:0; left:0;}
.bl {bottom:0; left:0;}
.tr {top:0; right:0;}
.br {bottom:0; right:0;}
 

.tl b {left:-8px;}
.tr b {left:-25px;}
.bl b {left:-8px; top:-17px;}
.br b {left:-25px; top:-17px;}


.round_div em b {
position:absolute;
font:150px Arial;
color:#0072B9;
line-height:40px;
font-weight:normal;
}


.round_div p {
position:relative;
z-index:10;
padding:5px 10px;
}

Немного комментариев к коду. Сначала мы задаем размеры и цвет блока round_div. Затем задаем размеры и цвет для "кругляшков":

.tl, .bl, .tr, .br {
position:absolute;
width:20px;
height:20px;
color:#0072B9;
background:#FFFFFF;
overflow:hidden;
z-index:1;
}

Обратите внимание, что здесь цвет фона и текста поменян места относительно блока round_div.

Еще мы используем свойство overflow, оно задает режим отображение текста, который не входит. Вот возможные значения этого свойства6

  • Visible. Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
  • Hidden. Отображается только область внутри элемента, остальное будет скрыто.
  • Scroll. Всегда добавляются полосы прокрутки.
  • Auto. Полосы прокрутки добавляются только при необходимости.
  • Inherit. Наследует значение родителя.

Далее мы задаем координаты расположения углов:

.tl {top:0; left:0;}
.bl {bottom:0; left:0;}
.tr {top:0; right:0;}
.br {bottom:0; right:0;}

.tl b {left:-8px;}
.tr b {left:-25px;}
.bl b {left:-8px; top:-17px;}
.br b {left:-25px; top:-17px;}

и, наконец, стиль самого текста:

.round_div em b {
position:absolute;
font:150px Arial;
color:#0072B9;
line-height:40px;
font-weight:normal;
}

.round_div p {
position:relative;
z-index:10;
padding:5px 10px;
}
Последнее обновление ( 15.06.2010 г. )
 
« След.   Пред. »
 
© 2024 Программирование - это просто
Joomla! - свободное программное обеспечение, распространяемое по лицензии GNU/GPL.
Русская локализация © 2005-2008 Joom.Ru - Русский Дом Joomla!
Design by Mamboteam.com | Powered by Mambobanner.de
Я принимаю Яндекс.Деньги