Sul forum di HTML.it è stato lanciato un concorso a tema olimpico: disegnare la bandiera dei giochi usando soltanto i CSS. Il markup su cui lavorare è il seguente:
<body> <h1>Stemma olimpico</h1> <ul> <li>Azzurro</li> <li>Giallo</li> <li>Nero</li> <li>Verde</li> <li>Rosso</li> </ul> </body>
Queste le regole del contest:
Regole
1. Va postato un link a jsbin, jsfiddle o codepen contenente il codice ed una descrizione delle scelte tecniche effettuate.
2. Non è permesso usare nessuna tecnologia/linguaggio eccetto il markup indicato e CSS.
Il doctype è a scelta dell'utente. I list-item possono essere riordinati a scelta dell'utente ed è consentito l'uso a piacere di attributi data-* o microformats valorizzati come meglio credete, ma nessun altro elemento di markup deve essere aggiunto al codice sopra riportato (es. altri list-items, elementi annidati ai list-items e così via).
3. L'uso di JavaScript, SVG, WebGL, Canvas non è consentito;
4. L'uso di immagini (esterne o in codificate in base64) non è consentito;
5. La demo deve funzionare su almeno uno dei seguenti browser: Chrome 32, Firefox 27 o IE11 (indicare su quale/i browser non funziona)
6. Non copiate. Facendo una ricerca troverete numerosi esempi online, ma la sfida è solo con voi stessi (non c'è proprio nulla in palio e poi sarebbe contrario allo spirito olimpico, però con questo esercizio guadagnerete in serendipità)
7. Se dovete modificare il codice non inserite enne post. Se potete usate solo il link originario su jsbin, jsfiddle o codepen.
8. Leggete questo post e guardate lo stemma con molta attenzione. Non daremo suggerimenti o indicazioni sugli esempi che vedremo per non avvantaggiare nessuno
Siete pronti a raccogliere la sfida?
/https://www.html.it/app/uploads/2024/06/css-2.png)
/https://www.html.it/app/uploads/2024/06/google-chrome-_-.jpg)
/https://www.html.it/app/uploads/2024/04/css.png)
/https://www.html.it/app/uploads/2024/01/cssday.png)
