Skip to content

Instantly share code, notes, and snippets.

@djekl

djekl/dabblet.css

Created July 20, 2012 10:00
Show Gist options
  • Save djekl/3149966 to your computer and use it in GitHub Desktop.
Save djekl/3149966 to your computer and use it in GitHub Desktop.
Download ZIP
CSS close button v3
Raw
dabblet.css
/**
* CSS close button v3
* no pseudo-elements, uses only background gradients on the link
* doesn't work on IE9 or lower
* for IE9 support see v2: http://dabblet.com/gist/2687089
*/
body {
background: rgb(247, 247, 242);
}
div {
width: 300px;
height: 200px;
margin: 130px;
border: solid 2px rgb(205, 230, 235);
position: relative;
background: rgb(229, 247, 251);
}
a {
top: -30px;
right: -30px;
width: 80px;
height: 80px;
border-radius: 50%;
position: absolute;
background: radial-gradient(rgb(254, 255, 252) 40%, rgb(230, 230, 239) 41%,
rgb(230, 230, 239) 43%, rgb(247, 247, 242) 45%,
rgb(247, 247, 242) 67%, transparent 67%),
linear-gradient(45deg,
rgb(205, 230, 235) 34%,
rgb(247, 247, 242) 34%);
color: rgb(107, 181, 201);
font-size: 50px;
line-height: 80px;
text-align: center;
text-decoration: none;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div><a href="#">&#x2716;</a></div>
Raw
settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment