В начало блога На главную

Тень с трех сторон CSS

Чтобы сделать «эффект вкладок» или наложить тень с трех сторон вместо фоновых изображений можно просто наложить тени. На каждый объект можно наложить несколько теней используя свойство box-shadow, для визуальной видимости тени с трех сторон нужно использовать две тени.

Пример 1: две тени. Первая с отступом вправо вниз, вторая влево вниз.

Поскольку синтаксис box-shadow: x y blur spread color тени можно крутить в любом направлении.

Пример 2: Отступы влево вверх, право вверх.

Тени можно комбинировать с другими визуальными эффектами. Например с использованием :hover

Рассказать:
  1. Antey:

    У вас перепутаны стороны — то есть коды для картинок. Да и сами коды оставляют маленькие тени с тех сторон, где их не должно быть. Делал внутренние тени по вашим кодам — два блока где сходятся. Так вот, все равно есть узкая тень.

  2. Astaroth:

    И подсчет не работает

  3. Astaroth:

    Спасибо.
    P.S.При оставлении комментария комментарий не обязателен:))

  4. Даунич:

    А че норм, спс)

  5. Дмитрий:

    Спасибо!

  6. Рамис Юсупов:

    Спасибо!