Skip to content

Instantly share code, notes, and snippets.

@joshhumble

joshhumble/dabblet.css

Created November 30, 2012 17:45
Show Gist options
  • Save joshhumble/4177313 to your computer and use it in GitHub Desktop.
Save joshhumble/4177313 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Thought Bubble for CMS by joshhumble
Raw
dabblet.css
/**
* CSS Thought Bubble for CMS by joshhumble
*/
.container {
width:400px;
position:relative;
margin:0 0 0 20px;
}
.triangle {
position:absolute;
margin:0;
top:-60px;
right:20px;
width:0;
height:0;
border:30px solid transparent;
border-bottom-color:#ccc;
}
.bubble {
background:#eee;
width:400px;
position:relative;
margin:30px 0 0 0;
border-radius:0 10px 30px 10px;
}
.header {
background:#ccc;
width:400px;
height:85px;
position:relative;
overflow:hidden;
margin:0;
border-bottom:1px dotted #999;
}
.header h1 {
position:relative;
margin:30px 0 0 10px;
float:left;
font:bold 18px/22px sans-serif;
color:#333;
text-shadow:0 1px 2px #999;
}
.circle {
background:#eee;
position:relative;
float:left;
margin:8px 0 0 10px;
width:70px;
height:70px;
border:none;
border-bottom-color:#ccc;
border-radius:50%;
box-shadow:0 1px 2px #999;
}
.circle p {
font:bold 24px Arial, sans-serif;
color:#ccc;
text-transform:uppercase;
position:absolute;
top:-3px;
left:5px;
text-shadow:0 1px 0 #fff;
-ms-transform:rotate(-25deg);
-webkit-transform:rotate(-25deg);
-moz-transform:rotate(-25deg);
transform:rotate(-25deg);
}
.content {
width:400px;
position:relative;
overflow:hidden;
margin:0;
}
.content p {padding:10px;}
.content p, .content p a, .content p a:link {
font:12px/18px Arial, sans-serif;
color:#333;
text-shadow:0 1px 0 #fff;
}
.content p a:hover {
font:12px/18px Arial, sans-serif;
color:#f00;
text-shadow:0 1px 0 #fff;
-webkit-transition:color .15s ease-in;
-moz-transition:color .25s ease-in;
transition:color .25s ease-in;
}
Raw
dabblet.html
<body>
<div class="container">
<div class="triangle"></div>
<div class="bubble">
<div class="header">
<div class="circle"><p>new!</p></div>
<h1>Welcome to Your CMS Console&hellip;</h1>
</div>
<div class="content">
<p>Have a look around and enjoy the new scenery. Check out your new options, the possibilities they offer, and feel free to let us know how we're doing by <a href="#">dropping us a line</a> with any questions. We thank you for trying our new CMS!</p>
</div>
</div>
</div>​</body>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment