Lagen met .PNG plaatjes vullen met kleur?

[Verwijderd]

Ik heb een aantal patronen die ik via een website wil laten zien. Omdat deze ongeveer allemaal zijn opgebouwd uit 3 kleuren, wil ik daarvoor 3 laagjes maken met .png plaatjes. Het is de bedoeling dat je dan zelf een kleur kan kiezen, en de .png uit de betreffende laag dan de gekozen kleur aanneemt.

Tot dusver heb ik eigenlijk alleen met de achtergrond kleur gewerkt. Dus dat je uit de colorpicker een kleur kiest, en dat dan de background zich aanpast. Maar dat is natuurlijk het tegenovergestelde van wat ik wil bereiken. Want normaal staat de .png vast, en kan je alleen de achtergrond veranderen omdat dat het transparante deel van de .png is. Heeft misschien iemand een duwtje in de rug voor de juiste aanpak hierin?

[Mavamaarten]

Een PNG kleuren met css (dat wil je doen, toch?) gaat je niet zomaar lukken. Webkit heeft support voor masks, dat komt in de buurt, maar dat gaat niet werken in firefox en andere browsers.

Misschien is een soort van icon-font iets? Dat kan je kleuren en eventueel herhalen (tilen).

[Verwijderd]

Ja klopt, met CSS. En een JQuery UI ding voor de kleurenkiezer zoals http://www.eyecon.ro/colorpicker/.

Aha okee, webkit masks, ik zal me eens inlezen. Op zich zou het al okee zijn als het alleen in Chrome en/of IE kan, zo lang er maar iets kan.

Icon-fonts is wellicht een oplossing. Nog geen ervaring mee. Ik ga dat eerst wel cheken. Thanks.

[Wiethoofd]

Je kunt in 1 element 3 'achtergrond' afbeeldingen laten zien. Geef het element waarin je het voorbeeld wil tonen de middelste laag van de achtergrondafbeeldingen en gebruik de pseudo :before en :after elementen om deze voor/achter deze basis laag te positioneren (transparantie met de afbeeldingen zou dan moeten 'stapelen'). Elementen nesten kan natuurlijk ook

Met javascript classes aanpassen om achtergrondafbeelding te wijzigen zou een eitje moeten zijn. Mocht pseudo elementen niet voldoen dan zijn 2 elementen voor 2 lagen natuurlijk ook te nesten om daarvan de achtergrondafbeeldingen aan te passen.

[Rikkiz0r]

Kun je niet beter een canvas gebruiken?

[Verwijderd]

Hmmm, iconfonts is wel een aardig gedoe/werk zo te zien. En ook al tilen sommige van mijn patronen, anderen zijn weer helemaal 1 ding, en soms best ingewikkeld qua vorm. HTML5 Canvas kan ik daarom denk ik ook niet echt gebruiken. Hier een voorbeeld van een simpel (repeterend) patroon. Je ziet duidelijk de 4 kleuren.



De plaatjes zouden ongeveer 1000x600 pixels moeten worden. Mijn brein is aan het kraken wat Wiethoofd zegt, maar volgens mij kan het niet. Bij lagen met .png dekt de inhoud van de ene laag de andere laag af. Zelfs als het overgrote deel transparant is, zal de laag die erover heen ligt toch weer het gedeelte overlappen van de laag die eronder ligt. Toch?

[orf]

Dit moet je met css en 2d transforms wel kunnen bereiken. Met skew kun je die vormen denk ik wel maken. Dan kun je nog steeds met background colors werken.

[klaaz]

Is svg niet een beter format voor jou?

[Ventieldopje]

Svg wordt nog lang niet altijd goed ondersteund helaas. Het zou wel een oplossing bieden omdat het xml is en je zonder veel moeite de kleur of vorm aan zou kunnen passen

[Mrlten]

Kan je het niet beter server-side renderen en met argumenten de kleuren aansturen?

[Spinal]

Ventieldopje schreef op maandag 29 december 2014 @ 08:44:
Svg wordt nog lang niet altijd goed ondersteund helaas. Het zou wel een oplossing bieden omdat het xml is en je zonder veel moeite de kleur of vorm aan zou kunnen passen

IE9+ en verder alle moderne browsers dus de ondersteuning is prima te noemen

[Verwijderd]

@ orf: Deze vormen zijn simpel, maar ik heb ook wel eens zoiets als een redelijk ingewikkelde bloem. Of een soort figuur als op bloemetjesbehang (met weinig tot geen repeterende elementen).

SVG had ik gisteren al over gelezen door de iconfonts. Ik zal nog even verder gaan uitpluizen...

[The Milkman]

En als het echt voor prehistorische browsers moet, inderdaad via bijvoorbeeld de GD Library in PHP, of anders ImageMagick.

[Verwijderd]

Ik ben met SVG aan de slag. Bedankt voor de tip. Dat is volgens mij de beste manier. Bestand maken in Illustrator, opslaan als SVG 1.1 en dan embedden in HTML, anders kan ik de kleuren niet meer veranderen. Alleen dat laatste moet ik nog even voor elkaar krijgen...

Vanaf IE9 en de rest is top. Ouder dan IE9 doe ik sowieso niet meer voor klanten. De banken ondersteunen ook niet ouder meer dan IE9, want niet veilig, dus een mooi argument voor mij om ook die lijn te trekken!

// edit
En ja, het is gelukt, met SVG!

- Bestand maken / importeren in Illustrator
- Opslaan als SVG 1.1
- SVG optimaliseren via http://petercollingridge.appspot.com/svg_optimiser en convert styles to CSS aanvinken
- SVG embedden in HTML
- Laatste versie van jQuery includen (ik werk toch alleen nog voor browsers vanaf IE9)
- Colorpicker http://colpick.com/plugin geinstalleerd en a.d.h.v. het laatste voorbeeld de kleuren van de class van de verschillende onderdelen van de SVG ook mee laten veranderen.

[ Voor 35% gewijzigd door Verwijderd op 07-01-2015 12:46 ]