Skip to content

Instantly share code, notes, and snippets.

@moebiuseye
Created June 25, 2012 22:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save moebiuseye/2991632 to your computer and use it in GitHub Desktop.
Save moebiuseye/2991632 to your computer and use it in GitHub Desktop.
Untitled
body { padding:50px; background:#2fa7ca;; }
h1 { width:450px; font:bold 36px sans-serif;
letter-spacing:-1px; color:#000; }
.challenge {
display:block;
}
.challenge:first-line {
background: #FFF;
box-shadow: -10px 0 0 10px #FFF, 10px 0 0 10px #FFF;
padding-top: 40px;
}
.accepted {
background: #FFF;
display:inline;
box-shadow: 0 10px #FFF,
-15px 5px 0 5px #FFF,
15px 5px 0 5px #FFF;
}
.challenge:first-line {
padding-top: 40px;
}
<!doctype html>
<html>
<head>
<title>CSS Brain Teaser</title>
<!--
Un exercice rigolo proposé par HTeuMeuLeu
http://www.hteumeuleu.fr
-->
</head>
<body>
<h1><span class="challenge"><span class="accepted">Du texte HTML dynamique sur plusieurs lignes avec un fond qui suit bien et des marges autour.</span ></span ></h1>
</body>
</html> ​
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment