Красивый div блок css: Красивое оформление блоков на сайте – Как сделать красивую тень для блока с помощью CSS. (8 примеров)

Красивые информационные блоки на CSS3

.info_box {  

margin:10px 0px 10px;  

font-size:13px;  

line-height:18px;  

position:relative;  

-moz-box-shadow:0 1px 1px rgba(0,0,0,0.1);  

-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);  

box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);  

}  

.info_box_content {  

text-shadow:1px 1px 1px white;  

padding:18px 43px 17px 66px;  

min-height:35px;  

}  

.warning {  

border:1px solid #E0B1B1;  

}  

.warning .info_box_content {  

color:#AD7676;  

background:#FFD9D5;  

border:1px solid #FCEEEC;  

-moz-box-shadow:inset 0 0 45px #f0bfba;  

-webkit-box-shadow:inset 0 0 45px #F0BFBA;  

box-shadow:inset 0 0 45px #F0BFBA;  

}  

.warning::before {  

width:17px;  

height:17px;  

background:url(/img/sprite_ico_box.png) no-repeat;  

}  

.note {  

border:1px solid #B9DBB6;  

}  

.note .info_box_content {  

color:#7EA57B;  

background:#DFF7DD;  

border:1px solid #F1F9F0;  

-moz-box-shadow:inset 0 0 45px #cbe5c9;  

-webkit-box-shadow:inset 0 0 45px #CBE5C9;  

box-shadow:inset 0 0 45px #CBE5C9;  

}  

.note::before {  

width:19px;  

height:14px;  

background:url(/img/sprite_ico_box.png) no-repeat 0 -17px;  

}  

.nice {  

border:1px solid #E2E2BA;  

}  

.nice .info_box_content {  

color:#ADA771;  

background:#F9F9DC;  

border:1px solid #FBFBEF;  

-moz-box-shadow:inset 0 0 45px #efefc0;  

-webkit-box-shadow:inset 0 0 45px #EFEFC0;  

box-shadow:inset 0 0 45px #EFEFC0;  

}  

.nice::before {  

width:22px;  

height:20px;  

background:url(/img/sprite_ico_box.png) no-repeat -19px -15px;  

}  

.advise {  

border:1px solid #B3D8D3;  

}  

.advise .info_box_content {  

color:#80ACB0;  

background:#DDF5F7;  

border:1px solid #F1FAFB;  

-moz-box-shadow:inset 0 0 45px #c6edf0;  

-webkit-box-shadow:inset 0 0 45px #C6EDF0;  

box-shadow:inset 0 0 45px #C6EDF0;  

}  

.advise::before {  

width:19px;  

height:15px;  

background:url(/img/sprite_ico_box.png) no-repeat -17px 0;  

}  

.normal {  

border:1px solid #DDD;  

}  

.normal .info_box_content {  

color:#737373;  

background:#FAFAFA;  

border:1px solid #FAFAFA;  

-moz-box-shadow:inset 0 0 45px #e7e7e7;  

-webkit-box-shadow:inset 0 0 45px #E7E7E7;  

box-shadow:inset 0 0 45px #E7E7E7;  

}  

.normal::before {  

width:20px;  

height:16px;  

background:url(/img/sprite_ico_box.png) no-repeat 0 -34px;  

}  

.warning::before, .note::before, .nice::before, .advise::before, .normal::before {  

content:»;  

position:absolute;  

top:22px;  

left:28px;  

}

Приемы оформления границ блока с помощью 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;
}

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

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

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

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

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

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

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

7 Paca

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

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

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

Выскальзывающие блоки для сайта на CSS3

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

 
А в IE блок будет работать как обычная ссылка. Для начала мы рассмотрим построение HTML, как можно заметить, структура достаточно проста и не требует объяснений:

По своей сути, каждый блок является ссылкой, в которой размещаются дополнительные элементы с информацией. Все блоки помещаются в один контейнер.  Здесь блочные элементы h5 и div внутри строчного элемента a. Для преодоления данного момента служит свойство display: block, которое установлено для ссылки. Теперь рассмотрим внешний вид ссылок:

Но наш блок показывает оба кадра. Чтобы скрыть кадр элемента div установим для элементаh5 такую же высоту что для ссылки. А самой ссылке добавим свойство overflow: hidden, которое будет скрывать все, что выходит за рамки элемента. Также установим для элементаh5 выравнивание по центру нашего блока — установим для него центрирование по горизонтали и высоту строки, равной высоте блока.

Теперь займемся сменой кадров. Установим для нашего элемента div