Варианты декорирования блоков DIV с использованием CSS3

Круглые границы и тень с появлением CSS3 теперь можно описать следующим образом:

border-radius:10px;
box-shadow: 0px 0px 20px #777;

, где первые два числа - это смещение тени относительно самого элемента, а третье число - ширина или радиус тени.


В определении стиля для псевдокласса hover, который применяется в момент, когда курсор мыши находится над блоком div, изменены только параметры тени.

Закругление можно определить с каждого угла по-разному. Вот так это можно сделать только для левой стороны

border-radius:10px 0px 0px 20px;


Теперь прозрачность цвета можно задавать четвертым параметром новой функции rgba:

rgba(0,0,0,0.5);

и эту прозрачность получит только тот элемент, для стиля которого она определена, а не все его потомки, как случалось ранее со свойством opacity.


Если необходимо, чтобы при переполнении блока автоматически появлялась прокрутка, то сделать это можно следующим образом.

overflow : auto;  

Смещение тени

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

.css3-3 h2 {
	  background-color : #eee;
	  color : #777;
          text-align : center;
          margin-top : -10px;  
          margin-left : -10px;  
          margin-right : -10px;  
          border-radius:10px 10px 0px 0px;  
          border-bottom : 1px solid #ddd;
}


А сам пример демонстрирует, как выглядит смещенная тень:

box-shadow: 10px 10px 10px #777;


Эффект "прижимания" - результат манипуляции свойством margin слева и справа в определении стиля для псевдокласса hover.

Простейший вариант декорирования блока DIV путем размещения в качестве фонового изображения самого декора (справа, снизу).

background: 
	url(images/corner.png) 
	bottom right no-repeat;           


В момент, когда мышь находится над блоком, картинка изменяется.

А это еще один вариант декорирования с использованием изображения, но в этом случае оно явно размещается с использованием тэга img внутри блока div с тем, чтобы была возможность отрегулировать внешнее смещение.

.corner-decoration-2  img {
          margin-right : -11px;  
          margin-top : -11px;  
}


Смещать изображение необходимо, чтобы перекрыть границу блока DIV в верхнем правом углу самим изображением (исправьте 11 на 10, и станет понятно, о чем речь). Таким образом, можно добиться эффекта "загнутого уголка".