Тень блока без background: url

mamay · June 18, 2008

Создание теней для блоков всегда происходит с помощю изображений.

А кто знает как избежать использования какой-либо графики для решения этой задачи?

Итак:

<html>
<style><!--
...
--></style>
<body>
<div class="blockwithshadow"></div>
</body>
</html>

maddogrts · June 18, 2008

Это проверка ? Использование бордеров и вложенных дивов даст нужный эффект

mamay · June 18, 2008

Ну, кроме разного рода проверяющих, бывают несведующие.

Приведите пожалуйста пример решения.

maddogrts · June 18, 2008

Мамай я прошу прощенья, но вы бы не могли мне объяснить зачем я должен сидеть и искать для вас решение?

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

mamay · June 18, 2008

Мамай я прошу прощенья, но вы бы не могли мне объяснить зачем я должен сидеть и искать для вас решение?
Помогают только тем кто сам ищет решение. Если вы решили сделать такую рамку, проявите фантазию, для начала нарисуйте что вы хотите получится (а совсем вначале подумайте стоит ли так делать и зачем), набросайте код, если что то не получится обсудим

maddogrts, я прошу прощения, но я вовсе не говорил, что Вы должны это делать.

Не все так заняты, как Вы. Занимайтесь пока своими делами. А как захочется, заходите снова.

По-делу.

Мне и правда это интересно и нужно.

Применение этому самое широкое.

Например, блок контента в квадрате (объявление), который отбрасывает тень.

Отходить от графики стоит в принципе (исключение - Логотип) по последним постановлениям партии W3C.

Наконец такое колдовство просто интересно.

Кто може-е-ет!

mamay · June 18, 2008

Пытаюсь решить так:

(смотреть пока только в IE)

————————————————

<html>
<head>
<style type="text/css">
<!--
em {
 display: block;
 width: 400px;
 height: 200px;
 border-right: 1px #ccc solid;
}
i {
 display: block;
 width: 400px;
 height: 200px;
 border-bottom: 1px #ccc solid;
}
i+em {
 margin-left: 1px;
}
em+i {
 margin-top: 1px;
}
-->
</style>
</head>
<body>
<em><i><em><i><em><i><em><i><em><i>
Блок с тенью, созданной при помощи CSS и вложенных тегов <em> и <i>
</i></em></i></em></i></em></i></em></i></em>
</body>
</html>

Надо добиться иллюзии градиента

maddogrts · June 18, 2008

Пропишите разные цвета бордеров для внутренних em и i

mamay · June 18, 2008

Не выходит

что-то не так.

Не пойму, что...

———

<html>
<head>
<style type="text/css">
<!--
em {
 display: block;
 width: 400px;
 height: 200px;
 border-right: 1px #666 solid;
}
i {
 display: block;
 width: 400px;
 height: 200px;
 border-bottom: 1px #666 solid;
}
em+i {
 margin-top: 2px;
 border-bottom-color: #999;
}
i+em {
 margin-left: 2px;
 border-right-color: #999;
}
em+i+em {
 margin-top: 3px;
 border-bottom-color: #ccc;
}
i+em+i {
 margin-left: 3px;
 border-right-color: #ccc;
}
em+i+em+i {
 margin-top: 4px;
 border-bottom-color: #efefef;
}
i+em+i+em {
 margin-left: 4px;
 border-right-color: #efefef;
}
-->
</style>
</head>
<body>
<em><i><em><i><em><i><em><i><em><i>
Блок с тенью, созданной при помощи CSS и вложенных тегов <em> и <i>
</i></em></i></em></i></em></i></em></i></em>
</body>
</html>

maddogrts · June 18, 2008

.blockwithshadow{
border-bottom:2px solid #eee;
border-right:2px solid #eee;
padding-bottom:2px;
padding-right:2px;
background:#ccc;
}

klierik · June 18, 2008

css:

/****************************************************************************************************/
/********** Shadow Box ******************************************************************************/

body { padding: 32px; font-family: Tahoma; color: #333; }
div { font-size: 0; }
* {margin: 0px; padding: 0px; outline: none;}
p { font-size: 11px; }
div.shwBox { position: relative; }

 /****** shadow constructor ******/
 div.shdw {
 position: absolute;
 height: 100%; width: 100%;

 /* for ie6 */
 _height: expression(parentNode.offsetHeight + 'px');
 _width: expression(parentNode.offsetWidth + 'px');

 }

 /***** shadow layers *****/
 div.shdw div.s1,
 div.shdw div.s2,
 div.shdw div.s3,
 div.shdw div.s4 {
 position: absolute;
 left: 0; top: 0;
 background-color: #000;

 /* for ie6 */
 _height: expression(parentNode.offsetHeight-1 + 'px');
 _width: expression(parentNode.offsetWidth-1 + 'px');
 }
 div.shdw div.s1 {
 top: 2px;
 right: 1px; bottom: 1px;
 left: 2px;

 filter:alpha(opacity=10);
 -moz-opacity: 0.1;
 -khtml-opacity: 0.1;
 opacity: 0.1;
 }
 div.shdw div.s2 {
 top: 1px;
 right: 2px; bottom: 2px;
 left: 1px;

 filter:alpha(opacity=15);
 -moz-opacity: 0.15;
 -khtml-opacity: 0.15;
 opacity: 0.15;
 }
 div.shdw div.s3 {
 right: 3px; bottom: 3px;

 filter:alpha(opacity=20);
 -moz-opacity: 0.2;
 -khtml-opacity: 0.2;
 opacity: 0.2;
 }

 /***** data background case ******/
 div.shdw div.s4 {
 background-color: #fff;
 top: 0px;
 right: 4px; bottom: 4px;

 border: 1px solid #eee;
 border-right: none; border-bottom: none;

 /* for ie6 */
 _height: expression(parentNode.offsetHeight-3 + 'px');
 _width: expression(parentNode.offsetWidth-3 + 'px');
 }

 /****** content ******/
 div.data { 
 padding: 5px 7px 8px; position: relative; z-index: 2;
 }

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

 <!--link rel="stylesheet" type="text/css" href="../../jsgui/css/source/base.css" /-->
 <link rel="stylesheet" type="text/css" href="css/styles.css" />
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

 <title>Shadow Box</title>
</head>

<body>



<!--START STRUCTURE-->

 <div class="shwBox">
 <div class="shdw">
 <div class="s1"></div>
 <div class="s2"></div>
 <div class="s3"></div>
 <div class="s4"></div>
 </div>
 <div class="data">
 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
 </div>
 </div>

<!--END STRUCTURE-->



</body>
</html>

играться с бордерами, имхо, не прикольно так как теряеться сама прозрачность ))

а то есть то что под тенью НЕ будет видно...

мне все же по душе прозрачность

mamay · June 18, 2008

klierik

Ну круто же!

Недаром "Эксперт".

Это будет полезно ВСЕМ!

Можете объяснить вот этот момент:

filter:alpha(opacity=10);
 -moz-opacity: 0.1;
 -khtml-opacity: 0.1;
 opacity: 0.1;

Каждую строчку отдельно.

Спасибо!

mamay · June 18, 2008

Ээээх...

Какой облом.

В Opera не работает!

А какой был балет!

klierik · June 18, 2008

filter:alpha(opacity=50); /* IE 5.5+*/
-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */

src: http://www.internet-technologies.ru/articl...ticle_1028.html

вообще есси было б время... то сделал бы поинтересне..

с закругленными углами... и большего размера...

но только под нормальные браузеры (ИЕ не нормальный)

в общем, мне кажется, что если искать универсальное решение,

и в случае когда дизайн не столь щепетильный,

и есть возможность от него отклониться в сторону верстальщика нежели дизайнера,

то вполне можно использовать данный вариант.

а еще у ИЕ есть свой фильтр тени )))

но мне он не очень нравиться.. я его использовал только однажды. именно в крайнем случае.

update: уточняйте в следующий раз версию браузера.

Не работает в опере 9.5.

хотя уверен что немного с бубном потанцевать и все будет на ура

зы: пофикшу, как будет время... или будет надобность ))))

mamay · June 18, 2008

зы: пофикшу, как будет время... или будет надобность ))))

Про-о-о-сим, про-о-осим!

klierik · June 19, 2008

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

 <!--link rel="stylesheet" type="text/css" href="../../jsgui/css/source/base.css" /-->
 <link rel="stylesheet" type="text/css" href="css/styles.css" />
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

 <title>Shadow Box</title>
</head>

<body>



<!--START STRUCTURE-->

 <div class="shwBox">
 <div class="shdw">
 <div class="s1"></div>
 <div class="s2"></div>
 <div class="s3"></div>
 </div>
 <div class="data">
 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
 </div>
 </div>

<!--END STRUCTURE-->



</body>
</html>

css:

/****************************************************************************************************/
/********** Shadow Box ******************************************************************************/

body { padding: 32px; font-family: Tahoma; color: #333; }
div { font-size: 0; }
* {margin: 0px; padding: 0px; outline: none;}
p { font-size: 11px; }
div.shwBox { position: relative; }

 /****** shadow constructor ******/
 div.shdw {
 position: absolute;
 height: 100%; width: 100%;
 overflow: visible;

 /* for ie6 */
 _height: expression(parentNode.offsetHeight + 'px');
 _width: expression(parentNode.offsetWidth + 'px');

 }

 /***** shadow layers *****/
 div.shdw div.s1,
 div.shdw div.s2,
 div.shdw div.s3,
 div.shdw div.s4 {
 position: absolute;
 left: 0; top: 0;
 background-color: #000;
 height: 100%; width: 100%;

 /* for ie6 */
 _height: expression(parentNode.offsetHeight + 'px');
 _width: expression(parentNode.offsetWidth + 'px');
 }
 div.shdw div.s1 {
 left: 3px; top: 3px;

 filter:alpha(opacity=10);
 -moz-opacity: 0.1;
 -khtml-opacity: 0.1;
 opacity: 0.1;
 }
 div.shdw div.s2 {
 left: 2px; top: 2px;

 filter:alpha(opacity=15);
 -moz-opacity: 0.15;
 -khtml-opacity: 0.15;
 opacity: 0.15;
 }
 div.shdw div.s3 {
 top: 1px; left: 1px;

 filter:alpha(opacity=20);
 -moz-opacity: 0.2;
 -khtml-opacity: 0.2;
 opacity: 0.2;
 }

 /****** content ******/
 div.data { 
 padding: 5px 7px 8px; position: relative; z-index: 2;
 background-color: #fff;
 border: 1px solid #eee;
 border-bottom: none; border-right: none;
 }

+ не много модернизировал.. исключил один тег

пытался под ИЕ6 уменьшить хаки, но не получается. уж слишком он дубовый (((

а так, юзайте на здоровье

mamay · June 19, 2008

Дело мастера боится.

Sign In

Тень блока без background: url

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information