- Метки урока:
- css
- web дизайн
Использование 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;}
Возможно, о некоторых стилях границ Вы узнали впервые. И это не странно, так как большинство из них практически не используются сегодня. С эволюцией вебдизайна исчезли некоторые из этих стилей границ.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.buildinternet.com
Перевел: Максим Шкурупий
Урок создан: 12 Марта 2009
Просмотров: 32030
Правила перепечатки
5 последних уроков рубрики "CSS"
-
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
-
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
-
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
-
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
-
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.