Bestem ikke brugbart ... men lærerigt for mig og måske dig!
Jeg satte mig selv den opgave, at ville lave en lille figur/mand kun ved hjælp af CSS og uden brug af grafik. Løsningen skulle efterleve kravet om, at HTML strukturen skulle være så simpel som mulig. Altså ikke en mængde kode og stor ståhej for blot en lille figur.
Om han er blevet særlig køn - nej, det er han nok ikke men kravet om simpel HTML må bestemt siges at være overholdt.
<ul class="mand">
<li>M</li>
<li>a</li>
<li>n</li>
<li>d</li>
</ul>Her er han så CSS3-Pseudo-element-manden
- M
- a
- n
- d
Jeg har kodet ham med Mozilla Firefox som reference-webbrowser. I Safari sker der noget underligt med den røde håndbold og i EI9 får han bla. ikke et rundt hovede. En meget god illustration af hvor vanskeligt CSS-arbejde til tider kan være!
Den første <li>M</li> danner hans sorte hat.
Den næste <li>a</li> danner hovede hvor Pseudo-elementerne :before og :after laver hans to øjne.
Krop og arme er lavet med <li>n</li> hvor :before & :after armene. I FF kan man se den runde bold, som er lavet som en border til :after
Det sidste bogstav i ordet "MAND" - <li>d</li> laver bælte og hans to ben.