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

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

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

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

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

У этой ячейки нет границы
У этой ячейки есть тонкая 1 пиксельная темная граница

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

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

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

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

Администраторская панель 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;}

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.buildinternet.com
Перевел: Максим Шкурупий
Урок создан: 12 Марта 2009
Просмотров: 31514
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 13 Марта 2009 01:27
    Стас
    Спасибо...вот вроде в CSS работаю частенько но вот про некоторые из стилей только что узнал...ну просто я использую или solid или dashed в основном...=)
  • 13 Марта 2009 14:28
    Дмитрий
    Спасибо за полезный материал! Тоже узнал новые стили)))
  • 25 Марта 2009 19:10
    manbizon
    Отличный материал! Спасибо.
  • 11 Апреля 2009 21:59
    slayer
    Я их часто юзаю, т.к. это просто и со вкусом! Сенкс за урок!
  • 5 Мая 2009 20:56
    ABCD
    А как сделать скруглённую рамку?
  • 8 Мая 2009 17:00
    ABCD
    Рассказали очевидные стили, а о скруглении ни слова...
    • 10 Августа 2013 17:54
      Віталій Гордій
      border-radius
  • 24 Июля 2009 23:36
    Макс
    Вход в Gmail, сделан както по другому, там плавный переход границ
^ Наверх ^