Kan dit met CSS/SASS/LESS?

[Stephan11117]

Ik wil graag een achtergrond toevoegen die er uitziet alsof ie 'slordig' is ingekleurd (bijvoorbeeld zoals in de afbeelding).

Ik wil echter bij voorkeur geen achtergrondafbeelding gebruiken, omdat ik verschillende schermgroottes goed wil ondersteunen. Ook wil ik niet steeds hetzelfde stukje herhalen dmv background-repeat omdat ik dat niet mooi vind.

Kan ik met moderne technieken in CSS/SASS/LESS mixins/filters zoiets genereren denken jullie?

[glashio]

Geen idee (ben geen css-hacker/guru)

Eerste wat ik bedenk is:

Canvas js-tekenen position:fixed width:100% height: 100% z-index: -10?

[storeman]

Ik zie twee opties:

Of een grote afbeelding (hoge resolutie voor schaling), of meerdere die je over elkaar heen legt voor verschillende uitvoeren. Elke laag zou je andere filters kunnen geven.

Een andere optie kan zijn om een SVG te maken in bijvoorbeeld Inkscape. Deze kun je dmv classes dan stylen op verschillende manieren.

Ik zou zelf voor de svg methode gaan. Compact, flexibel en haarscherp. Echt oude browsers ondersteunen het niet.

[NMe]

Het kan vast maar ik zou inderdaad ook voor SVG gaan, of eventueel met mediaqueries regelen dat je een aantal verschillende afbeeldingen hebt voor de meest voorkomende resoluties (en de rest up- of downscalen).

[R4gnax]

NMe schreef op maandag 21 juli 2014 @ 18:10:
Het kan vast maar ik zou inderdaad ook voor SVG gaan, of eventueel met mediaqueries regelen dat je een aantal verschillende afbeeldingen hebt voor de meest voorkomende resoluties (en de rest up- of downscalen).

Een schermvullende achtergrond zou ik sowieso nooit met een complexe SVG graphic opzetten. Het risico is vrij groot dat browsers de graphic te vaak gaan rasterizen en dat zou je flink wat performance kosten.

Dan kun je denk ik beter een set vector teken instructies op een <canvas> element van correcte groottte uitdumpen, daarop toDataURL aanroepen en dan de resulterende data:image/png als achtergrond instellen.

[RM-rf]

CSS kun je gebruiken voor bepaalde visuele instellingen, zoals de dikte van je brush, de fijnheid/onscherpheid van de rand, de kleur, transparantie..

enkel, CSS is niet bedoeld voor specifieke data, bv data welke de 'loop' van je brushstrokes exact bepaald..
deze zou je moeten definieren met bv SVG of via javascript, zelfs met verschillende HTML elementen die je via CSS positioneert, lengte meegeeft, is het mogelijk.

[storeman]

Voorbeeldje:
http://jsfiddle.net/hHHdA/

[Verwijderd]

je kan m toch ook gewoon op background-size: cover; zetten? of is dat ook niet helemaal wat je wil (aka moet ie altijd alles laten zien of kan er af en toe een onderkantje wegvallen?

[Stephan11117]

Verwijderd schreef op dinsdag 22 juli 2014 @ 18:42:
je kan m toch ook gewoon op background-size: cover; zetten? of is dat ook niet helemaal wat je wil (aka moet ie altijd alles laten zien of kan er af en toe een onderkantje wegvallen?

Het punt is ook dat ik geen geschikte originele afbeelding heb. Alles wat ik heb is het stukje (plus een beetje) uit de startpost.

[NMe]

SynchroSteve schreef op dinsdag 22 juli 2014 @ 18:57:
[...]

Het punt is ook dat ik geen geschikte originele afbeelding heb. Alles wat ik heb is het stukje (plus een beetje) uit de startpost.

Dan zul je toch linksom of rechtsom het plaatje moeten reproduceren? Of je dat nou in Illustrator doet om een vector graphic te krijgen die je omzet naar een png op het juiste formaat of dat je diezelfde vector in een SVG stopt lijkt me dan bar weinig verschil te maken.

[Stephan11117]

NMe schreef op dinsdag 22 juli 2014 @ 19:01:
[...]

Dan zul je toch linksom of rechtsom het plaatje moeten reproduceren? Of je dat nou in Illustrator doet om een vector graphic te krijgen die je omzet naar een png op het juiste formaat of dat je diezelfde vector in een SVG stopt lijkt me dan bar weinig verschil te maken.

Ja dat klopt. Ik hoopte dat iemand me wellicht op een shortcut kon wijzen waar ik nog niet bekend mee ben.