Jump to content
  • 0

Скругление углов (прозрачность под тенью)


master_alf
 Share

Question

Приветствую!

Поиском решения не нашел... потому прошу помощи.

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

Картинку можно глянуть тут

Верстал вот так:

<div id="list"><div><div><div><div> </div></div></div></div></div>

div#list 				{ background: white URL("../img/shadow-page-top.png") repeat-x top left;}
div#list > div { background: URL("../img/shadow-page-bot.png") repeat-x bottom left;}
div#list > div > div { background: URL("../img/shadow-page-left.png") repeat-y top left; }
div#list > div > div > div { background: URL("../img/shadow-page-corner-top.png") no-repeat top left;}
div#list > div > div > div > div { background: URL("../img/shadow-page-corner-bot.png") no-repeat bottom left; width: 200px; height: 200px;}

Я вижу только 2 теоретических способа что бы решить это.

1. Поставить дивы с углами выше, чем дивы с краями, и задать отступы таким образом, что бы дочерние дивы (с прямыми границами) оказались меньшего размера и не могли вылазить поверх. Но это не получается. Фон родительских дивов перебивается дочерними, и z-index тут не помогает. (по крайней мере в FF и IE).

2. Каким-то образом сделать дочерние дивы больше родительских... на конкретное количество пикселей... без использования JScript я даже не могу придумать способа...

Может быть кто-то подскажет решение, которое я не увидел?

Заранее спасибо.

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

Именно так и нарезано, но, т.к. блок этот должен быть резиновым, размеры точно задать нельзя.

А при 100% высоте левого края, так же как и при 100% ширине верха и низа, они начинают выглядывать из-под углов, т.к. там прозрачность.

Я именно это и не могу обойти :(

Link to comment
Share on other sites

  • 0

надеюсь сработает Пример

картинки должны быть такими, фон сделал чтобы было видно где находятся блоки

shadow_left.png - горизонтальный градиент из прозрачности в тёмный цвет размер 10х1

shadow_right.png - горизонтальный градиент из прозрачности в тёмный цвет размер 10х1

shadow_top.png - вертикальный градиент из прозрачности в тёмный цвет размер 1х10

shadow_bottom.png - вертикальный градиент из тёмного цвета в прозрачность размер 1х10

если не нравится, что тень выходит за границу блока на 10px, можно сделать её полностью внутри блока - это не проблема указав другое позиционирование для теней, но тогда лучше будет для этого блока оставить прозрачный фон и указать padding, при этом фон указывать для дочернего объекта с контентом.

Edited by Switch74
Link to comment
Share on other sites

  • 0

Очень интересное решение, я даже близко до такого не додумался :)

Но, т.к. времени свободного мало, сделал таблицей.

Очень даже просто, кросс-браузерно и быстро :)

Привык верстать блоками... и про таблицы вспоминаю крайне редко :( Не то бы и вопроса не стояло.

В любом случае большое спасибо за помощь. :)

Link to comment
Share on other sites

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

×
×
  • 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