Динамическая кайма
Опубликовано mustordont в пн, 21/09/2009 - 20:53
Доброго времени суток, lifehacker!
Расскажу о способе создания динамически масштабируемой рисованной каймы для элементов страницы.
Основным элементом является простая рамочка-рисунок аля:
Эта рамочка натягивается сверху и снизу с помощью классов стилей:
<style>
Далее все это разметить нужно всего лишь разметить =)
<br />
<br />
Наглядный примерчик
Расскажу о способе создания динамически масштабируемой рисованной каймы для элементов страницы.
Основным элементом является простая рамочка-рисунок аля:
Эта рамочка натягивается сверху и снизу с помощью классов стилей:
<style>
.field{
position:relative;
width: 245px; color:#000;
font: lighter 11px Verdana;
text-decoration:none;text-align:left;}
.top{
text-align: center;
padding: 10px 10px 0;
background: url(http://cdn.tns-global.com/Multimedia/RU/SurveyLayout/borders/back.gif) no-repeat top}
.b {padding: 7px;
background: url(http://cdn.tns-global.com/Multimedia/RU/SurveyLayout/borders/back.gif) no-repeat bottom}
</style>Далее все это разметить нужно всего лишь разметить =)
<div class="field" id="box_1"><div class="top">
Some weird words
</div><div class="b"></div></div>
<br />
<br />
<div class="field" id="box_2"><div class="top">
<img class="tooltipTNS" src="http://cdn.tns-global.com/multimedia/Ru/C47-09_Multon/2.jpg" />
<img class="tooltipTNS" src="http://cdn.tns-global.com/multimedia/Ru/C47-09_Multon/2.jpg" />
<br />
Fine juice with description
</div><div class="b"></div></div>
Наглядный примерчик
- ответить
Опубликовано mustordont в пн, 21/09/2009 - 21:02.- ответить
Опубликовано captain в вт, 22/09/2009 - 07:17.- ответить
Опубликовано Неизвестный (не проверено) в вт, 22/09/2009 - 09:04.- ответить
Опубликовано captain в вт, 22/09/2009 - 10:01.Отправить комментарий