Check alle échte Black Friday-deals Ook zo moe van nepaanbiedingen? Wij laten alleen échte deals zien

Kan dit met CSS/SASS/LESS?

Pagina: 1
Acties:

  • Stephan11117
  • Registratie: Mei 2004
  • Laatst online: 21-11 12:12
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?

Afbeeldingslocatie: http://s29.postimg.org/u8wzrn7vr/Schermafbeelding_2014_07_21_om_17_55_57.png

  • glashio
  • Registratie: Oktober 2001
  • Laatst online: 21-11 13:08

glashio

C64 > AMIGA > PC

Geen idee (ben geen css-hacker/guru)

Eerste wat ik bedenk is:

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

> Google Certified Searcher
> Make users so committed to Google that it would be painful to leave
> C64 Gospel
> [SjoQ] = SjoQing


  • storeman
  • Registratie: April 2004
  • Laatst online: 21-11 13:00
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.

"Chaos kan niet uit de hand lopen"


  • NMe
  • Registratie: Februari 2004
  • Laatst online: 20-11 11:59

NMe

Quia Ego Sic Dico.

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).

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.


  • R4gnax
  • Registratie: Maart 2009
  • Laatst online: 06-09 17:51
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
  • Registratie: September 2000
  • Laatst online: 01:14

RM-rf

1 2 3 4 5 7 6 8 9

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.

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen


  • storeman
  • Registratie: April 2004
  • Laatst online: 21-11 13:00

"Chaos kan niet uit de hand lopen"


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
  • Registratie: Mei 2004
  • Laatst online: 21-11 12:12
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
  • Registratie: Februari 2004
  • Laatst online: 20-11 11:59

NMe

Quia Ego Sic Dico.

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.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.


  • Stephan11117
  • Registratie: Mei 2004
  • Laatst online: 21-11 12:12
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.
Pagina: 1