вход

Реалистичные тени при помощи CSS3 без использования изображений

Реалистичные тени при помощи CSS3 без использования изображений

Здравствуйте уважаемые читатели блога mainview.ru. Продолжаем осваивать основы CSS3, и сегодня рассмотрим несколько примеров того, как создать реалистичные тени при помощи CSS3 без использования изображений. Как известно тени очень широко используются в дизайне, поскольку именно тени создают эффект реалистичности. Раньше для создания теней использовались изображения, но с приходом CSS3 стало возможным быстро и легко создавать реалистичные тени.

В чем основное достоинство теней, созданных при помощи CSS3, так это в простоте реализации. Вам достаточно определить соответствующие правила и назначить их нужному контейнеру. В HTML документе вы используете всего один тег, например тег <div>. Теперь вам не нужна дополнительная разметка, поскольку будут созданы дополнительные псевдо элементы и помещены за основным объектом. В основе правила для создания теней выглядят следующим образом:
CSS:
.drop-shadow {
   position:relative;
   width:90%;
}

.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
}

Далее мы должны расположить псевдо-элементы и задать им явные или неявные размеры:

CSS:
.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
}

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

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

Реалистичные тени при помощи CSS3 без использования изображений

Приподнятые уголки

HTML:

<div class="lifted">
	<p>Содержимое</p>
</div>

CSS:

.lifted p {
	font-size:16px;
	font-weight:bold;
}

.lifted {
	position:relative;
	width:40%;
	padding:1em;
	margin:2em 10px 4em;
	background:#fff;
	border-radius:4px;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	-moz-border-radius:4px;
    
}
        
.lifted:before,
.lifted:after {
	content:"";
	position:absolute;
	z-index:-2;
	bottom:15px;
	left:10px;
	width:50%;
	height:20%;
	max-width:300px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
       -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform:rotate(-3deg);
       -moz-transform:rotate(-3deg);
        -ms-transform:rotate(-3deg);
         -o-transform:rotate(-3deg);
            transform:rotate(-3deg);
}
        
.lifted:after {
    right:10px;
    left:auto;
    -webkit-transform:rotate(3deg);
       -moz-transform:rotate(3deg);
        -ms-transform:rotate(3deg);
         -o-transform:rotate(3deg);
            transform:rotate(3deg);
}

Завитки на уголках

HTML:

<div class="curled">
	<p>Содержимое</p>
</div>

CSS:

        
.curled {
    position:relative;
    width:40%;
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    border:1px solid #efefef;
    -moz-border-radius:0 0 120px 120px / 0 0 6px 6px;
         border-radius:0 0 120px 120px / 0 0 6px 6px;
}
      
.curled:before,
.curled:after {
    content:"";
    position:absolute;
    z-index:-2;
    bottom:12px;
    left:10px;
    width:50%;
    height:55%;
    max-width:200px;
    -webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
       -moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
            box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
     -webkit-transform:skew(-8deg) rotate(-3deg);
        -moz-transform:skew(-8deg) rotate(-3deg);
         -ms-transform:skew(-8deg) rotate(-3deg);
          -o-transform:skew(-8deg) rotate(-3deg);
             transform:skew(-8deg) rotate(-3deg);
} 
      
.curled:after {
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
        }
.curled p {
    font-size:16px;
    font-weight:bold;
}        
  

Перспектива

HTML:

<div class="perspective">
	<p>Содержимое</p>
</div>

CSS:


.perspective {
    position:relative;
    width:40%;
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.perspective:before,
.perspective:after {
    content:"";
    position:absolute;
    z-index:-2;
}        

.perspective:before {
    left:80px;
    bottom:5px;
    width:50%;
    height:35%;
    max-width:200px;
    -webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
       -moz-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
            box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
    -webkit-transform:skew(50deg);
       -moz-transform:skew(50deg);
        -ms-transform:skew(50deg);
         -o-transform:skew(50deg);
            transform:skew(50deg);
    -webkit-transform-origin:0 100%;
       -moz-transform-origin:0 100%;
        -ms-transform-origin:0 100%;
         -o-transform-origin:0 100%;
            transform-origin:0 100%;
}
        
.perspective:after {
    display:none;
}

.perspective p {
    font-size:16px;
    font-weight:bold;
}        
 

Приподнятый бокс

HTML:

<div class="raised">
	<p>Содержимое</p>
</div>

CSS:


.raised {
    position:relative;
    width:40%;
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}        

.raised:before,
.raised:after {
    content:"";
    position:absolute;
    z-index:-2;
}

.raised p {
    font-size:16px;
    font-weight:bold;
}        
        

Один вертикальный изгиб

HTML:

<div class="curved-vt-1">
	<p>Содержимое</p>
</div>

CSS:


.curved-vt-1 {
    position:relative;
    width:40%;
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.curved-vt-1:before,
.curved-vt-1:after {
    content:"";
    position:absolute;
    z-index:-2;
}

.curved-vt-1:before {
    top:10px;
    bottom:10px;
    left:0;
    right:50%;
    -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
       -moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
            box-shadow:0 0 15px rgba(0,0,0,0.6);
    -moz-border-radius:10px / 100px;
         border-radius:10px / 100px;
}

.curved-vt-1 p {
    font-size:16px;
    font-weight:bold;
}        
   

Два вертикальных изгиба

HTML:

<div class="curved-vt-2">
	<p>Содержимое</p>
</div>

CSS:


.curved-vt-2 {
    position:relative;
    width:40%;
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.curved-vt-2:before,
.curved-vt-2:after {
    content:"";
    position:absolute;
    z-index:-2;
}

.curved-vt-2:before {
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
       -moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
            box-shadow:0 0 15px rgba(0,0,0,0.6);
    -moz-border-radius:10px / 100px;
         border-radius:10px / 100px;
}

.curved-vt-2 p {
    font-size:16px;
    font-weight:bold;
}        
  

Один горизонтальный изгиб

HTML:

<div class="curved-hz-1">
	<p>Содержимое</p>
</div>

CSS:


.curved-hz-1 {
    position:relative;
    width:40%;
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.curved-hz-1:before,
.curved-hz-1:after {
    content:"";
    position:absolute;
    z-index:-2;
}

.curved-hz-1:before {
    top:50%;
    bottom:0px;
    left:10px;
    right:10px;
    -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
       -moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
            box-shadow:0 0 15px rgba(0,0,0,0.6);
    -moz-border-radius:100px / 10px;
         border-radius:100px / 10px;
}

.curved-hz-1 p {
    font-size:16px;
    font-weight:bold;
}        
        

Два горизонтальных изгиба

HTML:

<div class="curved-hz-2">
	<p>Содержимое</p>
</div>

CSS:


.curved-hz-2 {
    position:relative;
    width:40%;
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.curved-hz-2:before,
.curved-hz-2:after {
    content:"";
    position:absolute;
    z-index:-2;
}

.curved-hz-2:before {
    top:0px;
    bottom:0px;
    left:10px;
    right:10px;
    -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
       -moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
            box-shadow:0 0 15px rgba(0,0,0,0.6);
    -moz-border-radius:100px / 10px;
         border-radius:100px / 10px;
}

.curved-hz-2 p {
    font-size:16px;
    font-weight:bold;
}        
        

Повернутый бокс

HTML:

<div class="rotated">
	<p>Содержимое</p>
</div>

CSS:


.rotated {
    position:relative;
    width:40%;
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    border-radius:4px;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-border-radius:4px;
    -webkit-box-shadow:none;
       -moz-box-shadow:none;
            box-shadow:none;
    -webkit-transform:rotate(-3deg);
       -moz-transform:rotate(-3deg);
        -ms-transform:rotate(-3deg);
         -o-transform:rotate(-3deg);
            transform:rotate(-3deg);
}
      
.rotated > :first-child:before {
    content:"";
    position:absolute;
    z-index:-1;
    top:0px;
    bottom:0;
    left:0;
    right:0px;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}      

.rotated:before,
.rotated:after {
	content:"";
	position:absolute;
	z-index:-2;
	bottom:15px;
	left:10px;
	width:50%;
	height:20%;
	max-width:300px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
       -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform:rotate(-3deg);
       -moz-transform:rotate(-3deg);
        -ms-transform:rotate(-3deg);
         -o-transform:rotate(-3deg);
            transform:rotate(-3deg);
}
        
.rotated:after {
    right:10px;
    left:auto;
    -webkit-transform:rotate(3deg);
       -moz-transform:rotate(3deg);
        -ms-transform:rotate(3deg);
         -o-transform:rotate(3deg);
            transform:rotate(3deg);
}

.rotated p {
	font-size:16px;
	font-weight:bold;
}

Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
34 комментария

Статья → Реалистичные тени при помощи CSS3 без использования изображений

  1. Просто нереально, особенно последний, перевернутый…
    Спасибо огромное за подборочку, сейчас будем думать, куда прикрутить что-нибудь из этого.

  2. Отличная коллекция штук.Особенно впечатлил,как и Вовку,повёрнутый блок.Надо применить срочно :)
    Спасибо!

  3. SereneSky:

    Красиво конечно, но на мой взгляд целесообразнее такие вещи делать с помощью графического редактора, а не используя CSS.
    (не зря автор упомянул: “…При просмотре данной статьи лучше пользоваться последними версиями браузеров, поддерживающих спецификацию CSS3…”) К примеру в IE 8 версии этих эффектов уже не увидишь.

  4. Артем:

    отличная подборка! обязательно начну использовать.

    по поводу того, что в ие7-8 это не работает. Эти вещи являются украшениями, и на доступность контента никак не влияют. Поэтому мое мнение такое – если у человека не совсем продвинутый браузер, то он увидит сайт не таким красивым, как тот посетитель, у которого нормальный браузер. Главное то, что оба человека прочитают информацию.

    плюс еще, используя css3, мы уменьшим кол-во запросов на сервер с картинками.

  5. Я за CSS3 и против IE)))
    Ну а если серьезно, то Артем прав, контент то никуда не денется

  6. Николай:

    Друзья, спасибо вам за ваши мнения, сам я придерживаюсь такого мнения: если человек работает не на самом последнем браузере, и не хочет использовать последние новшества и возможности, скорости и функционал, то это его право, значит по большому счету ему наплевать и на новые возможности CSS3 и HTML5, и вероятно он не оценит то, что эти спецификации позволяют делать. Это его выбор. Для тех, кто идет в ногу со временем и использует последние версии, помимо скорости и функционала сумеет оценить и то что позволяют новые стандарты и то, что делает CSS3 думаю будет ему по вкусу. А старая отмазка разработчиков старающихся угодить мертвому IE, мне не интересна. Лучше потратить время на проработку верстки и применение CSS3, чем приделывать костыли и фиксы для старых браузеров. Их время ушло, как уходит время флэш сайтов, и не стоим тянуть за уши IE и ему подобные.

  7. Eugene:

    Ребята, это Здорово! Но меня всегда мучает вопрос – тот сss-код что выше весь писан вручную ? Автоматизация есть какая никакая?

  8. Очень полезная информация! В закладки!
    Полностью согласен с Николаем насчет старых браузеров и применения CSS3.

  9. Дмитрий:

    Супер, попробую сделать что-то подобное, спасибо.

  10. Денис:

    у меня код не корректно работает в Opera . Что можно сделать ? ( тень вылазит из под картинки на всю ширину страницы ) и подолжка тоже

  11. Денис:

    проблема Opera в этом операторе
    content:””;
    можно ли его убрать ?

  12. Денис:

    а как сделать такие же закругленные уголки ?

  13. Alexander:

    Автор, укажите ссылку на первоисточник.

  14. Денис, юзай border-radius.

    Применить его очень просто:

    “border-radius: 5px” = “border-radius: 5px 5px 5px 5px”, закругление всех 4 краёв на 5px.

    Значения которые записаны на одной линии идут как бы по часовой стрелке, например – “border-radius: 5px 10px 15px 20px” выглядит так – закругление верхнего левого угла на 5px, верхнего правого на 10px, нижнего правого на 15px и нижнего левого на 20px.

  15. Замечательная подборка теней!!!! Сегодня же попробую на своих проектах!!! Огромное спасибо за этот пост

  16. Повернутым блоком не удивили, так как самому недавно пришлось использовать rotate для формирования подписей google charts диаграмм под углом подобных MS Word, про существование box-shadow знал до вашего поста, но даже не мог предположить о столь богатых его возможностях, просто восхищен эффектами, спс за статью.

  17. Михаил:

    Очень хорошо, спасибо.

  18. Михаил:

    > проблема Opera в этом операторе
    > content:””;
    > можно ли его убрать ?

    надо оперу обновить ага и не приставать к приличным людям.

  19. Спасибо за статью!

    Есть такая проблема: если плашка находится внутри ячейки таблицы td, для которой в родительском классе прописано, к примеру:

    .content td
    {
    background: #f8f8f8;
    border: solid black 1px;
    }

    то ничего не работает, пока не закомментируешь
    background: #f8f8f8

    Подскажите, пожалуйста, решение проблемы.

  20. Николай:

    Ссылка указана в начале статьи под заголовком

  21. Можно ли применить внутреннюю тень к изображениям? В спецификациях написано, что box-shadow применяется ко всем элементам, но у меня не получается это сделать ;[

  22. Андрей Семёнов, к тегу img нельзя :(
    Но, можно поставить его на бэкграунд, и только тогда получится.

  23. sonoma:

    объясните что значит (p)содержимое(/p)какое содержимое между тегами
    Sonoma

  24. Dima:

    А можно побольше примеров с тенями?

  25. koeshiro:

    Спасибо, но я лично пробовал но не хочет работать. Сейчас пишу -пытаюсь писать. Эластично динамичный шаблон, медленно но верно прорываюсь в перёд под “зорким” и очень ленивым, эгоистичным. . . . так можно долго. Короче говоря нечего у меня не вышло, прописывал как в пх так и в ем, разницы нет, браузер блокирует это полностью.
    Подскажите в чём проблема? код выглядит так.
    #slide{width:80%; height:30em;border:0.45em inset black;
    box-shadow:rgba(0.0.0.0.1) 0px 20px 0px 0px rgba(0.0.0.0.6);
    -webkit-box-shadow:rgba(0.0.0.0.1) 0em 2em 0em 0em rgba(0.0.0.0.6);
    -moz-box-shadow: rgba(0.0.0.0.1) 0em 2em 0em 0em rgba(0.0.0.0.6)}

  26. PavelHZ:

    Неплохо)) Открываю уже вторую страницу и снова вкусняшка) Хороший сайт.

  27. Можете посмотреть что не так? http://informkiev.com/1-pokupki.html
    На одном сайте все ок, а здесь не выходит…
    Помогите!

  28. отличная подборка, автору – спасибо за инфу!

  29. Добавил на сайт http://royal-parket.com.ua/ – Два горизонтальных изгиба. Перекрывает левое выпадающее меню. Как можно исправить? Помогите, пожалуйста.

  30. Роман:

    Спасибо, замечательные эффекты!

  31. Спасибо огромное за информацию. Жаль что нет тут информации по внутренним теням

  32. Самое главное – понял принцип – нужно создать псевдоэлемент и поместить его под видимый элемент и уже от него создавать тень, а не от видимого элемента. Спасибо за статью.

  33. Вася:

    Добрый день, подскажите, почему не видно в мобильной версии?

  34. zmoe:

    Спасибо, это самое то, что нужно, а то все перерыл и все как то не то. С меня твит @zmoe

Оставить комментарий

Статья → Реалистичные тени при помощи CSS3 без использования изображений

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.