Disegnare la bandiera delle olimpiadi con i CSS

Oggi per caso ho trovato  un concorso presente sul forum di HTML.it dove si chiedeva di disegnare la bandiera delle olimpiadi usando solo con i CSS. Ecco come ho fatto io:

Clicca qui per guardare il risutlato finale su JSFIDDLE

Il markup HTML che si poteva utilizzare per disegnare la bandiera olimpionica era 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>

Di conseguenza questo è stato il mio codice CSS, molto leggero e cross-browser:

h1 {
 font-size: 0px;
}
li {
 font-size: 0px;
 list-style: none;
 position: absolute;
 height: 100px;
 width: 100px;
 border-radius: 60px;
 box-shadow: 0 0 0 3px #FFF, inset 0 0 0 3px #FFF;
 border: solid 10px #0085c7;
 top: 20px;
 left: 20px;
}
li:nth-of-type(2) {
 border-color: #f4c300;
 top: 80px;
 left: 85px; 
}
li:nth-of-type(3) {
 border-color: #000;
 top: 20px; 
 left: 150px;
}
li:nth-of-type(4) {
 border-color: #009f3d;
 top: 80px;
 left: 215px;
}
li:nth-of-type(5) {
 border-color: #df0024;
 top: 20px;
 left: 280px;
}

Clicca qui per guardare il risutlato finale su JSFIDDLE

Concorso del forum di HTML.it (dove si possono trovare molti esempi, anche più complessi del mio)

Ilario Pellandini

::: Certified Web developer 2006-2018 ::: ::: www.IPELWEB.com :::

More Posts - Website