Блог старого компьютера

Блог старого компьютера


Главная html & css Тянущаяся рамка по горизонтали и вертикали html

Тянущаяся рамка по горизонтали и вертикали html

13.01.2012 08:48 Администратор html & css
Печать PDF

Дали мне сегодня квадратное изображение и Попросили меня сегодня сделать тянущуюся рамку на html блоках да еще и с небольшой тенью, чтоб тянулась по горизонтали и вертикали. После нескольких минут все было готово. Вот решил выложить реализацию может кому и пригодится.

 

Исходная картинка:

Режем ее в графическом реадкторе на части и не забываем про тень. После того как порезали приступаем к верстке. Создаем html файл и приступаем.Так как исходный квадрат у нас светлый я решил покрасить окно браузера сразу же в черный цвет, чтоб было более видно. Зачистка обтекания так же тут не особо важна я думаю, но по привычке все же ее применил  Собственно сам код:

<html>
<head>

<style>
body{
background:black;
}

.b1{
background: url("img/1.png") no-repeat;
width:12px;
height:12px;
float:left;
}

.b2{
background: url("img/2.png") repeat-x;
height:12px;
margin-left:12px;
margin-right:12px;
}

.b3{
background: url("img/3.png") no-repeat;
width:12px;
height:12px;
float:right;
}

.b4{
background: url("img/4.png") repeat-y;
width:12px;
height:auto;
}

.b5{
background:white;
margin-left:12px;
margin-right:12px;
}

.b6{
background: url("img/6.png") repeat-y;
width:12px;
height:auto;
}

.b7{
background: url("img/7.png") no-repeat;
width:12px;
height:12px;
float:left;
}

.b8{
background: url("img/8.png") repeat-x;
height:12px;
margin-left:12px;
margin-right:12px;
}

.b9{
background: url("img/9.png") no-repeat;
width:12px;
height:12px;
float:right;
}
.left{
background: url("img/4.png") repeat-y;
}

.right{
background: url("img/6.png") right repeat-y;
}

.cls{
clear:both;
}
</style>

</head>
<body>
<div class="b1"></div>
<div class="b3"></div>
<div class="b2"></div>
<div class="cls"></div>
<div class="left">
<div class="right">
<div class="b5">1111111111111<br />11111111</div>
</div>
</div>
<div class="cls"></div>
<div class="b7"></div>
<div class="b9"></div>
<div class="b8"></div>
</body>
</html>

Архив с результатом

Добавить комментарий


Защитный код
Обновить

Поиск

Голосование

Что Вы думаете на счет битрикса?