CSS3 gradient

Door Write Down op 06-04-2012 16:07

1.890 views

Hello,

Ik probeer naast een p-element een mooie border te verkrijgen. Dat lukt ook. Ik zou het eigenlijk nog een beetje willen verfraaien. Ten minste, als de browsers CSS3 ondersteunt. Momenteel is de lijn gewoon een afbeelding van 2x dat herhaald wordt over de y-as. Wat ik zou willen is een gradient toepassen op die afbeelding. Neem nu deze afbeelding. (het gaat over de lijn) Bovenaan 'smelt' die samen met de achtergrond, eveneens onderaan. Het deel daar tussen, het herhalende deel, is variabel.

Concreet, mijn vraag, is het mogelijk het effect na te bootsen in CSS3? (of toch min of meer)

Write Down

Reshad F

06-04-2012 16:24

ik zie geen afbeelding?

Wouter J

06-04-2012 17:04

@reshadd, dan kijk je niet goed. Het is een smalle lange afbeelding links.

@Write Down, dit kan je in CSS3 namaken: http://jsfiddle.net/Hnt4V/embedded/css,html,result/

Write Down

06-04-2012 22:04

Bedankt, ziet er vrij goed uit. Alleen, dit werkt relatief als ik het goed begrijp. Stel ik heb 5 regels tekst, dan is het fade-effect (of hoe jet het ook wilt noemen) over pakweg een paar pixels. Wanneer ik duizend lijnen heb, is het effect over een paar 100px. Is ook hier een fix voor?

Reageren

Inloggen om te reageren