Thread: Mooi staaltje css :-)
-
03-06-2010, 13:27 #16
wat zou de code zijn voor 1 karakter? hoe ken je die verschillende kleuren toe?
no votes
-
-
03-06-2010, 14:16 #17
met spannetjes. Die ket heeft een kleurenmap gemaakt van die afbeelding alle voorkomende (188?) kleuren in css gezet, via php en dan met php die html gegenereerd. ( of met een andere prog. taal.
)
(snelle indruk van hoe ik het zou doen
)
no votes
-
03-06-2010, 15:12 #18
De verschillende kleuren zijn gewoon backgrounds en colors met dezelfde waarde. Door de :
election CSS3 selector te gebruiken worden deze aangeroepen. Door dat de :
election niet ondersteund wordt in IE zie je daar ook niks.
(zie de bron van de website)no votes
-
04-06-2010, 23:51 #19Member
- Registered
- 28/03/08
- Location
- Klerken
- Posts
- 85
- iTrader
- -1 (0%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/0
Nice!
no votes
-
05-06-2010, 01:10 #20Approved 9-lifer
- Registered
- 29/08/08
- Location
- Hasselt
- Posts
- 1,008
- iTrader
- 3 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 2/2
no votes
-
05-06-2010, 02:12 #21Approved 9-lifer
- Registered
- 21/08/08
- Location
- Hasselt
- Posts
- 2,653
- iTrader
- 8 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 5/46
zelfs die kleuren genereert ge
ge opent een afbeelding in bv C++ en schrijft voor elke pixelwaarde die ge nog nie kent een CSS-item naar file + een random karakter in ne span bijhorend aan da CSS-item.
klaar!no votes
-
05-06-2010, 08:23 #22no votes
-
07-06-2010, 03:36 #23Member
- Registered
- 17/07/02
- Location
- Kortrijk
- Posts
- 2,281
- iTrader
- 7 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 1/25
Een maat van mij had de html-pagina van in de OP naar me gelinkt en ik vond het wel een tof idee om zelf eens uit te werken. Ik heb snel een progje geschreven (in .net) waarmee je je eigen images kunt omzetten naar zo'n type pagina: linkje
Voorbeeld:
origineel - resultaat
Dus ja, wie het eens wil proberen, u doet maar
Afbeelding, kleurdiepte, hoogte, tekst en titel van de pagina kun je zelf allemaal instellen. Logischerwijs zal de resulterende html een pak groter zijn als je de kleurdiepte en hoogte opdrijft
edit: heb een nieuwe versie geupload die kleinere html en css genereert en die een beter resizing-algoritme gebruikt.Last edited by Teknoman; 07-06-2010 at 15:16.
no votes
-
07-06-2010, 10:24 #24
mooi
Hoeveel lijnen code is het genereren van de html + indexatie van de kleuren?
no votes
-
07-06-2010, 10:57 #25Approved 9-lifer
- Registered
- 03/12/03
- Location
- Oostende
- Posts
- 2,599
- iTrader
- 78 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 7/10
no votes
-
07-06-2010, 12:05 #26Approved 9-lifer
- Registered
- 04/08/09
- Location
- Merelbeke, Gent, Belgium
- Posts
- 263
- iTrader
- 0
- Mentioned
- 0 Post(s)
- Reputation
- 0/1
haha zalig

Je zou het progje wel nog kunnen updaten door een soort compressiealgoritme toe te passen zodat de dimensies wel nog min of meer bewaard blijven...
't is doenbaar
Maar sowieso al zeer plezant
nice job!
.no votes
-
07-06-2010, 12:16 #27Approved 9-lifer
- Registered
- 21/08/08
- Location
- Hasselt
- Posts
- 2,653
- iTrader
- 8 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 5/46
Niet zo veel lijkt me
Als je het eens wilt proberen, hier is wat pseudocode over hoe je het ZOU kunnen doen!
Edit: deze pseudocode houdt wel geen rekeninng met de grootte enzo van een afbeeldingCode:parseImage() { image = open(image); while(pixel = geefPixel(image)) { kleurwaarde = geefKleurwaardePixel(pixel); // doorzoekt vector van kleuren // is de kleur al gedefinieerd? if(kleurwaarde == -1) /* nog niet gedefinieerd */ { // juiste code toevoegen aan string en kleurenvector updaten kleurwaarde = cssGedeelte.voegKleurToe(pixel); } // juiste code aan string toevoegen htmlGedeelte.voegPixelToe(kleurwaarde); } close(image); // de 2 strings met andere info naar file schrijven, klaar! writeCssAndHtml(); }
no votes
-
07-06-2010, 12:19 #28Approved 9liver
- Registered
- 18/01/04
- Location
- Melle
- Posts
- 10,535
- iTrader
- 56 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 27/102
In matlab kan je zoiets maken in een goeie 10-20 regels code volgens mij. Het enige wat prutswerk is, is om eerst te vinden hoeveel pixels je moet samennemen om te laten overlappen met de achtergrond die 1 letter inneemt.
“In terms of how we evaluate schooling, everything is about working by yourself. If you work with someone else, it’s called cheating. Once you get out in the real world, everything you do involves working with other people.”
PSN: Cycloon - Final Fantasy XIV: A realm reborn characterno votes
-
07-06-2010, 12:21 #29Member
- Registered
- 11/10/08
- Location
- Brugge
- Posts
- 5,928
- iTrader
- 9 (100%)
- Mentioned
- 2 Post(s)
- Reputation
- 4/59
Nu nog de zoektocht naar het origineel high res prentje
no votes
-
07-06-2010, 12:28 #30Member
- Registered
- 17/07/02
- Location
- Kortrijk
- Posts
- 2,281
- iTrader
- 7 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 1/25
Ik heb het wat geupdate zodat het omzetten iets efficiënter verloopt.
Wat bedoel je met een compressiealgoritme om de dimensies te bewaren?
Als je de tekst selecteert in een browser (ik heb het getest in firefox en safari) dan is 1 de selectie van 1 letter ongeveer dubbel zo hoog als dat hij breed is. Bij het resizen van de afbeelding verander ik de hoogte en laat de breedte berekenen in functie van de hoogte zodat de verhoudingen ongeveer bewaard blijven (aangezien je uiteindelijk rechthoekige "pixels" uitkomt moet de afbeelding 2 keer zo breed gemaakt worden dan wanneer de "pixels" vierkant zouden zijn).
Als je bedoelt om bvb de letters zelf kleiner te maken en een afbeelding uit meer lijnen tekst te laten bestaan dan nu toegelaten is in het programma (256) is dat zeker mogelijk, dat is niet veel werk. Het html-bestand dat je dan uitkomt zal dan wel veel groter zijn.
@AdrianHates: De klasse waarin het converteren gebeurt is 168 lijnen (komt vooral door het gebruik van StringBuilders ipv gewone string-concatenatie omdat anders de performance tamelijk laag is. Ipv op 1 lijn een hoop zaken aan elkaar te plakken moet ik elke keer een nieuwe lijn nemen). Daar zitten wel nog wat witregels, commentaarregels en imports bij, als ik die er af trek kom ik op 160 lijnenno votes

