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.gazeta.pl!not-for-mail
From: satellite <p...@g...pl>
Newsgroups: pl.comp.www
Subject: Re: border, color i gradient
Date: Tue, 19 Apr 2011 11:41:47 +0200
Organization: "Portal Gazeta.pl -> http://www.gazeta.pl"
Lines: 31
Message-ID: <iojlcl$ipm$1@inews.gazeta.pl>
References: <iojfpd$7ct$1@news.onet.pl>
NNTP-Posting-Host: hq.gosk.pl
Mime-Version: 1.0
Content-Type: text/plain; charset=UTF-8; format=flowed
Content-Transfer-Encoding: 8bit
X-Trace: inews.gazeta.pl 1303206102 19254 88.199.14.9 (19 Apr 2011 09:41:42 GMT)
X-Complaints-To: u...@a...pl
NNTP-Posting-Date: Tue, 19 Apr 2011 09:41:42 +0000 (UTC)
X-User: piotr-x
In-Reply-To: <iojfpd$7ct$1@news.onet.pl>
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:2.0b2pre)
Gecko/20100701 Lightning/1.1a1pre Shredder/3.2a1pre Mnenhy/0.7.6.0
Xref: news-archive.icm.edu.pl pl.comp.www:398739
[ ukryj nagłówki ]
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>