Использование CSS Рамок

Я давно заметил, что многие приемы, которые используют топовые веб дизайнеры, очень простые. Весь секрет отличного дизайна заключается лишь в том, что нужно знать где применить и как сочетать те или иные приемы. Сегодня я хочу рассмотреть один очень простой, но очень эффективный прием в веб дизайне — CSS рамки (css borders).

Многие люди даже не осознают то, что рамки сильно влияют на дизайн сайта (блога). Вы можете улучшить ваш дизайн, потратив на это всего несколько минут. Такие незначительные параметры, как weight (толщина), style (стиль) и color (цвет), имеют большое влияние на то, хотите ли вы выделить какой то объект или же хотите слить его с задним фоном.

Делаем бокс более заметным

Посмотрите на эти два бокса. Вы заметили, что у первого нет рамки, а у второго есть тонка, темная рамка.

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

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

Примеры из сети

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

Дашборд WordPress 2.7

Facebook

YouTube

Gmail

Разные типы рамок

У вас есть большой выбор стилей CSS рамок. Вот примеры кодов некоторых из них.

Пустая {border:none;}

Сплошная {border: solid;}

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

Грув  {border: groove;}

Точки {border: dotted;}

Линии {border: dashed;}

Инсет {border: inset;}

Аутсет {border: outset;}

Ридж {border: ridge;}

Вспомним 90'е

Вы, наверно, только что открыли для себя несколько новых видов рамок. Эмм, стоп! Есть причина, по которой многое из этого больше не встречается. Так как веб дизайн стал более изящным, дни, когда использовали inset, outset и ridge прошли.

Когда дело доходит до HTML/CSS дизайна, простота всегда лучше. Удивляйте людей типографией (шрифтами), разметкой и цветовой схемой. Используйте «плоские» рамки: dotted, solid, dashed — сейчас они в моде =). Другие типы рамок придадут ужасный «ретро» стиль 90х.