Тени уголком через css

В частности мы будем использовать тег box-shadow. Так же можно будет задать любой цвет для тени, размер, смещение, или же использовать его для других элементов, главное экспериментировать. А также активно используется -transform: с rotate отвечающие за поворот уголков.

Уголок слева

Получим вот такое

Тень через CSS

Это в HTML

<div class="box effect1">
   <h3>Эффект 1</h3>
</div>

Это в CSS

.box h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}

/*==================================================
* Effect 1
* ===============================================*/
.effect1
{
position: relative;
}
.effect1:before
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}

Уголок справа

Получим вот такое

Тень через CSS

Это в HTML

<div class="box effect2">
     <h3>Эффект 2</h3>
</div>

Это в CSS

.box h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}

/*==================================================
* Effect 2
* ===============================================*/
.effect2
{
position: relative;
}
.effect2:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
right: 10px;
left: auto;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
}

Уголок с двух сторон

Получим вот такое

Тень через CSS

Это в HTML

<div class="box effect3">
     <h3>Эффект 3</h3>
</div>

Это в CSS

.box h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}

/*==================================================
* Effect 5
* ===============================================*/
.effect3
{
position: relative;
}
.effect5:before, .effect3:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 35px 20px #777;
-moz-box-shadow: 0 35px 20px #777;
box-shadow: 0 35px 20px #777;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.effect3:after
{
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
-ms-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;
left: auto;
}

В общем ничего сложного. Успехов

Все заметки
Уважаемый читатель! В связи с участившимся спамом в комментариях, возможность писать доступна только для зарегистрированных пользователей

Зарегистрироваться Войти
Напомнить пароль

Быстрая регистрация через соц.сеть:
Случайные заметки из блога
Табы из свойств инфоблока в Битрикс

Думаю все знают что такое табы или вкладки. Расскажу как на ...

Подключение SSL на Битрикс виртуальная машина

Для некоторых сервисов, типа Яндекс Касса, требуется наличие...

Дополнительные картинки в списке элементов каталога битрикс

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

Умный фильтр на главной странице Битрикс

Достаточно редкая но востребованная задачка- это вывести компонент...

Время на БД и веб сервере отличается на 3600 секунд, тест Битрикс

Достаточно часто, при проверке параметров системы, в Битрикс,...

Ускорение сайта Битрикс на ubuntu server, Memcached.

До сегодняшнего дня арендовал виртуальный сервер в Германии ...

Свежие комментарии в блоге
Материалы по теме в новостях Битрикс, с картинкой, названием и текстом анонса.

[QUOTE][USER=1631]Интересующийся многим[/USER] пишет: Михаил, добрый день! что-то ссылка [url]http...

22.07.2017 / Михаил Базаров
Всплывающее окно с формой обратной связи Битрикс

Подскажите почему может не работать скрипт  BX.ajax.onload_943827 = function() {           setTime...

19.07.2017 / Рима Уколова
Вывести товары из того же раздела в карточке товара

Михаил, скажите пожалуйста, этот метод еще актуален? Никак не могу передать ни id ни символьный код,...

19.07.2017 / Алексей Сель
Панель управления хостином VESTA и 1С Битрикс, базовая оптимизация

Здравствуйте, Михаил. Постоянно вылетает ошибка БД при создании рез.копии битрикс. Создавал виртуалк...

14.07.2017 / Сергей Стефанович

© 2011—2017 Частный вебмастер: ИП Базаров, ОГРНИП: 315784700173692. Работает на 1С-Битрикс.

Копирование материалов запрещено: "ГК РФ, часть 4, раздел VII: Права на результаты интеллектуальной деятельности".

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

x
Как к Вам обращаться? *
Ваша электронная почта: *
Доп. материалы (логотип, тех. задание):
 
Обзор
Текст сообщения:

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