Exercice Hteumeuleu

by oilvier

HTML

<!doctype html>
<html>
    <head>
        <title>CSS Brain Teaser</title>
        <!-- 
            Un exercice rigolo proposé par HTeuMeuLeu
            http://www.hteumeuleu.fr        
        -->
    </head>
    <body>
        <h1><span class="wrap"><span class="inner">Du texte HTML dynamique sur plusieurs lignes avec un fond qui suit bien et des marges autour.</span></span></h1>
    </body>
</html>

CSS

body { padding:50px; background:#2fa7ca; }
h1 { width:450px; font:bold 36px sans-serif; letter-spacing:-1px; color:#000; position:relative; padding:10px 20px; overflow:hidden;}

.wrap {outline:10px solid white; outline-offset:-1px;}
.inner {background:white; position:relative;}