Jump to content
  • 0

Тень блока кроссбраузерная


Rozmarin
 Share

Question

Возникла проблема с тенью (CSS3) для блока. Во всех последних браузерах все работает, однако IE8 и ниже ни в какую не желает появляться. Пробовал трюк с PIE.htc, однако тоже не получилось.

 

Тень необходима для одной стороны (левой). Тень нужна вертикальная, имеет элиптическую форму, т.е. верхний и нижние части тени с сильным закруглением, посередине тень растягивается.

 

Есть варианты это сделать с помощью 3 картинок? Помогите, пожалуйста.

 

Посмотреть эскиз можно здесь: http://snap.ashampoo.com/UVcEmP0i

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Velidan
      Доброго дня уважаемые коллеги, подскажите пожалуйста, как можно сделать такую вот скругленную белую тень вверху блока вот здесь ( http://prntscr.com/8tow41 )
       
      Пробую сделать вот так:  https://jsfiddle.net/z53k01w9/1/
       
      Вот только не получается как на рисунке - округлить её хорошо внизу.  Помогите пожалуйста. Заранее спасибо.
    • By afdw
      Всем привет!
      Наткнулся я на странный баг в браузере Chrome (может есть и в других браузерах, но я заметил в этом). Вот суть бага: если сделать текст с тенью прозрачным цветом, то прозрачный цвет текста будет считаться не от фона, а от чёрного цвета. То есть как будто текст лежит на элементе с чёрным фоном. Вот пример. Без тени и без прозрачности всё ОК.
      Чем можно объяснить такое поведение, может это вовсе и не баг, вы с этим сталкивались, и как это обойти?
    • By seregamurman
      Привет всем!
      Ребят, помогите решить задачу!!!
      Есть сайт sledd.ru. Он завёрнут в блок (блок-тень), которому задана тень, его высота 100%. Основной блок (main-cont) имеет высоту min-height:100%. Подвал прижат книзу.
      При переходе на страницу с большим количеством контента (допустим http://sledd.ru/products/screens/outdoor/gt6-osx.html ), тень доходит до того места, где у блока "блок-тень" заканчивается 100%, дальше тени нет!
      Как можно правильно реализовать тень по всей высоте, при том, что сайт должен открываться на всю высоту экрана с прижатым футером??? 
    • By Frie
      Посмотрел на мобильном устройстве сайт, в полях формы заметил внутреннюю тень градиентную от верхнего края к нижнему.
      У яндекс браузера было более менее, а у фаерфокса вообще жутко некрасивая, да ещё и поля формы скруглял.
       
      Я поставил все стили инпута в 0, убрал границы, и обернул дивом с аккуратной прямоугольной рамкой.
      Хром стал показывать отлично, как нужно, а у фаерфокса, эта ужасная тень сохранилась. Ставил   box-shadow:none, но не помогло.
       
      Посмотрел другие сайты с формми, такая же шляпа. Как бы обхитрить фаерфокс и заставить показывать поле формы полностью белым цветом внутри без теней?
    • By Andrei88
      Здравствуйте!
      Подскажите решение.
      Нужно создать две тени по бокам сайта (его ширина 960). Есть фоновая картинка, узор.
      Сложность в том, что тени возле сайта прозрачные, а через 450px в сторону, постепенно становятся полностью непрозрачными и чёрными.  А после 450px вместо фоновой картинки идёт один цвет. Они не должны создавать полосу прокрутки.

      Моё решение создавало 3 лишних div друг в друге и png полоску тени для заполнения, но мне сказали, что делается это проще, и не плодит таких структур:
      <body><div id="container1"> <div id="container2"> <div id="shadow_left"></div> <div id="shadow_right"></div> <div id="body_1000"> Подскажите, как?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy