Перейти к содержанию
IPSGuru.ru - Сообщество веб администраторов

Оформления границ


Severniy

Рекомендуемые сообщения

  • Администраторы

С помощью CSS мы можем расширить свои возможности при оформлении блочных элементов страницы.

1.png

#press {
	background: #222;
	color: #555; text-shadow: 0px 2px 3px #171717;
	box-shadow: 0px 2px 3px #555;
	-webkit-box-shadow: 0px 2px 3px #555;
	-moz-box-shadow: 0px 2px 3px #555;
        border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

2.png

#shadow { 
	border: 1px solid #D6D3D3;
	border-bottom: 2px solid #C4C2C2;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px; 
}

3.png

#pressed {
	color: #E6E0E0;
	background: #111;
	border: 1px solid #000;
	border-right: 1px solid #353535;
	border-bottom: 1px solid #353535;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px; 
}

4.png

#note {
       background-color: #EEF;
       color: #4D4B4B;
          border: 1px solid #999999; 
       border-radius: 10px 10px;
       -moz-border-radius: 10px 10px;
       -webkit-border-radius: 10px 10px;
       box-shadow: 2px 2px 3px #999;
      -webkit-box-shadow: 2px 2px 3px #999;
      -moz-box-shadow: 2px 2px 3px #999;
}

5.png

#indented ul{
	margin: 20px 0; padding: 0; 
	list-style: none;
}
#indented ul li {
	border-top: 1px solid #333; 
	border-bottom: 1px solid #111;
}
#indented ul li:first-child {border-top: none;}
#indented ul li:last-child {border-bottom: none;}
#indented ul li a {
	padding: 10px;	
	display: block;
	color: #fff;
	text-decoration: none;
}
#indented ul li a:hover {background: #111;}

 

  • Лайк 2
  • Ого 1
Ссылка на комментарий

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйтесь. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти
  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...