1 Laatst bewerkt door Glenn Glerum (13-10-2011 12:26:30)

Onderwerp: The CSS challenge

Omdat elke forum wel een spelletje heeft lijkt mij het leuk om er een op dit forum te starten.

Een bekend spel is het vragen van een foto van iets en de eerste die een foto vind die in de buurt komt mag ergens een foto van vragen.

Dit spel komt op t zelfde neer alleen moet je geen foto zoeken maar het met css oplossen/ maken.

Een paar simpele regels:

  • Het moet werken in alle moderne browsers

  • Geen ie behavior script

  • Zo klein mogelijke markup gebruiken, niet meer dan nodig is

  • Zo kort mogelijke selectors

  • Geen inline styles (doe je immers met een gewone website hopelijk ook niet)

  • Geen gegenereerde code, moet handwerk zijn (anders is het geen uitdaging wink)

  • Ook geen svg of canvas *eyes Stephen Hay*

  • En nee ook geen JS

  • Je mag geen gebruik van afbeeldingen maken

  • De eerste die komt met een werkende oplossing mag de volgende uitdaging verzinnen

  • Wanneer deze uitdaging niet in 48uur is opgelost moet deze zelfde persoon een nieuwe aandragen


Om het te starten wil ik graag een ying yang symbol zien

2 Laatst bewerkt door Ron Derksen (11-10-2011 10:53:35)

Re: The CSS challenge

Ik heb geen IE9 ter beschikking om te testen, maar volgens mij moet dit wel werken in alle browsers:
http://jsfiddle.net/3WAjf/6/

Nieuwe uitdaging: het logo van Ubisoft. Voor degene die het niet kennen:
http://eradigitala.net/wp-content/uploads/2011/08/ubisoft-logo-225.jpg

3

Re: The CSS challenge

Kek idee! Eerste gepruts op http://jsfiddle.net/SMUCL/

Next, het Ubuntu logo: http://www.mricons.com/store/png/71971_48755_ubuntu-logo_128x128.png

Winnaar: Mallory met http://jsfiddle.net/HJQ3b/ (in de buurt trouwens: Stephen met http://bl.ocks.org/1278251, Ron met http://jsfiddle.net/Q5TwP/3/, Daan met http://jsfiddle.net/Pkky3/ en Glenn met http://jsfiddle.net/XeQxM/1/)

4 Laatst bewerkt door Mallory van Achterberg (11-10-2011 14:50:17)

Re: The CSS challenge

ziet er niet zo goed uit in de meeste van mijn browsers, maar: http://jsfiddle.net/HJQ3b/

Maar ik denk iemand kan iets beter maken.  Doet helemaal nix in mn FF3.6.2 : )

(bijwerkt url: http://jsfiddle.net/HJQ3b/1 want al mijn values waren niet hetzelfde... en -ms-transform naar gewone transform)

5

Re: The CSS challenge

Mallory van Achterberg schreef:

ziet er niet zo goed uit in de meeste van mijn browsers, maar: http://jsfiddle.net/HJQ3b/

Nice, terwijl de rest druk op IRC bezig is tongue Wel de volgende voorstellen Mallory!

6

Re: The CSS challenge

Ja, was over nadenken... mss de vim logo?

http://www.vim.org/images/vim_editor.gif

7

Re: The CSS challenge

Mallory van Achterberg schreef:

ziet er niet zo goed uit in de meeste van mijn browsers, maar: http://jsfiddle.net/HJQ3b/

Maar ik denk iemand kan iets beter maken.  Doet helemaal nix in mn FF3.6.2 : )

Nice, ik kwam niet verder dan http://jsfiddle.net/Q5TwP/3/  hmm

8 Laatst bewerkt door Bart de Bruin (11-10-2011 14:26:12)

Re: The CSS challenge

Meer tijd heb ik niet om erin te steken. Maar mijn poging tot zover
http://jsfiddle.net/k3Sg7/5/

oh hoor net dat ik "the editor" tkst was vergeten. sad

9

Re: The CSS challenge

Meh, net te laat tongue http://jsfiddle.net/SvgDr/5/

10 Laatst bewerkt door Glenn Glerum (11-10-2011 15:01:38)

Re: The CSS challenge

Mallory moet maar even beslissen welke het wordt smile

11

Re: The CSS challenge

Nah. Maar ik vind het super-leuk om alle pogingen te zien, want iedereen doet iets anders ricthing hetzelfde resultaat!

Bart moet een nieuwe afbeelding kiezen.

12 Laatst bewerkt door Bart de Bruin (11-10-2011 15:12:25)

Re: The CSS challenge

http://www.woutermarkvoort.nl/wp-content/uploads/2010/05/Smashing_Magazine_Logo_by_TrabzonSport.png

succes !

13

Re: The CSS challenge

Okay, niet perfect, maar http://bl.ocks.org/1278541

Raar gebruik van ruby. Achteraf was de typografie in ems niet handig for Firefox door font-rendering verschillen, dus ziet het er allemaal wat beter uit in webkit. Oh well.

14

Re: The CSS challenge

Stephen Hay schreef:

Okay, niet perfect, maar http://bl.ocks.org/1278541

Raar gebruik van ruby. Achteraf was de typografie in ems niet handig for Firefox door font-rendering verschillen, dus ziet het er allemaal wat beter uit in webkit. Oh well.

Wat wordt de volgende? wink

15

Re: The CSS challenge

Oke lieve mede-Fronteers, hier is de volgende, en gelukkig niet al te moeilijk:

It's The Daily Nerd Favicon!

http://dailynerd.nl/apple-touch-icon-114x114-precomposed.png

Have fun!

16 Laatst bewerkt door Ron Derksen (11-10-2011 20:34:51)

Re: The CSS challenge

Mijn poging: http://jsfiddle.net/chevalric/jb9qk/
Niet perfect, helaas. De onderkant van de haren is in het origineel rechter dan ik voor elkaar krijg met CSS.

En de nieuwe uitdaging:
http://linuxfud.files.wordpress.com/2007/02/black_metallic_gnome_logo_by_anxadeviant.png

17 Laatst bewerkt door Glenn Glerum (12-10-2011 11:05:21)

Re: The CSS challenge

Mijn creatie tot zover in webkit: http://jsfiddle.net/Rv3m4/31/ moet hem nog ff cross browser maken. Hij is niet perfect, maar zit wel dicht in de buurt tongue.


Next up:
http://images2.wikia.nocookie.net/__cb20110115023414/sonic/images/thumb/f/f0/Game-cube-logo.jpg/180px-Game-cube-logo.jpg

ps: het idee om comic sans te gebruiken voor de voet is het idee van Bart de Bruin big_smile credit where credit is due

18

Re: The CSS challenge

Ik vind 'm behoorlijk goed gelukt, Glenn!

19

Re: The CSS challenge

Ron Derksen schreef:

Ik vind 'm behoorlijk goed gelukt, Glenn!

Thnx smile

20 Laatst bewerkt door Glenn Glerum (12-10-2011 13:22:48)

Re: The CSS challenge

En Christian Schaefer heeft hem!
http://twitter.com/#!/derSchepp/status/ … 5676849153

http://jsfiddle.net/Schepp/shwm7/


Volgende: http://twitter.com/#!/derSchepp/status/ … 5025340417

http://www.giga.de/androidnews/i/20110908_sony_ericsson_logo_011.jpg

21 Laatst bewerkt door Johan van Tongeren (12-10-2011 19:23:06)

Re: The CSS challenge

Ik heb vanalles geprobeerd, maar na een paar uur geef ik het op sad

Edit: dit was wat ik heb zo ver (werkt alleen in FF) http://jsfiddle.net/dreamdealer/CQsFG/

22

Re: The CSS challenge

Goh, JSFiddle integratie zou handig zijn voor topics als deze wink Overigens kick ass resultaten, hulde!

23

Re: The CSS challenge

Gecko only, maar: http://jsfiddle.net/bV26m/ (Zeker niet perfect, maar ik denk zo dat er alleen nog maar een smak tijd nodig zou zijn om de verschillende gradients verder precies uit te lijnen, en het equivalent zou mogelijk moeten zijn met andere vendor prefixen. (Which is left as an exercise for the reader.)) :P

Next up, het MDN logo:
https://developer.mozilla.org/media/img/mdn-logo.png

24

Re: The CSS challenge

Sander van Lambalgen schreef:

Gecko only, maar: http://jsfiddle.net/bV26m/ (Zeker niet perfect, maar ik denk zo dat er alleen nog maar een smak tijd nodig zou zijn om de verschillende gradients verder precies uit te lijnen, en het equivalent zou mogelijk moeten zijn met andere vendor prefixen. (Which is left as an exercise for the reader.)) tongue

Next up, het MDN logo:
https://developer.mozilla.org/media/img/mdn-logo.png

Hij is in mozilla goed gelukt Sander, knap werk smile

25

Re: The CSS challenge

@derSchepp had trouwens ongeveer een uur na mij een andere oplossing aangedragen: http://jsfiddle.net/gjTP7/ (http://twitter.com/#!/derSchepp/status/ … 0130541568) - ook wel een geniaal idee, alles met radial-gradients met transparante kleuren en harde stops doen.

26 Laatst bewerkt door Bas van Dorst (14-10-2011 18:54:27)

Re: The CSS challenge

Heb per ongeluk een andere bron gebruikt (witte letters op zwarte bg)
Hij is dus niet 100%: http://jsfiddle.net/7QFUp/1/

Nieuwe uitdaging: route66, ben benieuwd!
http://www.wilcootje.nl/images/uploads/Route66.jpg

27

Re: The CSS challenge

Bas van Dorst schreef:

Heb per ongeluk een andere bron gebruikt (witte letters op zwarte bg)
Hij is dus niet 100%: http://jsfiddle.net/7QFUp/1/

Niet 100%, maar wel erg netjes.

Ik heb ook even een verwijzing ernaartoe achtergelaten in het Mozilla #mdn IRC kanaal, en daar vonden ze het "kind of insanely awesome", "crazy awesome" en gewoon "awesome". smile

28

Re: The CSS challenge

Wow, heel knap dat het gelukt is met dat Sony Ericsson logo. Vandaag of morgen eens uitpluizen hoe jullie het gedaan hebben (en waarom het alleen in Gecko werkt).

29

Re: The CSS challenge

Ron Derksen schreef:

Wow, heel knap dat het gelukt is met dat Sony Ericsson logo. Vandaag of morgen eens uitpluizen hoe jullie het gedaan hebben (en waarom het alleen in Gecko werkt).

Luiheid. smile (That is, ik was er al ~3 uur mee bezig geweest, en het was 1 uur 's nachts, dus ik heb niet meer de moeite genomen om de andere vendor-prefixen toe te voegen en uit te zoeken welke syntax verschillen er op dit moment ook alweer bestaan.)

30

Re: The CSS challenge

We zijn inmiddels al een week verder en hij is nog steeds niet gemaakt. Om het topic in leven te houden is het volgende logo aan gedragen.

http://t2.gstatic.com/images?q=tbn:ANd9GcQgU41JOZKMGR54iyCvm-yglStV1CDS4wYl9-YjyTXBsRuZTCLu

Succes!

31

Re: The CSS challenge

Ik meen dat iemand (ik ben zo slecht met namen..) het route66 logo al gemaakt had. Helaas wel alleen in Chrome, meen ik, maar misschien wel het vermelden waard.

32

Re: The CSS challenge

Bernard Nijenhuis (die ook lid moet worden! smile) is ver gekomen (in Chrome): http://jsfiddle.net/bnijenhuis/WN6ak/298/

33

Re: The CSS challenge

trouwens, iemand heeft al teh twitter vogel gedaan: http://www.ecsspert.com/twitter.php

34

Re: The CSS challenge

Om de boel weer even wat nieuw leven in te blazen, wie doet er het Batman logo in CSS?

Batman logo

35

Re: The CSS challenge

Die bestaat helaas al (maar is zeker een leuke oefening om te doen)!

36

Re: The CSS challenge

Crap. Nou dan deze maar:

Warner Bros logo

Degene die een van de twee (zelf) nagemaakt heeft mag weer een nieuwe kiezen.

37

Re: The CSS challenge

Poe, die van Warner Bros is wel moeilijk... daar ga ik eens over nadenken.

Ik moest net toevallig weer aan dit topic denken. De laatste tijd ben ik een fanatiek bezig met het maken van allerlei logo's in CSS only omdat sommige logo's best een leuke uitdaging zijn en je er best wat van kan leren. Mijn laatste creatie is het Chrome logo met een CSS animatie er bij die het logo "explode" zodat je kan zien hoe het in elkaar steekt: http://cssnerd.nl/articles/pure_css_chrome_logo.html

Ben benieuwd wat jullie er van vinden. Ondertussen ga ik eens aan de gang met dat WB logo...

38

Re: The CSS challenge

Wat een gaaf topic!

39

Re: The CSS challenge

http://jsfiddle.net/cQFsz/ =P

40

Re: The CSS challenge

Glenn Glerum schreef:

http://jsfiddle.net/cQFsz/ =P

Ik vind niet dat 'ie er goed op lijkt sad

41 Laatst bewerkt door Verena Ruf (25-05-2013 13:08:14)

Re: The CSS challenge

Ik ben redelijk nieuw in front-endland en heel nieuw bij fronteers, maar ik vond dit topic superspannend. Dus hier is de WB logo:

http://jsfiddle.net/JLZf6/

Dankzij een webkit-bug waardoor zich de border-radius niet gedraagt als verwacht, moest ik naast de gewone borders ook transparante borders gebruiken, die anders niet nodig waren geweest.

Als volgende vraag ik het Australian Made logo:

Australian Made logo

Succes!

42

Re: The CSS challenge

Super goed gemaakt Verena! big_smile

43

Re: The CSS challenge

http://jsfiddle.net/UX7hE/3/

Twee caveats:
- De staart loopt niet zo vloeiend als zou moeten; 't is laat, en ik had geen zin meer om preciese details uit te werken, dus heb even een shortcut genomen a.h.v. een tilde. tongue
- De tekst "Australian Made" gebruikt het "DejaVu Sans" font (volgens mij in het echte logo ook; lijkt er iig _heul_ sterk op), en heeft een fallback naar het bijna identieke "Bitstream Vera Sans" omdat ik vermoed dat meer mensen dat geinstalleerd zullen hebben; maar ik kon zo 1-2-3 geen embeddable webfont daarvan vinden, dus fallback daarna gaat naar Arial, die beduidend smaller is. En in webkit (d.w.z. Chromium op Linux) wordt de tekst juist weer te breed getoond. Niet echt het punt van dit logo, imho, dus ik ben tevreden met dat _dat_ stukje er iig "zoals bedoeld" uitziet in Gecko op Linux.

Next up: de New Zealand fern:
http://www.crwflags.com/fotw/images/n/nz@fnz.gif

(Leuk 1x een blaadje maken, en dan 25x transformen. big_smile Maar hoe doe je die steel, zonder een tilde te gebruiken??!) tongue

44

Re: The CSS challenge

Mooi gedaan! smile

Ik ben benieuwd naar de uitwerking van de Nieuzeelandse varen.