Уважаемые пользователи сайта, рад что и
мне довелось написать урок, долго не буду уделять время на приветствие,
начнем.
В этом уроке речь пойдет о закруглении углов с помощью CSS. Примером может служить кнопка "Найти", в блоке "Поиск" .
Данный эффект сделать очень легко начинаем с прописывание классов CSS:
Code
.knopka
{background:#e3e3e3; border-top-left-radius:20px;
border-top-right-radius:20px; border-bottom-left-radius:20px;
border-bottom-right-radius:20px;width:100px;padding:4px;
padding-left:32px;border:1px solid #e7e7e7}
.knopka a
{font-family:Tahoma; font-size:11px; color:#666666; font-weight:bold;
text-shadow: 1px 0px 0px #fff;text-decoration:none;}
.knopka a:hover {color:#68a511;}
А теперь будем разбираться более подробно:
Code
.knopka(это основной класс кнопки) {background:#e3e3e3(Фоновый цвет);
border-top-left-radius:20px(закругления верхнего левого угла на 20
пх);border-top-right-radius:20px(закругления верхнего правого угла на 20
пх);border-bottom-left-radius:20px(закругления нижнего левого угла на
20 пх);border-bottom-right-radius:20px(закругления нижнего правого угла
на 20 пх) ;}
Code
.knopka(класс родителя) a(подкласс, тоесть все ссылки находящиеся в
классе:knopka будут принимать этот стиль) {font-family:Tahoma(Шрифт
текста); font-size:11px(Размер текста); color:#666666(Цвет текста);
font-weight:bold(насыщенность шрифта); text-shadow: 1px 0px 0px
#fff;(тень на шрифте, белого цвета) text-decoration:none;(нет
подчеркивание у ссылок)}
Code
.knopka(класс родителя) a:hover(под класс "a" hover означает наведения
на под класс к которому он относиться) {color:#68a511(цвет шрифта при
наведении на него курсором);}
Код самой кнопки:
Code
<div class="knopka"><a href="http://well-cs.ru/">Well-CS.Ru</a></div>
Наглядный пример показать несмогу, так-как не могу пользоваться редактором страниц, но на скриншоте все видно:)
15:49 Иконки групп