Как сделать тени для геометрических фигур на CSS?

На habrahabr есть пост "Геометрические фигуры на CSS". Как для таких фигур сделать тени?
  • Вопрос задан
  • 4654 просмотра
Пригласить эксперта
Ответы на вопрос 12
DeLaVega
@DeLaVega
Верстаю, фронтэндю =)
Комментировать
@black_hawk Автор вопроса
Пожалуйста, прежде чем отвечать, попробуйте сами это сделать. box-shadow здесь не подойдет, он понимает фигуру как прямоугольный блок и тень получается тоже прямоугольной.
Ответ написан
Комментировать
iDevArtem
@iDevArtem
Так же на habrahabr есть пост "Треугольники с тенью на CSS"

Это то что предложил: @DeLaVega, только в обход гугла =)
Ответ написан
Комментировать
@black_hawk Автор вопроса
Как быть с более сложными фигурами? Есть какое-то универсальное решение?
Ответ написан
Комментировать
iDevArtem
@iDevArtem
Сами фигуры на CSS - это не универсальное решение... по этому и решение есть не универсальное...

Для Webkit:
-webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));


Для Firefox:
<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="2.2"/>
        <feOffset dx="12" dy="12" result="offsetblur"/>
        <feFlood flood-color="rgba(0,0,0,0.5)"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</svg>


Для IE:
/* for IE 8 & 9 */
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
/* For IE 5.5 - 7 */
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12,
Color='#444')";


В общем ссылка на саму статью.

Небольшой пример для webkit из статьи "Геометрические фигуры на CSS"
Ответ написан
Комментировать
@black_hawk Автор вопроса
Спасибо, но, к сожалению, не работает в Opera 12.11
Ответ написан
Комментировать
iDevArtem
@iDevArtem
Ясное дело... это же Opera =)
Ответ написан
Комментировать
@black_hawk Автор вопроса
А для оперы нет вариантов? =)
Ответ написан
Комментировать
iDevArtem
@iDevArtem
В опера 12.11... даже геометрические фигуры отображаются ужасно!

Есть 2 варианта:
1. Удалить оперу
2. Установить версию >= 15.0 (т.к. с 15 версии opera на webkit движке)
=)
Ответ написан
Комментировать
@black_hawk Автор вопроса
Не знаю, сейчас делаю верстку, с геометрией все нормально, проблема только с тенями.
Ответ написан
Комментировать
iDevArtem
@iDevArtem
Вы серьезно?!

af6db609b68848eab349ab5897a46961.png

Сглаживание на высоте! =)
Ответ написан
Комментировать
@black_hawk Автор вопроса
Про сглаживание не спорю, зато все ровно =)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы