Skinable smilies

maandag 18 november 2002

English version

De wereldprimeur. Smilies kent iedereen tegenwoordig wel van tweakers.net en fokzine.nl en zijn ook algemeen gebruikt. Niks bijzonders aan en zeker geen wereldprimeur waardig. Deze smilies dus wel! Waarom?

Smiley

Omdat ze skinable zijn. Iedereen heeft wel een kleurenpalet wat gebruikt wordt door zijn/haar site. Dit palet bevat een beperkt aantal kleuren. Smilies zoals ze op fokzine.nl en tweakers.net voorkomen bestaan uit een bonte verzameling kleuren, die meestal niet samengaan met het kleurenpalet van een site. De eigenaar van zo'n site besluit dan meestal om geen smilies in de vorm van images te introduceren, omdat het creeëren van verzameling van smilies in het kleurenpalet van een site een tijdrovend werkje is (vandaar de vertraging in de publicatie van dit stukje.) en daarbij je de verzameling totaal opnieuw moet creeëren als je een nieuw kleurenpalet op je site introduceert.

Ik heb naar aanleiding van een artikel op zeldman.com over GIF transparantie en stylesheet mouse-overs, het idee gekregen om dit te gebruiken voor smilies die makkelijk in elk kleurenpalet passen van een site. Door de meestgebruikte achtergrondkleur (wit / #fff) te nemen en de meest voorkomende tekstkleur (zwart / #000) te nemen en deze te combineren met transparatie zoals deze mogelijk is in GIF plaatjes, kon ik skinable smilies maken. Zoals u in de vergrote smiley kunt zien is het gezicht (geblokte gedeelte) uiteindelijk transparant en zijn de lijnen van de smiley in de tekstkleur getekend. De hoeken buiten de smiley zijn in de achtergrondkleur gevuld om transparantie buiten de smiley te voorkomen.

Door de class attribute aan de image tag toe te voegen en de background property van deze class in de stylesheet een kleur uit het kleuren palet te geven onstaat er een smiley in de kleuren van de site.

Voorbeeld XHTML code:

<img src="../smiley001.gif" title=":-)"
 alt=":-)" class="smiley" />
<img src="../smiley001.gif" title=":-)"
 alt=":-)" class="smiley2" />
<img src="../smiley001.gif" title=":-)"
 alt=":-)" class="smiley3" />

Voorbeeld CSS code:

.smiley
{
    background: #ececec;
}
.smiley2
{
    background: #cce6ff;
}
.smiley3
{
    background: #99b3cc;
}

Dit levert uiteindelijk het volgende resultaat op: :-) :-) :-)

imgcodeimgcodeimgcode
:-):-);-);-)8-)8-)
:-(:-(;-(;-(8-(8-(
:-|:-|;-|;-|8-|8-|
:-x:-x;-x;-x8-x8-x
:-0:-0;-0;-08-08-0
:-D:-D;-D;-D8-D8-D
:-$:-$;-$;-$8-$8-$
:-p:-p;-p;-p8-p8-p
:-o:-o;-o;-o8-o8-o
:-/:-/;-/;-/8-/8-/
:->:->;->;->8->8->
:-<:-<;-<;-<8-<8-<
:-+:-+;-+;-+8-+8-+
:-\:-\;-\;-\8-\8-\

Ik heb een compleet set van smilies zoals in de bovenstaande tabel gecreeërd, zowel in grijs (#666) / wit (#fff) als in zwart (#000) / wit (#fff) daarnaast bevat de .zip file een tweetal Adobe Photoshop files om zelf snel de verzameling van mogelijke smilies te kunnen uitbreiden. Tot slot zit er ook nog een korte handleiding in om de smilies op een makkelijke manier in Movable Type te kunnen invoegen door middel van Brad Choate's Macro plugin.

Download smilies.zip

Reacties

  1. Wow! kek stukje werk JW!
    Maarrreee, het is geen 30 november vandaag, en de Beaujolais Primeur arriveert donderdag pas ;-)

    maandag 18 november 2002 om 15:13:49 door: lijn.

  2. Euhm, :-( Dat heb je als je voorbereidend te werk gaat. Ik pas het meteen aan. Thanx :-)

    maandag 18 november 2002 om 15:26:19 door: JW.

  3. O__\
    | /

    maandag 18 november 2002 om 15:49:33 door: frédéric.

  4. damn! wilde even een vergrote smiley plaatsen, maar de spaties fucken op. dan maar gewoon ;-)

    maandag 18 november 2002 om 15:50:27 door: frédéric.

  5. wow... wat een werk joh... ziet er goed uit!

    maandag 18 november 2002 om 17:18:48 door: Henry.

  6. Nice!

    maandag 18 november 2002 om 18:06:31 door: karma.

  7. Transparante kutsmilies! Ik ruik een karweitje voor Omar!!

    maandag 18 november 2002 om 19:20:00 door: Suffie.

  8. Jeetje, wat een domper! Ik heb een bloedhekel aan smileys! Hmmm....mja, maar wel knap gemaakt hoor, JW!

    Ik dacht toch echt dat je je site helemaal validerend zou maken. Dat lijkt me toch ook een erezaak voor een fanaatje als u zelve (-; <- smiley-sabotage

    maandag 18 november 2002 om 19:49:02 door: ???.

  9. Saboteur! :-) Maar de site wordt _binnenkort_ echt nog gevalideerd. Principe kwestie.

    maandag 18 november 2002 om 21:03:08 door: JW.

  10. Mja, was was het weer, Eric, kwa saboteren. Maar daar zijn meer manieren voor *grijns* <- zie je wel?

    maandag 18 november 2002 om 21:16:10 door: Eric.

  11. Hee, het naamdingetje doet het weer! Mooi!

    maandag 18 november 2002 om 21:17:04 door: Eric.

  12. Kwam via MT-forum, onder de indruk, zal meteen even je RSS in m'n AmphetaDesk zetten.
    Dank, Lourens

    maandag 18 november 2002 om 21:56:38 door: Quadsk8.

  13. Hoi, me again.
    RSS vanaf de individuele pagina is foutief gelinkt (relatief?)
    http://pomtiedom.com/log/archives/index.xml werkt niet
    Vanaf de main log pagina lukt het namelijk wel!
    http://pomtiedom.com/log/index.xml
    (just to let you now...)
    Lourens

    maandag 18 november 2002 om 22:09:29 door: Quadsk8.

  14. Dank je. Het was me ook al opgevallen. Ik ben ook nog druk bezig met de templates.

    maandag 18 november 2002 om 22:12:30 door: JW.

  15. Trouwens JW,
    ben je eventueel nog van plan een setje icoonjes te maken een slag groter?
    Mijn letters op het Blog zijn nl. scalable en hoewel ikzelf altijd "Tekengrootte extra klein" kijk, is de verhouding Btje scheef voor die verziende ouwelui die instelling "Koeieletters" gebruiken...
    (Blččh: feature request, nu al?)
    Lourens

    maandag 18 november 2002 om 22:31:28 door: Quadsk8.

  16. Euhm Lourens,
    Als ik een nieuw set iets groter zou creeëen dan zijn ze niet echt skinable meer.

    Je kan beter als je je stylesheet switch de volgende properties in de smiley class opnemen:

    height: [aantal]px;
    width: [aantal]px;

    Aangezien ik geen anti-aliasing heb gebruikt worden ze als je de verhoudingen goed in stand houdt, lekker retro blokkerig vergroot.

    dinsdag 19 november 2002 om 16:55:21 door: JW.

  17. Hee, het valideert! Gefeli!

    zondag 24 november 2002 om 10:28:08 door: ???.

  18. Heej, dat was ik weer, Eric. Naamdingetje weer stuk?

    zondag 24 november 2002 om 10:29:04 door: Eric.

  19. Hmm, ja en nee, er begint me iets te dagen. Nog even iets testen...

    zondag 24 november 2002 om 10:29:49 door: Eric.

  20. Aha! Als ik "Onthou:" aanvink en op Cookie druk kan 'ie m'n naam *niet* meer terugvinden...

    zondag 24 november 2002 om 10:31:14 door: Eric.

  21. This is very clever - thank you!

    woensdag 4 december 2002 om 18:58:11 door: ???.

  22. Hm, mooi gemaakt, veel werk en zo, maar eigenlijk vind ik dat smileys uit ASCII moeten bestaan, dat is nu net de charme ervan.

    woensdag 12 februari 2003 om 14:57:51 door: Beernd.

  23. Zeker een vriendje van Eric??? :-P

    woensdag 12 februari 2003 om 15:24:36 door: JW.

  24. Dat is een punt! Het hele ASCII werk vervangen door graphisch geneuzel is een Microsnot gedachte. Niet dat het per definitie altijd slecht is ofzo, maarre....

    woensdag 12 februari 2003 om 22:32:09 door: Omar.

  25. Nu vallen mij de onthou dingetjes ook op. Bovenal krijg ik tijdens (of eigenlijk NA) het posten deze fout;

    Fout: 'document.comments_form.email' is leeg of geen object

    Dus er spoort nog iets niet JW.

    woensdag 12 februari 2003 om 22:35:59 door: Omar.

  26. :) Kewl man... Thanks

    woensdag 28 mei 2003 om 12:00:40 door: Viking Karwur.

  27. Great smileys, have you another so good idea for using CSS in these funny stuff?

    woensdag 23 juli 2003 om 21:49:44 door: dj Padák.

  28. I love the idea behind these icons. I'm having only one problem with them. I can't download them. The zip file doesn't seem to exist where the link says it should. Can you help? Thanks.

    woensdag 10 september 2003 om 17:33:01 door: Josh.

  29. @Josh: I have adjusted the link to the download file. While re-organising my domain I forgot to adjust the original posts. Sorry about that.

    woensdag 10 september 2003 om 18:22:19 door: JW.

  30. awsome smilies

    maandag 6 oktober 2003 om 22:29:25 door: stephanie.

Onthoud persoonlijke informatie?