Исчезновение границы (css) - PullRequest
Новая
       2

Исчезновение границы (css)

1 голос
/ 25 мая 2011

Вот изображение того, с чем я работаю:

Мне нужны границы ниже вертикальной строки меню (слева), чтобы они исчезали (одна поднимается, а другая опускается). Как бы я сделал, чтобы эти две границы исчезли? Кажется, что-то вроде блоков сейчас. Я предпочитаю не использовать JavaScript, но я, вероятно, сделаю все необходимое (я стараюсь сделать сайт как можно более легким).

EDIT

Под исчезновением я подразумеваю пространство, а не время.

Ответы [ 5 ]

3 голосов
/ 25 мая 2011

Вы можете использовать два затухающих изображения как background-image

li.edge_top, li.edge_bottom {
  background-position: right;
  background-repeat: no-repeat;
}

li.edge_top {
  background-image: url:('fadeout_top.png');
}

li.edge_bottom {
  background-image: url:('fadeout_bottom.png');
}
3 голосов
/ 25 мая 2011

Вы можете сделать кучу блоков высотой 1px с последовательно более светлыми краями справа.

(Предположим, вы имеете в виду "исчезать" как в пространстве, а не во времени)

2 голосов
/ 25 мая 2011

Вы можете попробовать новый атрибут CSS3 border-right-image (http://www.css3.info/preview/border-image/) с высоким градиентом PNG. Однако в большинстве браузеров это не будет широко поддерживаться. Возможно, вам лучше создать изображение с правильнымустановите градиент и установите его в качестве background-image для классов .edge_bottom и .edge_top css (также обязательно удалите существующую границу из этих классов)

0 голосов
/ 25 мая 2011

CSS3 градиентов на помощь!

Live Demo

Примечание: Градиенты установлены только для Firefox,Я не могу протестировать Webkit, но он должен быть примерно таким же.

0 голосов
/ 25 мая 2011

Это удалит его, эти псевдоэлементы не поддерживаются в старых браузерах 

ul.vertical_menu > li:first-child {
    border-right:none;
}
ul.vertical_menu > li:last-child {
    border-right:none;
}

http://jsfiddle.net/5Ceb5/

...