22.02.2012, 16:30

Стилизуем ссылку при помощи CSS


И так, всем привет. Меня зовут Артем. И в этой статье я расскажу вам как можно с помощью css немного украсить ваш сайт, а именно сегодня мы будем стилизовать ссылку.
Для начала я уже набросал простой код html страницы, вот он:
Код

<html> <!--начало страницы-->  
<head>
</head>
<body><!--главный контейнер где находиться наша ссылка-->
<br><br> <!--Двойной перевод строки-->
<a style="font-size:15px;" href="#">Отправить сообщение</a><!--наша ссылка которую будем изменять-->
</body> <!--/главный контейнер где находиться наша ссылка-->
</html> <!--/конец страницы-->

и вот как это выглядит в браузере



Приступим. Для начала создадим файл со стилями, пропишем ссылку на них и добавим соответствующий класс к ссылке
Код

<html> <!--начало страницы-->  
<head><!--контейнер со стилями-->  

<link type="text/css" rel="StyleSheet" href="style.css" /><!--ссылка на стили-->  
   
</head><!--/контейнер со стилями-->  
<body><!--главный контейнер где находиться наша ссылка-->  
<br><br> <!--Двойной перевод строки-->  

<a class="knopka" style="font-size:15px;" href="#">Отправить сообщение</a><!--наша ссылка которую будем изменять-->  

</body> <!--/главный контейнер где находиться наша ссылка-->  
</html> <!--/конец страницы-->  

Ну а сейчас начнем заполнять наш файл стилей. Я уже их составил и настроил как нужно, сейчас покажу весь код, и поясню где что находится.
Код

.knopka {/* наш класс с соответствующими параметрами */
text-align:center; /* выравнивание текста по центру */
padding:9px; /* отступы вокруг текста 9 пикселей */
/* градиент */
background: -moz-linear-gradient(top, #37c63b, #04940e);
  background: -webkit-gradient(linear, left top, left bottom,  
  color-stop(0%,#37c63b), color-stop(100%,#04940e));
  background: -webkit-linear-gradient(top, #37c63b, #04940e);
  background: -o-linear-gradient(top, #37c63b, #04940e);
  background: -ms-linear-gradient(top, #37c63b, #04940e);
  background: linear-gradient(top, #37c63b, #04940e);
/* градиент закрытие */
text-decoration:none; /* убираем стандартные эффекты у ссылки */
color: #ffffff; /* цвет текста */
   
  -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px; /* закругление углов у фона в 3 пикселя */
   
  text-shadow: 0px 1px 0px #12720a; /* цвет тени текста */
   
  border-top:1px solid #65d368; /* верхняя обводка */
  border-bottom:1px solid #1b9e24; /* нижняя обводка */
   
  box-shadow: 0px 0px 0px 1px #1e8415; /* тень блока в роли общей обводки */
}

.knopka:hover { /* класс с параметрами которые нужно выполнять при наведении на ссылку */
/* ну а дальше все также только цвет верхнего градиента делаем чуть светлее */
text-align:center;
padding:9px;

background: -moz-linear-gradient(top, #42d445, #04940e);
  background: -webkit-gradient(linear, left top, left bottom,  
  color-stop(0%,#42d445), color-stop(100%,#04940e));
  background: -webkit-linear-gradient(top, #42d445, #04940e);
  background: -o-linear-gradient(top, #42d445, #04940e);
  background: -ms-linear-gradient(top, #42d445, #04940e);
  background: linear-gradient(top, #42d445, #04940e);
text-decoration:none; color: #ffffff;
   
  -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;
   
  text-shadow: 0px 1px 0px #12720a;
   
  border-top:1px solid #65d368;
  border-bottom:1px solid #1b9e24;
   
  box-shadow: 0px 0px 0px 1px #12720a;
}


Вы заметили #42d445, #04940e два эти цветовых кода. Поясню, первый код это код верхнего градиента, второй нижний.

Сохраняем и смотрим что у нас получилось



Ну вот собственно и все, если есть какие то вопросы задавайте их в комментариях.



Источник/Автор: http://artem-malcov.ru/

Категория: HTML, CSS, JS, JQ | Добавил: frenkmalcov (22.02.2012) Просмотров: 1737 | Рейтинг: 4.0/8
Всего комментариев: 4
+1  
1 ШуРиК   (23.02.2012 09:25) [Материал]
Аватар пользователя
Норм)

+1  
2 Silver   (23.02.2012 11:45) [Материал]
Аватар пользователя
молодец ! полезно ok respect

+1  
3 PULLO   (25.02.2012 11:09) [Материал]
Аватар пользователя
хорошая и полезная статейка up

+1  
4 сумрачная-фея   (01.03.2012 08:26) [Материал]
Аватар пользователя
полезно

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]