1px border als gradient

[chem]

Ik wil een 1px-border als gradient; nu moet dat kunnen in o.a. webkit, maar ik heb geen flauw idee hoe.

Ter illustratie de bovenkant van de border:



Nu is de afgeronde hoek geen probleem, maar een gradient ipv een solid border-color krijg ik niet voor elkaar.

Heeft iemand dit al eens gedaan en kan hij mij vertellen hoe?

[Dark Blue]

Nou, ik vind hier zo al wat...
http://stackoverflow.com/...127/css3-gradient-borders

Had je al gezocht op 'CSS3 gradient border' ?
Je zou ook even goed kunnen kijken naar de ondersteuning door diverse browers.

[samo]

code:

background-color: rgba(255,255,255,0.5);

Niet als gradient (kan volgens mij ook niet in 1px) maar wel doorzichtig. Met rgba kan je als laatste parameter de opacity meegeven.

[chem]

Dark Blue schreef op woensdag 18 mei 2011 @ 09:28:
Nou, ik vind hier zo al wat...
http://stackoverflow.com/...127/css3-gradient-borders

Had je al gezocht op 'CSS3 gradient border' ?
Je zou ook even goed kunnen kijken naar de ondersteuning door diverse browers.

Ik heb me al de pestpokken gezocht ( http://www.webkit.org/blog/175/introducing-css-gradients/ al 3x gelezen en uitgeprobeerd )

De voorbeelden die ze daar aangeven doen een gradient op de verkeerde as voor mij:
"When an element has a border that is larger than a single CSS pixel, each line of pixels uses the next color specified in this property, from the outside in"

Ik wil niet outside-in maar over de lengte van de border...

@samo: hm ja, alleen heb ik dan nog geen gradient; wel een goed idee!

[OkkE]

Zo ver ik weet is zoiets (op dit moment nog) niet mogelijk met CSS3 gradients als border-image.

Ik heb niet ontzettend veel ervaring met CSS3 gradients als border-image, maar border-radius leek niets meer te doen bij het instellen van border-image (iedergeval in -webkit-), en de afzonderlijke border-top-image, etc lijken ook nog niet echt te werken...

Een soort van workaround die ik zo even kan bedenken is een tweede element (bijv. ::before / ::after) van 1px hoog absoluut te positioneren over de border-top heen, en deze een gradient background te geven.

[Bosmonster]

Transparant PNG'tje in de rechterbovenhoek plaatsen op -1/-1?

Zie zo met de huidige browsermogelijkheden geen andere oplossing.

[OkkE]

Dit is een idee... http://azwart.nl/got/got6.html (Webkit & FF4)

Probleem is de zwarte pixels rechts, van de rounded corners die net over de gradients vandaan komen. Verder is deze oplossing alleen geschikt voor background van één kleur...

De essentie:
.

code:

div:before,
div::before,
div:after,
div::after {
    content: " ";
    height: 5px;
    width: 100%;
    position: absolute;
    left: 10px;
    top: -5px;
    background: linear-gradient(left, rgba(0,0,0,1) 0%,rgba(255,255,255,1) 100%);
}
div:after,
div::after {
    top: auto;
    bottom: -5px;
}

-- edit --

chem schreef op woensdag 18 mei 2011 @ 09:41:
Ik heb me al de pestpokken gezocht ( http://www.webkit.org/blog/175/introducing-css-gradients/ al 3x gelezen en uitgeprobeerd )
[...]
Ik wil niet outside-in maar over de lengte van de border...

Die oplossing is inderdaad niet wat je zoekt; dat is de border (wanneer meerdere pixels) van buiten naar binnen andere kleuren geven.
Je kunt: rood-wit-blauw doen maar ook zwart-grijs-wit, waarbij het tweede geval een gradient geeft.

[Voor 34% gewijzigd door OkkE op 18-05-2011 11:20]

[chem]

OkkE schreef op woensdag 18 mei 2011 @ 10:43:
Dit is een idee... http://azwart.nl/got/got6.html (Webkit & FF4)

Probleem is de zwarte pixels rechts, van de rounded corners die net over de gradients vandaan komen. Verder is deze oplossing alleen geschikt voor background van één kleur...

Als ik de rounded borders top-right en bottom-right uitzet ziet het er top uit, en daar zie je de borders toch niet.

Super bedacht, eens zien hoe we dit aan de praat krijgen incl... IE support (maar die uiteraard mét plaatje).

Thanks!

[OkkE]

Voor IE8 en hoger werkt de background-gradient (d.m.v. een filter) wel, alleen het probleem is dat IE8 en lager geen :before en :after ondersteunen. Dus voor IE zal je ben ik bang sowieso extra elementen (of via Javascript) moeten werken. En nog een probleem is uiteraard de border-radius in IE...

Edit: Dat zeg ik verkeerd. Voor IE8 lijkt background-gradient (d.m.v. filter) wel op normale elementen te werken, niet op :before en :after. Wel lijkt IE8 de :before en :after met background-image te ondersteunen.

-- edit --

Overgens, bedenk ik me nu, is het denk ik nog netter om de gradient van transparant naar de background-color te laten lopen (van de :before en :after), zo kun je de border-color eenvoudig aanpassen zonder ook je gradients te hoeven aanpassen.

[Voor 49% gewijzigd door OkkE op 18-05-2011 11:59]

[chem]

Het werkt, helemaal geweldig \o/

maar voor IE zal het idd nog een klusje worden; ik denk background afbeeldingen en wellicht (als border-radius.htc geen uitkomst biedt) ook de hoekjes maar met afbeeldingen. Stomme IE.

[Bosmonster]

Volgens mij kun je :before en :after wel redelijk simuleren in IE middels expressions. Dan heb je iig geen JS of extra elementen nodig.

Nadeel is wel dat expressions gruwelijk traag zijn en je dus wel opbouw zult zien.

[Voor 24% gewijzigd door Bosmonster op 18-05-2011 12:02]