eGospodarka.pl
eGospodarka.pl poleca

eGospodarka.plGrupypl.comp.wwwborder, color i gradient
Ilość wypowiedzi w tym wątku: 5

  • 1. Data: 2011-04-19 08:05:57
    Temat: border, color i gradient
    Od: Peter May <p...@o...pl>

    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


  • 2. Data: 2011-04-19 09:41:47
    Temat: Re: border, color i gradient
    Od: satellite <p...@g...pl>

    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>


  • 3. Data: 2011-04-19 10:44:58
    Temat: Re: border, color i gradient
    Od: Peter May <p...@o...pl>

    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


  • 4. Data: 2011-04-19 19:49:28
    Temat: Re: border, color i gradient
    Od: porneL <n...@p...net>

    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


  • 5. Data: 2011-04-20 07:52:58
    Temat: Re: border, color i gradient
    Od: Peter May <p...@o...pl>

    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

strony : [ 1 ]


Szukaj w grupach

Szukaj w grupach

Eksperci egospodarka.pl

1 1 1

Wpisz nazwę miasta, dla którego chcesz znaleźć jednostkę ZUS.

Wzory dokumentów

Bezpłatne wzory dokumentów i formularzy.
Wyszukaj i pobierz za darmo: