Помогите сверстать линию
Вложений: 1
Картинка прилеплена, я вот непонимаю какие свойства css надо использовать чтобы сделать такую линию???
так чтобы вертикально, да ещё чтобы концы были такими вот постепенно изчезающие + линия должна растягиватся по мере увеличения содержимого div'а, хелп народ яваскрипта!!! вложение снизу и слева прям под словом "миниатюры" если кто невидит, линия такая, счёлкните на неё и в большом экране откроется |
<!doctype html>
<html>
<head>
<style>
div {
width: 1px;
height: 100px;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eee), color-stop(50%,#000), color-stop(100%,#eee));
background-image: -webkit-linear-gradient(top, #eee 0%,#000 50%,#eee 100%);
background-image: -moz-linear-gradient(top, #eee 0%, #000 50%, #eee 100%);
background-image: -ms-linear-gradient(top, #eee 0%,#000 50%,#eee 100%);
background-image: -o-linear-gradient(top, #eee 0%,#000 50%,#eee 100%);
background-image: linear-gradient(top, #eee 0%,#000 50%,#eee 100%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
|
Опять градиенты? Но зачем?
Бокс-шедоу с блюром будет достаточно, height: 100% (по идее), а не в пикселях. |
Цитата:
|
сделать с тенями похожее можно
только в примере ниже не обеспечивается растягивание заливки по высоте при изменении высоты блока в ie < 9 пример не работает <!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8">
<title>demo</title>
<style>
div {
width: 1px;
height: 100px;
overflow:hidden;
}
div > b {
display: block;
height: 1px;
position: relative;
top: 50%;
background: #000;
-webkit-box-shadow: 0 0 30px 30px black;
box-shadow: 0 0 30px 30px black;
}
</style>
</head>
<body>
<div><b></b></div>
</body>
</html>
|
Pavel M.,
ну это да, втом то и дело что оно не растяница... |
Nyamo,
Pavel M., А смысл? И что вы этим хотите показать? что вы мастера хаков, зачем городить черт знает что, тогда когда браузеры позволяют это делать без нагромождения чего-то там. Любым цветом, любым стилем. |
Цитата:
<!DOCTYPE html>
<html>
<head>
<metacharset=UTF-8">
<title>demo</title>
<style>
div {
position: absolute;
left: 10%;
width: 1px;
height: 100px;
overflow: hidden;
}
div + div {
left: 30%;
height: 150px;
}
div + div + div {
left: 50%;
height: 200px;
}
b {
display: block;
position: relative;
width: 100px;
height: 100%;
left: 50%;
margin-left: -50px;
background: black;
-webkit-box-shadow: 0 0 30px 20px white inset;
box-shadow: 0 0 30px 20px white inset;
}
</style>
</head>
<body>
<div><b></b></div>
<div><b></b></div>
<div><b></b></div>
</body>
</html>
|
Цитата:
> И что вы этим хотите показать? хочу показать, что есть и другие возможности имитации градиентов свойство float тоже было придумано не для макета всего сайта, но применяется часто для этого никто не заставляет применять этот пример на сайтах, но для изучения css полезно |
Паша все правильно сказал.
Между прочим, это не хак, а базовое ксс3-свойство, которое знать сейчас необходимо. |
| Часовой пояс GMT +3, время: 11:29. |