|
|
|
|
|
|
|
| Положить в background ячейки таблицы (тэга td) или прописать в css стиля изображение "белый лист отбрасывающий тень". Можно и другими средствами css, но будет немного не так выглядеть. |
|
|
|
|
|
| если можно поподробней как это сделать через ЦСС? |
|
|
|
|
|
|
|
Спасибки!
Если есть на русском просто лопну от счастья  |
|
|
|
|
|
Та юзай на здоровье.
Вот тебе первый код
| Код: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HEAD>
<TITLE>drop shadow</TITLE>
<META http-equiv=Content-Type content="application/xhtml+xml; charset=UTF-8">
<STYLE type=text/css>
#box2 {
DISPLAY: block; LEFT: 2px;
POSITION: absolute; TOP: 2px;
BORDER: #aaa 2px solid;
BACKGROUND: #999;
WIDTH: 192px;
HEIGHT: 142px
}
#box3 {
DISPLAY: block; LEFT: 2px; POSITION: absolute; TOP: 2px;
BORDER: #888 2px solid;
BACKGROUND: #777;
WIDTH: 184px;
HEIGHT: 134px
}
#box1 {
BORDER-RIGHT: #eee 2px solid;
DISPLAY: block;
BACKGROUND: #ccc;
LEFT: 50px;
WIDTH: 200px;
POSITION: relative;
TOP: 20px;
HEIGHT: 150px
}
#box4 {
BORDER-RIGHT: #444 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ff8 1px solid; DISPLAY: block; PADDING-LEFT: 5px; RIGHT: 0px; BACKGROUND: #fc6; PADDING-BOTTOM: 5px; BORDER-LEFT: #ff8 1px solid; WIDTH: 190px; BOTTOM: 0px; PADDING-TOP: 5px; BORDER-BOTTOM: #444 1px solid; POSITION: absolute; HEIGHT: 140px
}
</STYLE>
</head>
<body>
<DIV id=info><BR>
<DIV id=box1>
<DIV id=box2>
<DIV id=box3>
<DIV id=box4>Text</DIV>
</DIV></DIV></DIV><BR><BR></DIV>
</body>
</html>
|
-------
Вот тебе второй код Тут больше примеров.
-------
| Код: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HEAD>
<TITLE>simple fluid drop shadows</TITLE>
<META http-equiv=Content-Type content="application/xhtml+xml; charset=UTF-8">
<STYLE type=text/css>#info {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 2em; PADDING-TOP: 2em
}
.out {
BORDER-RIGHT: #ddd 1px solid; BORDER-TOP: #ddd 1px solid; DISPLAY: block; BACKGROUND: #bbb; MARGIN: 1em 0px; BORDER-LEFT: #ddd 1px solid; BORDER-BOTTOM: #ddd 1px solid; POSITION: relative
}
.in2 {
BORDER-RIGHT: #999 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #999 1px solid; DISPLAY: block; PADDING-LEFT: 1px; BACKGROUND: #777; PADDING-BOTTOM: 1px; MARGIN: 1px; BORDER-LEFT: #999 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #999 1px solid; POSITION: relative
}
.in {
BORDER-RIGHT: #555 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #555 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: normal; BACKGROUND: #fff; PADDING-BOTTOM: 5px; BORDER-LEFT: #555 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #555 1px solid; POSITION: relative; TEXT-ALIGN: center
}
.ltin {
LEFT: -5px
}
.tpin {
TOP: -5px
}
.rtin {
LEFT: 5px
}
.narrow {
WIDTH: 8em
}
.normal {
WIDTH: 180px
}
.wide {
WIDTH: 18em
}
.image {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; WIDTH: 412px; PADDING-TOP: 0px
}
H4 {
FONT-WEIGHT: bold; COLOR: #000
}
</STYLE>
<META content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD>
<BODY>
<DIV id=wrapper>
<DIV class=heading></DIV>
<H2> </H2>
<DIV id=info>
<DIV class="out narrow">
<DIV class="in ltin tpin">
<H4>Narrow</H4>
<P>тут немножко текста .</P>
</DIV></DIV>
<DIV class="out normal">
<DIV class="in ltin tpin">
<H4>Medium</H4>
<P>тут текста уже побольше и заметь, что тень растягивается вместе с текстовым боксом </P>
</DIV></DIV>
<DIV class="out wide">
<DIV class="in ltin tpin">
<H4>Wide</H4>
<P>Как и в предыдущем случае, только еще больше инфы.</P>
</DIV></DIV>
<H4>А вот теперь тень для картинки (тень можно сделать с любой стороны, см. код) </H4>
<DIV class="out image">
<DIV class="in rtin tpin"><IMG
src="images/pic3.jpg" alt=картинка width="400" height="250">
</DIV>
</DIV>
<H4>Тень со всех сторон </H4>
<DIV class="out normal">
<DIV class=in2>
<DIV class=in>
<H4>Medium</H4>
<P>тут можно написать че-нить</P></DIV></DIV></DIV>
<H4 class=clear> </H4></DIV>
</DIV></BODY></HTML>
|
|
|
|
|
|
|
|
