Красивый 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, как можно заметить, структура достаточно проста и не требует объяснений:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<div>

<section>

 

<a href="#" target="_blank">

<h5>Над чем я работаю...</h5>

<div>Wufoo - Online строитель форм. Легко поможет справится даже со сложными формами!</div>

</a>

 

<a href="# target="_blank">

<h5>Книга, которую я пишу...</h5>

<div>"Digging Into WordPress" - Два в одном, книга и блог, которые пишу с Jeff Starr, о платформе №1.</div>

</a>

 

<a href="#" target="_blank">

<h5>Цитаты, которые я собираю...</h5>

<div>"Quotes on Design" - коллекция различных цитат о дизайне. Есть API для интеграции!</div>

</a>

 

</section>

 </div>

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

.slide-up-boxes a {

display: block;

margin: 0 0 20px 0;

background: rgba(215, 215, 215, 0.5);

border: 1px solid #ccc;

height: 65px;

overflow: hidden;

}

 

.slide-up-boxes h5 {

text-align: center;

height: 65px;

line-height: 65px;

}

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

Теперь займемся сменой кадров. Установим для нашего элемента div в блоке высоту и отступы для формирования внешнего вида. А смену кадров будем осуществлять установкой поля с отрицательным значением равным высоте блока для ссылки. Таким образом, первый кадр (элемент h5) будет смещаться за предлы блока и становиться невидимым, а на его место будет подниматься второй кадр (элемент div ).

.slide-up-boxes a:hover h5 {

margin-top: -65px;

}

 

.slide-up-boxes div {

height: 45px;

padding: 10px;

}

Итак, смена кадров работает. Настал черед сформировать эффектный внешний вид. Для решения задачи воспользуемся трансформациями CSS3.

Для первого кадра плавно трансформироваться будет значение верхнего поля. А второй кадр мы будем немного поворачивать и менять прозрачность, так как повернутый текст немного вылазит снизу.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

.slide-up-boxes h5 {

text-align: center;

height: 65px;

line-height: 65px;

   -webkit-transition: all 0.2s linear;

-moz-transition: all 0.2s linear;

-o-transition: all 0.2s linear;

 

}

 

.slide-up-boxes a:hover h5 {

margin-top: -65px;

}

 

.slide-up-boxes div {

height: 45px;

padding: 10px;

opacity: 0;

-webkit-transform: rotate(6deg);

-webkit-transition: all 0.4s linear;

-moz-transform: rotate(6deg);

-moz-transition: all 0.4s linear;

-o-transform: rotate(6deg);

-o-transition: all 0.4s linear;

}

 

.slide-up-boxes a:hover div {

opacity: 1;

-webkit-transform: rotate(0);

-moz-transform: rotate(0);

-o-transform: rotate(0);

}

Теперь добавим картинки во второй кадр. Воспользуемся селектором для выделения потомков элемента по номеру:

.slide-up-boxes a:nth-child(1) div { background: #c73b1b url(images/wufoo.png) 17px 17px no-repeat; padding-left: 120px; }

.slide-up-boxes a:nth-child(2) div { background: #367db2 url(images/diw.png) 21px 10px no-repeat; padding-left: 90px; }

.slide-up-boxes a:nth-child(3) div { background: #393838 url(images/qod.png) 14px 16px no-repeat; padding-left: 133px; }

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

.slide-up-boxes a {

display: block;

height: 130px;

margin: 0 0 20px 0;

background: rgba(215, 215, 215, 0.5);

border: 1px solid #ccc;

height: 65px;

overflow: hidden;

}

 

.slide-up-boxes h5 {

color: #333;

text-align: center;

height: 65px;

font: italic 18px/65px Georgia, Serif;    /* Вертикальное центрирование текста за счет равных высот строки и элемента */

opacity: 1;

-webkit-transition: all 0.2s linear;

-moz-transition: all 0.2s linear;

-o-transition: all 0.2s linear;

}

 

.slide-up-boxes a:hover h5 {

margin-top: -65px;

opacity: 0;

}

 

.slide-up-boxes div {

position: relative;

color: white;

font: 12px/15px Georgia, Serif;

height: 45px;

padding: 10px;

opacity: 0;

-webkit-transform: rotate(6deg);

-webkit-transition: all 0.4s linear;

-moz-transform: rotate(6deg);

-moz-transition: all 0.4s linear;

-o-transform: rotate(6deg);

-o-transition: all 0.4s linear;

}

.slide-up-boxes a:hover div {

opacity: 1;

-webkit-transform: rotate(0);

-moz-transform: rotate(0);

-o-transform: rotate(0);

}

.slide-up-boxes a:nth-child(1) div { background: #c73b1b url(images/wufoo.png) 17px 17px no-repeat; padding-left: 120px; }

.slide-up-boxes a:nth-child(2) div { background: #367db2 url(images/diw.png) 21px 10px no-repeat; padding-left: 90px; }

.slide-up-boxes a:nth-child(3) div { background: #393838 url(images/qod.png) 14px 16px no-repeat; padding-left: 133px; }

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

Читайте также:

Как верстать блоки сложной формы на чистом css? — Хабр Q&A

Для нижнего блока я бы использовал CSS-треугольники, отрисованные через border'ы и приаттаченные к блоку через ::before и ::after с абсолютным позиционированием. С ним довольно просто.

А вот с верхним меню сложнее. Можно использовать метод "в лоб": вырезать 1px-ельную вертикальную полоску меню и заместить ей по горизонтали. Уголки же PNG-шками приклеить через ::before и ::after.
Если все делать растром, то центральную надпись (лого, как я понял), также можно вырезать в растре и воткнуть элементом меню ( то бишь по центру), задать соответствующую высоту и сместить margin-top вверх на нужное значение, чтобы спозиционировать все как надо.
Тень может быть частью однопиксельной полоски, а может задаваться через box-shadow. Второе предпочтительнее, однако нужно посмотреть, что будет давать более приятный визуальный эффект.

В целом, если поместить все изображения в спрайт, то это будет работать вполне себе нормально. Проблем с горизонтальной адаптацией я тоже не вижу, ведь фон замещается однопиксельной вертикальной полоской.

Однако если дизайн выполнен в векторе (например, AI-макет), то почему бы не использовать SVG? Тем более фигуры получаются достаточно простыми.

Если промоделировать ситуацию:
- вырезаем полоску в SVG-фигуре и присваиваем её фоном к

  • ;
    - вырезаем лого в SVG-фигуре и присваиваем её элементу
  • , причем если в случае выше мы не могли напрямую вставить SVG-код внутрь элемента, то здесь это вполне позможно, чем мы сэкономим на HTTP-запросах, останется его правильно спозиционировать.
    - тень через box-shadow, либо через SVG-фильтр (про SVG-фильтры можно почитать в спецификации - www.w3.org/TR/SVG/filters.html , или в прочих статьях и видео, которых несчесть=)).

    Вообще, так или иначе, что в случае спрайтов, что при использовании SVG, как минимум один файл (фон полоски меню в случае SVG и файл спрайтов в случае растрового варианта) нам прийдется передавать отдельно от HTML-документа. Но лично мне больше симпатизирует SVG-подход, потому что я терпеть не могу возню с позиционированием спрайтов %-/

    Вот такие мысли насчет топика.

Горизонтальные блоки DIV на HTML & CSS

div#degasukop-bedsumaven {
  padding-bottom: 40px;
  padding-top: 40px;
  text-align: center;
  z-index: 1;
  position: relative;
}

div.geome-kasavgekam, div.vasatum-nelopabged, div.right-savetungas, div.left-savetungas {
  display: inline-block;
  color: #f9f9f9;
  font-size: 21px;
  line-height: 40px;
  margin: 12px 0;
  position: relative;
  width: 434px;
  text-shadow: 0 1px 0 #2b2929;
}

div.geome-kasavgekam:before,
div.geome-kasavgekam:after,
div.vasatum-nelopabged:before,
div.vasatum-nelopabged:after,
div.right-savetungas:before,
div.right-savetungas:after,
div.left-savetungas:before,
div.left-savetungas:after {
  content: "";
  border-style: solid;
  border-width: 0;
  height: 0;
  position: absolute;
  width: 0;
}

div.geome-kasavgekam {
  background-color: #9e9797;
}

div.geome-kasavgekam:after,
div.geome-kasavgekam:before {
  border-color: transparent #7d7a7a;
}

div.geome-kasavgekam:before {
  left: -19px;
  border-width: 19px 19px 19px 0;
}

div.geome-kasavgekam:after {
  right: -19px;
  border-width: 19px 0 19px 19px;
}

div.vasatum-nelopabged {
  background-color: #9a9898;
}

div.vasatum-nelopabged:before,
div.vasatum-nelopabged:after {
  top: 6px;
  z-index: -15;
}

div.vasatum-nelopabged:before {
  border-color: #aba4a4 #aba4a4 #aba4a4 transparent;
  border-width: 19px;
  left: -25px;
}

div.vasatum-nelopabged:after {
  border-color: #aba4a4 transparent #aba4a4 #aba4a4;
  border-width: 19px;
  right: -25px;
}

div.right-savetungas {
  background-color: #949191;
}

div.right-savetungas:after,
div.right-savetungas:before {
  border-width: 19px 0 19px 19px;
}

div.right-savetungas:before {
  border-color: #a09c9c transparent;
  left: -19px;
}

div.right-savetungas:after {
  border-color: transparent #a09c9c;
  right: -19px;
}

div.left-savetungas {
  background-color: #8c8989;
}

div.left-savetungas:after,
div.left-savetungas:before {
  border-width: 19px 19px 19px 0;
}

div.left-savetungas:before {
  border-color: transparent #7b7878;
  left: -19px;
}

div.left-savetungas:after {
  border-color: #7b7878 transparent;
  right: -19px;
}

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *