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 :/

--
Peter

do góry

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>

do góry

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

do góry

On Tue, 19 Apr 2011 09:05:57 +0100, Peter May <p...@o...pl> 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 :/

http://css-tricks.com/examples/GradientBorder/

--
regards, porneL

do góry

W dniu 19-04-2011 21:49, porneL pisze:
> On Tue, 19 Apr 2011 09:05:57 +0100, Peter May <p...@o...pl> 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 :/
>
> http://css-tricks.com/examples/GradientBorder/

Dzięki. Przyzwoity link :-)

--
Peter

do góry