[html/css/js] HR met gradient?

[Firesphere]

Is het mogelijk om in een <hr> tag een linear-gradient te laten lopen?

reacties afgesplitst vanuit topic De Devschuur Coffee Corner - Iteratie 4

[ Voor 37% gewijzigd door BtM909 op 12-10-2013 00:08 ]

[F.West98]

---

Lijkt mij niet, is een border eigenlijk. Dus moet je met border-image werken

Oh wacht. Helpdesken mag niet

[ Voor 18% gewijzigd door F.West98 op 10-10-2013 21:29 ]

[mrc4nl]

Firesphere schreef op donderdag 10 oktober 2013 @ 21:17:
Is het mogelijk om in een <hr> tag een linear-gradient te laten lopen?

web expression 4 says no.



heel misschien wil een plaatje helpen maar anders zou ik het niet weten. srry.

[Alex)]

Firesphere schreef op donderdag 10 oktober 2013 @ 21:17:
Is het mogelijk om in een <hr> tag een linear-gradient te laten lopen?

Ja, dat is mogelijk.

(alleen getest in Chrome)

edit: IE 10 slikt het ook.

[ Voor 5% gewijzigd door Alex) op 10-10-2013 21:32 ]

[Firesphere]

Alex) schreef op donderdag 10 oktober 2013 @ 21:30:
[...]

Ja, dat is mogelijk.

(alleen getest in Chrome)

Hey, vet! Hoewel ik denk dat ik toch voor een apart divje ga, is die HR-oplossing toch mooier vind ik, daar is de tag ook voor bedacht

Werkt trouwens ook in Firefox en IE10

[Douweegbertje]

Firesphere schreef op donderdag 10 oktober 2013 @ 21:33:
[...]

Hey, vet! Hoewel ik denk dat ik toch voor een apart divje ga, is die HR-oplossing toch mooier vind ik, daar is de tag ook voor bedacht

Werkt trouwens ook in Firefox en IE10

http://jsfiddle.net/chriscoyier/GaEzp/35/

nog meer

beetje spuit elf, maar nu had ik de link al

[ Voor 6% gewijzigd door Douweegbertje op 10-10-2013 21:34 ]

[Firesphere]

douweegbertje schreef op donderdag 10 oktober 2013 @ 21:33:
[...]


http://jsfiddle.net/chriscoyier/GaEzp/35/

nog meer

beetje spuit elf, maar nu had ik de link al

Toch neem ik'm mee, die dropshadow-optie ziet er vet uit!

F.West98 schreef op donderdag 10 oktober 2013 @ 21:29:

---

Lijkt mij niet, is een border eigenlijk. Dus moet je met border-image werken

Oh wacht. Helpdesken mag niet

Jaja, geen helpdesken, maar dit was zonder zelf helemaal te testen een micro-vraagje. En het heeft duidelijk wat mensen die vele malen beter zijn met CSS dan ik getriggerd om even te fiddlen

[Douweegbertje]

nee, in feite had ik er wel van gehoord en deed ik de simpele zoekopdracht " <hr> tag een linear-gradient" (select -> zoeken naar) en toen kwam de link die ik je gaf op de 3e plaats terug in google

[Firesphere]

douweegbertje schreef op donderdag 10 oktober 2013 @ 21:38:
nee, in feite had ik er wel van gehoord en deed ik de simpele zoekopdracht " <hr> tag een linear-gradient" (select -> zoeken naar) en toen kwam de link die ik je gaf op de 3e plaats terug in google

Ow? Ik kreeg allerlei rare, zinloze resultaten met blogpostjes die hele verhalen ophingen over stylen van de hr, maar niets over de gradient

[Alex)]

Als je je bezoekers gek wilt maken doe je zoiets: http://jsfiddle.net/xEUVn/2/

(Ziet er in IE10 beter uit dan in Chrome)

[Douweegbertje]

Nja bewijst maar weer dat google mijn zoekresultaten opslaat en zich bedenkt dat ik alleen dev meuk wil lezen.

Alex) schreef op donderdag 10 oktober 2013 @ 21:40:
Als je je bezoekers gek wilt maken doe je zoiets: http://jsfiddle.net/xEUVn/2/

(Ziet er in IE10 beter uit dan in Chrome)

haha nice.
Ik heb een stoplicht: http://cochromestatus.com/ (weet originele source niet meer). Aan de achterkant kan ik ook de kleuren veranderen etc. Geniaal soms wat je met html5 css3 kunt doen

oh en: http://www.gesteves.com/experiments/starwars.html

[ Voor 71% gewijzigd door Douweegbertje op 10-10-2013 21:48 ]

[Firesphere]

Alex) schreef op donderdag 10 oktober 2013 @ 21:40:
Als je je bezoekers gek wilt maken doe je zoiets: http://jsfiddle.net/xEUVn/2/

(Ziet er in IE10 beter uit dan in Chrome)

Ik wil een voortgangs-indicator hebben, geen blink-lichtkrant-geval!

[Alex)]

Zeg dat dan! Ik denk niet dat een <hr /> semantisch gezien het juiste element is voor een voortgangsindicator, want is geen thema-wisseling. Voor progressbars is er sinds HTML5 een eigen element, en anders zou je een <div /> kunnen gebruiken.

"Vroegah" kon je een echte Win32-progressbar in je webpagina krijgen, het enige wat je hoefde te doen was een ActiveX-control inladen en wat VBScript schrijven...

[Firesphere]

Alex) schreef op donderdag 10 oktober 2013 @ 21:57:
Zeg dat dan! Ik denk niet dat een <hr /> semantisch gezien het juiste element is voor een voortgangsindicator, want is geen thema-wisseling. Voor progressbars is er sinds HTML5 een eigen element, en anders zou je een <div /> kunnen gebruiken.

"Vroegah" kon je een echte Win32-progressbar in je webpagina krijgen, het enige wat je hoefde te doen was een ActiveX-control inladen en wat VBScript schrijven...

Het design is absoluut geen voortgangsindicator En dat wil ik ook niet. HR of ietwat complex opgezette DIV is een betere oplossing

[Alex)]

Waarom noem je het dan een voortgangsindicator als het er absoluut niet zo uitziet?

[Firesphere]

Omdat het wel een voortgang weergeeft?

[BikkelZ]

Firesphere schreef op donderdag 10 oktober 2013 @ 21:17:
Is het mogelijk om in een <hr> tag een linear-gradient te laten lopen?

Poeh....ehhh.....probeer eens een SVG met verloop als border te gebruiken?

[OkkE]

Firesphere schreef op donderdag 10 oktober 2013 @ 21:52:
[...]

Ik wil een voortgangs-indicator hebben, geen blink-lichtkrant-geval!

Dus een <progress> element?