Re: border, color i gradient - Grupy dyskusyjne w eGospodarka.pl

eGospodarka.pl › Grupy › pl.comp.www › border, color i gradient › Re: border, color i gradient

Path: news-archive.icm.edu.pl!news.rmf.pl!agh.edu.pl!news.agh.edu.pl!news.onet.pl!.PO
STED!not-for-mail
From: Peter May <p...@o...pl>
Newsgroups: pl.comp.www
Subject: Re: border, color i gradient
Date: Tue, 19 Apr 2011 12:44:58 +0200
Organization: http://onet.pl
Lines: 37
Message-ID: <iojp3i$aeb$1@news.onet.pl>
References: <iojfpd$7ct$1@news.onet.pl> <iojlcl$ipm$1@inews.gazeta.pl>
NNTP-Posting-Host: uw210.internetdsl.tpnet.pl
Mime-Version: 1.0
Content-Type: text/plain; charset=UTF-8; format=flowed
Content-Transfer-Encoding: 8bit
X-Trace: news.onet.pl 1303209907 10699 80.55.152.210 (19 Apr 2011 10:45:07 GMT)
X-Complaints-To: n...@o...pl
NNTP-Posting-Date: Tue, 19 Apr 2011 10:45:07 +0000 (UTC)
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; pl; rv:1.9.2.15) Gecko/20110303
Lightning/1.0b2 Thunderbird/3.1.9
In-Reply-To: <iojlcl$ipm$1@inews.gazeta.pl>
Xref: news-archive.icm.edu.pl pl.comp.www:398740
[ ukryj nagłówki ]
W dniu 19-04-2011 11:41, satellite pisze:
> On 2011-04-19 10:05, Peter May wrote:
>> Albo źle szukam albo nie da się przy pomocy samego CSS-a zrobić gradient
>> kolorów na borderze. Mam na myśli coś takiego:
>>
>> border-left:1px solid linear-gradient(top, #ffffff, #999999);
>>
>> Chyba, że pozostaje mi tylko grafika jako tło :/
>
> zdaje sie ze 'border' nie wspolpracuje z 'border-image' - jeden wylacza
> drugi (tak sie zachowuje w firefox); no i skladnia takich potworow jest
> dosc tajemnicza; efekt podobny do tego jaki chcesz osiagnac mozna by
> uzyskac tak :
>
> -moz-border-image : url('gradient.svg') 0 0 0 20 / 0px 0px 0px 5px
> stretch stretch;
>
> gradient.svg :
>
> <?xml version="1.0"?>
> <svg xmlns="http://www.w3.org/2000/svg" width="600px" height="600px"
> version="1.1" >
> <defs>
> <linearGradient id="gradient" x1="0" y1="50%" x2="0" y2="100%">
> <stop style="stop-color:#fff" offset="0" />
> <stop style="stop-color:#999;" offset="1" />
> </linearGradient>
> </defs>
> <rect style="fill:url(#gradient);" width="20px" height="580px" x="0px"
> y="10px" />
> </svg>

Dzięki. Już zapomniałem o SVG :-) Niezłe to i działa. Jak zwykle nIE w
IE :-/

--
Peter