Skip to content

Instantly share code, notes, and snippets.

@yukulele

yukulele/dabblet.css

Created October 24, 2012 14:23
Show Gist options
  • Save yukulele/3946346 to your computer and use it in GitHub Desktop.
Save yukulele/3946346 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
/**
* fill box-shadow
*/
div{
width:400px;
height:150px;
color:white;
margin:100px;
border-radius:0 0 100px;
}
#d1{
background-color:rgba(0,0,0,.7);
box-shadow:0 0 10px 30px rgba(0,0,0,.7);
}
#d2{
box-shadow:
0 0 10px 30px rgba(0,0,0,.7),
9999px 9999px 0px rgba(0,0,0,.7) inset;
}
#d3{
box-shadow:
0 0 10px 30px rgba(0,0,0,.7),
9999px 9999px 10px rgba(0,0,0,.7) inset;
}
/*page styles*/
body{
font-family:sans-serif;
font-size:.8em;
}
ul{
color:#f77;
}
.ok{
color:#7f7;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<h1>Fill box-shadow</h1>
<p>the goal is to have a background with the same color as the box-shadow</p>
It's buggy with rgba color and border radius
<div id="d1">
<h2>outset box-shadow + background-color</h2>
<ul>
<li>colors are differents</li>
<li>bug with border-radius</li>
</ul>
</div>
<div id="d2">
<h2>outset box-shadow + inset box-shadow</h2>
<ul>
<li>colors are differents</li>
<li>bug with border-radius</li>
</ul>
</div>
<div id="d3">
<h2>outset box-shadow + inset box-shadow with same blur params</h2>
<ul>
<li class="ok">colors are same</li>
<li>bug with border-radius</li>
</ul>
</div>
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment