[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Как это верстается ?
grant
http://pixs.ru/showimage/13png_4945869_2708813.png

только начинаю заниматься версткой, как вообще уголки эти верстать?
если лень код писать, хотя бы логику скажите плиз )



Спустя 32 минуты, 19 секунд (16.08.2011 - 20:52) Bezdna написал(а):
Цитата (grant @ 16.08.2011 - 20:19)
как вообще уголки эти верстать?


В простейшем варианте - картинками.

Спустя 24 минуты, 13 секунд (16.08.2011 - 21:16) blazze написал(а):
в простейшем варианте:

-webkit-border-top-left-radius: 5px;
-
webkit-border-top-right-radius: 5px;
-
moz-border-radius-topleft: 5px;
-
moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;

Спустя 57 минут, 12 секунд (16.08.2011 - 22:13) inpost написал(а):
grant
У тебя есть левая сторона закруглённая, правая закруглённая, и центральная сплошная. Сплошную делаешь через background-image. Боковые - как тебе надо, серьёзно, тебе надо разделить картинку на 3 части:
http://my.jetscreenshot.com/demo/20110816-bnxk-8kb
цифра 2 - это задний фон в ширину 1px

Спустя 1 час, 19 минут, 42 секунды (16.08.2011 - 23:33) sebastjan написал(а):
Ну я просто гением себя чуствую :D
Могли бы в поиске эту тему поискать, уже неоднократно было :D

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title></head>
<style>

#blok{
width: 200px;
background-color: #33FFFF;
border: 1pt solid #0000FF;
}
.ugli{
height: 10px;
background-color: #CC0000;
}
.ugli .im_1{
float: left;
height: 10px;
width: 10px;
}
.ugli .im_2{
height: 8px;
width: 10px;
float: right;
}
.content{
background-color: #FF33CC;
margin: 5px;
padding: 5px;
}
.content .kart{
height: 20px;
width: 20px;
float: left;
border: thin solid #3300FF;
position: relative;
}
</style>
<body>
<div
id="blok">
<div
class="ugli">
<div
class="im_1"><img src="img/ugol.jpg" border="0" height="10" width="10"></div>
<div
class="im_2"><img src="img/ugol.jpg" border="0" height="10" width="10"></div>
</div>

<div
class="content"><br>KONTENT<br>
xxx xxx xx xxxx xx xxx xx xx xx aa aa aaa aa aa aa aa aa aa aa aa aa a aaa
bbbb b bb bb b bbbbb b bbbb bbbb b ss sdsfhg fhgkybjk ihihi ojioj</div>
<!--kontent mashtabiruen blok po vertikali pri dobavleniii texta-->

<div class="ugli">
<div
class="im_1"><img src="img/ugol.jpg" border="0" height="10" width="10"></div>
<div
class="im_2"><img src="img/ugol.jpg" border="0" height="10" width="10"></div>
</div>

</div>
</body>
</html>


Спустя 7 часов, 15 минут, 29 секунд (17.08.2011 - 06:48) grant написал(а):
Всем спасибо.
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.