23.01.2012, 15:54
|
|
Аспирант
|
|
Регистрация: 25.05.2011
Сообщений: 93
|
|
|
Помогите сверстать линию
Картинка прилеплена, я вот непонимаю какие свойства css надо использовать чтобы сделать такую линию???
так чтобы вертикально, да ещё чтобы концы были такими вот постепенно изчезающие + линия должна растягиватся по мере увеличения содержимого div'а, хелп народ яваскрипта!!!
вложение снизу и слева прям под словом "миниатюры" если кто невидит, линия такая, счёлкните на неё и в большом экране откроется
Последний раз редактировалось Gamestop, 23.01.2012 в 15:56.
|
|
23.01.2012, 16:02
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
<!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>
|
|
26.01.2012, 07:39
|
|
Новичок на форуме
|
|
Регистрация: 18.08.2011
Сообщений: 6
|
|
|
Опять градиенты? Но зачем?
Бокс-шедоу с блюром будет достаточно, height: 100% (по идее), а не в пикселях.
|
|
26.01.2012, 09:58
|
|
Профессор
|
|
Регистрация: 01.10.2011
Сообщений: 422
|
|
|
Сообщение от Nyamo
|
|
Опять градиенты? Но зачем?
|
ануко удиви меня,  сделай это с бокс шадоу..... |
|
26.01.2012, 11:01
|
|
Лаборант :-)
|
|
Регистрация: 08.11.2011
Сообщений: 806
|
|
сделать с тенями похожее можно
только в примере ниже не обеспечивается растягивание заливки по высоте при изменении высоты блока
в 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., 26.01.2012 в 11:07.
|
|
26.01.2012, 11:53
|
|
Профессор
|
|
Регистрация: 01.10.2011
Сообщений: 422
|
|
|
Pavel M.,
ну это да, втом то и дело что оно не растяница...
|
|
26.01.2012, 13:39
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
|
Nyamo,
Pavel M.,
А смысл? И что вы этим хотите показать? что вы мастера хаков, зачем городить черт знает что, тогда когда браузеры позволяют это делать без нагромождения чего-то там. Любым цветом, любым стилем.
|
|
26.01.2012, 13:54
|
|
Лаборант :-)
|
|
Регистрация: 08.11.2011
Сообщений: 806
|
|
Сообщение от Seva1986
|
Pavel M.,
ну это да, втом то и дело что оно не растяница...
|
можно с этим бороться с помощью inset, т.е. тень пойдет от краев к центру
<!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>
|
|
26.01.2012, 13:59
|
|
Лаборант :-)
|
|
Регистрация: 08.11.2011
Сообщений: 806
|
|
|
Сообщение от devote
|
Nyamo,
Pavel M.,
А смысл? И что вы этим хотите показать? что вы мастера хаков, зачем городить черт знает что, тогда когда браузеры позволяют это делать без нагромождения чего-то там. Любым цветом, любым стилем.
|
во-первых, у box-shadow лучше поддержка браузерами, даже ie9 нормально с этим свойством работает
> И что вы этим хотите показать?
хочу показать, что есть и другие возможности имитации градиентов
свойство float тоже было придумано не для макета всего сайта, но применяется часто для этого
никто не заставляет применять этот пример на сайтах, но для изучения css полезно |
|
26.01.2012, 19:08
|
|
Новичок на форуме
|
|
Регистрация: 18.08.2011
Сообщений: 6
|
|
|
Паша все правильно сказал.
Между прочим, это не хак, а базовое ксс3-свойство, которое знать сейчас необходимо.
|
|
|
|
