Привьюшка отбрасывающая тень
Новая тема Написать ответ
# Пн Июл 30, 2007 11:28 pmSVETKA-PIPETKA Зарег.: 22.07.2007 ; Сообщ.: 11Ответить с цитатой
как сделать чтоб привьюшки фоток в галерее отбрасывали тень? как здесь - http://www.igorlaptev.com
# Пн Июл 30, 2007 11:55 pmВацлав Зарег.: 21.02.2006 ; Сообщ.: 4965Ответить с цитатой
Положить в background ячейки таблицы (тэга td) или прописать в css стиля изображение "белый лист отбрасывающий тень". Можно и другими средствами css, но будет немного не так выглядеть.
# Вт Июл 31, 2007 12:44 amSVETKA-PIPETKA Зарег.: 22.07.2007 ; Сообщ.: 11Ответить с цитатой
если можно поподробней как это сделать через ЦСС?
# Ср Авг 01, 2007 5:11 pmgraphh Зарег.: 27.06.2007 ; Сообщ.: 213Ответить с цитатой
пользуйся Wink
http://www.alistapart.com/articles/onionskin
# Ср Авг 01, 2007 7:05 pmSVETKA-PIPETKA Зарег.: 22.07.2007 ; Сообщ.: 11Ответить с цитатой
Спасибки!
Если есть на русском просто лопну от счастья Smile
# Чт Авг 02, 2007 11:34 pmъъъ Зарег.: 07.08.2006 ; Сообщ.: 663Ответить с цитатой
Та юзай на здоровье.
Вот тебе первый код
Код:

<!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>&nbsp;</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>&nbsp;</H4></DIV>
</DIV></BODY></HTML>

Новая тема Написать ответ    ГЛАВНАЯ ~ ТЕХНИЧЕСКИЕ ВОПРОСЫ
 
Любое использование материалов, размещенных на ArmadaBoard.com, без разрешения владельцев ArmadaBoard.com запрещено.