Приемы оформления границ блока с помощью CSS

Однажды я уже как то касался темы форматирования блоков средствами CSS в статье 5 CSS Стилей для блока с фоном. Сегодня расскажу как благодаря CSS3 мы можем расширить свои возможности при оформлении блочных элементов страницы.

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

Мне хотелось бы поделиться некоторыми приемами стилизации границ, для получения различных эффектов оформления блоков. Экспериментируя с параметрами стиля вы  всегда сможете добиться желаемого результата, благо возможности CSS3 это нам позволяют.

Работая над стилями, по прежнему стоит помнить о том, что каждый браузер отображает по своему, все что мы делаем.  Например то как поддерживает CSS пресловутый Internet Explorer , начинает вызывать уже тошноту.  В других современных браузерах все выглядит просто и со вкусом.

1. Легкий Пресс

 
Обзовите этот эффект как хотите, я не стал умничать и назвал так «Легкий Пресс», потому что создается иллюзия легкой вдавленности  блока с содержимым  по отношению к основному, темному фону  страницы. Похожую технику описывал в   Эффект Высокой печати с CSS для текста, но в данном примере мы работаем с установкой цвета границ и тени, манипулируя параметром box-shadow в стиле. Тень для текста, это уже кому как надо.

CSS

#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;
}

Добавляем немного округлости углам в пункте border-radius и замечательный блок готов.
 

Легкая Тень

 
Отображение легкой тени, доcтигается установкой границ с оттенками серого цвета, то есть подбором основного цвета и непосредственно оттенков нижней границы блока в параметрах border-bottom. Этот метод уже хорош тем, что поддерживается практически всеми современными браузерами, да и в целом не напрягает глаз пользователя.

CSS

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

Прессованный

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

CSS

#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; 
}

Объемный

 
За основу этого метода стилизации границ, не особо заморачиваясь, взял стиль вывода цитат плагином «WP-Note», работу которого можно встретить почти в каждой статье моего блога.
Немного поэкспериментировал с параметрами стиля, закругленные углы приняли стальной отблеск, мягкая тень границ и замечательный блок для любого контента готов.

CSS

#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;
}

Вдавленные Линии

 
Идея конечно не нова, часто используется такая техника при создании списков и вертикальных меню. Хороший пример — блог уже знакомого нам Soh Tanaka. Достигается простым сочетанием верхней и нижней границ с различными оттенками цвета фона. Надо всегда иметь в виду, что first-child и last-child CSS селекторы не поддерживаются старыми браузерами. И это в настоящее время является занозой в заднице, для всех мастеров пытающихся идти в ногу со временем. Чтобы обойти этот косяк, вы можете использовать некоторые плагины JQuery, для поддержки старых браузеров. Хотя я считаю, что пора уже прекращать подстраиваться под тупорылые браузеры, пусть лучше они «ложатся под нас» ( мечтать не вредно ).

CSS

#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;}

Скошенные Границы

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

CSS

#beveled img {margin: 20px 20px 20px 0;}
img.light {
        outline: 1px solid #ddd;
 border-top: 1px solid #fff;
 padding: 10px;
        background: #f0f0f0;
}
img.dark {
        outline: 1px solid #111;
 border-top: 1px solid #555;
 padding: 10px;
        background: #333;
}

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

Программа для быстрого и удобного наложения различных эффектов на изображения, а также конвертации из одного формата в другой (с установлением качества сжатия) Image Effect позволяет накладывать эффекты в реальном времени без вызова каких-либо дополнительных окон.

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях: