Можете ли вы создать эту затененную градиентную линию в стиле CSS3? - PullRequest
Новая
       0

Можете ли вы создать эту затененную градиентную линию в стиле CSS3?

8 голосов
/ 12 марта 2012

Вот изображение того, что я пытаюсь произвести.

Мне удалось создать стиль <hr />, используя SVG в качестве фонового изображения для создания этого эффекта,но хотел бы иметь возможность производить то же самое с использованием CSS3, но у меня были проблемы.

Мне было интересно, знает ли кто-нибудь из CSS-гуру способ достижения того же самого или это невозможно с чистым CSS?

Спасибо за любую помощь.

Ответы [ 2 ]

8 голосов
/ 12 марта 2012

Я создаю эффект, который вы хотите, пожалуйста, проверьте это:

http://jsfiddle.net/fx5Lk/

0 голосов
/ 12 марта 2012

Я пытался создать эффект с тремя слоями, двумя фонами с непрозрачностью альфа.Тот, который начинается сверху и заканчивается в середине, другой, который начинается в середине и заканчивается снизу, и один фон с ломтиком изображения , повторенного по оси Y.

Я следуюэтот URL для учебника по слоям: http://css -tricks.com / css3-Градиенты /

HTML-код, работает только в Chrome, заменить / перезаписать свойство "-webkit-градиент"для конкретного броузера: 

<html>
    <head>
    <style>
    .gradient {
    width:76px;
    height:200px;
    border:0;
    background-image:-webkit-gradient(linear, 0% 0%, 0% 50%, from(rgba(192,192,192,1)), to(rgba(192,192,192,0))),
                    -webkit-gradient(linear, 0% 50%, 0% 100%, from(rgba(192,192,192,0)), to(rgba(192,192,192,1))),
                    url(http://i41.tinypic.com/omwky.gif);
    background-repeat:repeat-y,repeat-y, repeat-y;
    }
    </style>
    </head>
<body>
    <hr class="gradient"/>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...