Использование CSS границ для привлечения внимания

В последнее время я заметил, что большинство топовых дизайнеров используют очень простые технические приемы. Именно взаимодействие таких простых приемов делают дизайн неповторимым. В данной статье мы рассмотрим очень эффективный, но при этом простой метод использования CSS границ.

Границы имеют большое значение, и не все это осознают. Потратив всего несколько минут, можно существенно улучшить дизайн. Такие маленькие свойства как стиль, цвет, жирность способны подчеркнуть любой элемент страницы, или же подогнать под фоновое изображение.

Сделайте ячейку заметной

Взгляните на эти 2 ячейки. У первой нет границ, а у второй есть тонкая темная граница.

Создается такое впечатление, что вторая ячейка больше цепляет внимания, не правда ли? И заметьте, что цвет границы немного отличается от цвета фона. Вот где скрывается ключ!

Эта маленькая разница помогает второй ячейке выделяется из окружающего содержимого. Внешняя граница отделяет ячейку от страницы, но при этом не портит внешний вид.

Реальные примеры

В Интернете существует множество классных примеров реализации таких границ. Я продемонстрирую Вам несколько примеров очень популярных сайтов. Цвета для каждого примера прилагаются.

Администраторская панель Wordpress 2.7

Уведомления Facebook

Youtube "Что нового"

Вход в Gmail

Разные типы границ

У Вас есть множество вариантов оформления границ в CSS. Давайте вспомним о них, так как я уверен, что Вы в основном пользуетесь "solid".

Нет {border:none;}

Есть {border: solid;}

Двойная {border: double;}

Углубление {border: groove;}

В точку {border: dotted;}

Тире {border: dashed;}

Вдавленная {border: inset;}

Выпуклая {border: outset;}

Ребристая {border: ridge;}

Возможно, о некоторых стилях границ Вы узнали впервые. И это не странно, так как большинство из них практически не используются сегодня. С эволюцией вебдизайна исчезли некоторые из этих стилей границ.