Skip to content

Instantly share code, notes, and snippets.

@innovationhero

innovationhero/dabblet.css

Created July 12, 2012 10:03
Show Gist options
  • Save innovationhero/3097145 to your computer and use it in GitHub Desktop.
Save innovationhero/3097145 to your computer and use it in GitHub Desktop.
Download ZIP
/
Raw
dabblet.css
@import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah);
* { box-sizing:border-box; }
body { background:url(http://subtlepatterns.com/patterns/little_pluses.png); #whitcacacaein:30px; }
/* */
/*
* SpeechBalloon
*/
.SpeechBalloon{
position:relative;
}
.SpeechBalloon p{font-size:12px;}
/*
* SpeechBalloon Type1
*/
.SpeechBalloon.type1 {
margin:0 auto 20px;
left:-75px;
width:100px;
height:100px;
background:#FF54AC;
border-radius:50px;
-webkit-box-shadow:
50px 0 0 #FF54AC,
100px 0 0 #FF54AC,
150px 0 0 #FF54AC
;
-moz-box-shadow:
50px 0 0 #FF54AC,
100px 0 0 #FF54AC,
150px 0 0 #FF54AC
;
box-shadow:
50px 0 0 #FF54AC,
100px 0 0 #FF54AC,
150px 0 0 #FF54AC
;
}
.SpeechBalloon.type1:before {
position:absolute;
content:'';
display:block;
width:0;
height:0;
top:92px;
left:116px;
border-top:18px solid #FF54AC;
border-left:8px solid transparent;
border-right:8px solid transparent;
}
.SpeechBalloon.type1 p{
position:absolute;
top:45px;
left:20px;
width:225px;
color:#fff;
font-size:14px;
text-align:center;
}
/*
* SpeechBalloon Type2
*/
.SpeechBalloon.type2 {
margin:0 auto 0;
left:-75px;
margin-bottom:15px;
width:100px;
height:100px;
border-radius:50px;
background:#FF54AC;
-webkit-box-shadow:
50px 0 0 #FF54AC,
100px 0 0 #FF54AC,
150px 0 0 #FF54AC
;
-moz-box-shadow:
50px 0 0 #FF54AC,
100px 0 0 #FF54AC,
150px 0 0 #FF54AC
;
box-shadow:
50px 0 0 #FF54AC,
100px 0 0 #FF54AC,
150px 0 0 #FF54AC
;
}
.SpeechBalloon.type2:before {
position:absolute;
content:'';
display:block;
width:20px;
height:20px;
border-radius:10px;
top:85px;
left:215px;
background:#FF54AC;
}
.SpeechBalloon.type2:after {
position:absolute;
content:'';
display:block;
width:10px;
height:10px;
border-radius:5px;
top:105px;
left:230px;
background:#FF54AC;
}
.SpeechBalloon.type2 p{
position:absolute;
top:45px;
left:20px;
width:225px;
color:#fff;
font-size:14px;
text-align:center;
}
/*
* SpeechBalloon Type3
*/
.SpeechBalloon.type3 {
top:25px;
margin:30px auto 100px;
left:-75px;
width:50px;
height:50px;
border-radius:25px;
-moz-border-radius:25px;
background:#FFF;
-webkit-box-shadow:
25px -20px 0 #FFF,
50px -30px 0 #FFF,
75px -35px 0 #FFF,
100px -30px 0 #FFF,
125px -20px 0 #FFF,
150px 0px 0 #FFF,
25px 20px 0 #FFF,
50px 30px 0 #FFF,
75px 35px 0 #FFF,
100px 30px 0 #FFF,
125px 25px 0 #FFF,
60px 0px 0 #FFF,
100px 0px 0 #FFF
;
-moz-box-shadow:
25px -20px 0 #FFF,
50px -30px 0 #FFF,
75px -35px 0 #FFF,
100px -30px 0 #FFF,
125px -20px 0 #FFF,
150px 0px 0 #FFF,
25px 20px 0 #FFF,
50px 30px 0 #FFF,
75px 35px 0 #FFF,
100px 30px 0 #FFF,
125px 25px 0 #FFF,
60px 0px 0 #FFF,
100px 0px 0 #FFF
;
box-shadow:
25px -20px 0 #FFF,
50px -30px 0 #FFF,
75px -35px 0 #FFF,
100px -30px 0 #FFF,
125px -20px 0 #FFF,
150px 0px 0 #FFF,
25px 20px 0 #FFF,
50px 30px 0 #FFF,
75px 35px 0 #FFF,
100px 30px 0 #FFF,
125px 25px 0 #FFF,
60px 0px 0 #FFF,
100px 0px 0 #FFF
;
}
.SpeechBalloon.type3:before {
position:relative;
content:'';
display:block;
top:-5px;
left:-5px;
width:60px;
height:60px;
border-radius:30px;
background:#FF54AC;
z-index:-1;
-webkit-box-shadow:
25px -20px 0 #FF54AC,
50px -30px 0 #FF54AC,
75px -35px 0 #FF54AC,
100px -30px 0 #FF54AC,
125px -20px 0 #FF54AC,
150px 0px 0 #FF54AC,
25px 20px 0 #FF54AC,
50px 30px 0 #FF54AC,
75px 35px 0 #FF54AC,
100px 30px 0 #FF54AC,
125px 25px 0 #FF54AC,
60px 0px 0 #FF54AC,
100px 0px 0 #FF54AC
;
-moz-box-shadow:
25px -20px 0 #FF54AC,
50px -30px 0 #FF54AC,
75px -35px 0 #FF54AC,
100px -30px 0 #FF54AC,
125px -20px 0 #FF54AC,
150px 0px 0 #FF54AC,
25px 20px 0 #FF54AC,
50px 30px 0 #FF54AC,
75px 35px 0 #FF54AC,
100px 30px 0 #FF54AC,
125px 25px 0 #FF54AC,
60px 0px 0 #FF54AC,
100px 0px 0 #FF54AC
;
box-shadow:
25px -20px 0 #FF54AC,
50px -30px 0 #FF54AC,
75px -35px 0 #FF54AC,
100px -30px 0 #FF54AC,
125px -20px 0 #FF54AC,
150px 0px 0 #FF54AC,
25px 20px 0 #FF54AC,
50px 30px 0 #FF54AC,
75px 35px 0 #FF54AC,
100px 30px 0 #FF54AC,
125px 25px 0 #FF54AC,
60px 0px 0 #FF54AC,
100px 0px 0 #FF54AC
;
}
.SpeechBalloon.type3:after {
position:absolute;
top:80px;
left:97px;
content:'';
display:block;
width:8px;
height:8px;
position:absolute;
background:#fff;
z-index:2;
-webkit-transform:rotate(45deg);
-webkit-box-shadow:4px 4px 0 #FF54AC;
-moz-transform:rotate(45deg);
-moz-box-shadow:4px 4px 0 #FF54AC;
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
box-shadow:4px 4px 0 #FF54AC;
}
.SpeechBalloon.type3 p{
position:absolute;
top:20px;
left:20px;
width:175px;
color:#FF54AC;
font-size:14px;
text-align:center;
}
/*
* SpeechBalloon Type4
*/
.SpeechBalloon.type4 {
width:170px;
height:120px;
margin:0 auto 20px;
}
.SpeechBalloon.type4:before {
position:absolute;
top:60px;
left:-15px;
content:'❤';
display:block;
width:0px;
height:0px;
line-height:0;
font-size:200px;
color:#FFF;
}
.SpeechBalloon.type4:after {
position:absolute;
top:60px;
left:-25px;
content:'❤';
display:block;
width:0px;
height:0px;
line-height:0;
font-size:220px;
color:#FF54AC;
z-index:-1;
}
.SpeechBalloon.type4 p {
position:relative;
z-index:2;
width:170px;
height:120px;
color:#FF54AC;
line-height:120px;
text-align:center;
}
/*
* SpeechBalloon Type5
*/
.SpeechBalloon.type5 {
position:relative;
left:4px;
width:150px;
height:100px;
margin:60px auto 100px;
background:#FFF;
}
.SpeechBalloon.type5:before {
position:absolute;
top:-25px;
left:-25px;
content:'';
display:block;
width:50px;
height:50px;
background:#FFF;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
-webkit-box-shadow:
134px -66px 0 #FFF,
170px -30px 0 #FFF,
140px 0px 0 #FFF,
100px 40px 0 #FFF,
100px -100px 0 #FFF,
70px -70px 0 #FFF,
30px -30px 0 #FFF,
36px 36px 0 #FFF,
71px 71px 0 #FFF
;
-moz-box-shadow:
134px -66px 0 #FFF,
170px -30px 0 #FFF,
140px 0px 0 #FFF,
100px 40px 0 #FFF,
100px -100px 0 #FFF,
70px -70px 0 #FFF,
30px -30px 0 #FFF,
36px 36px 0 #FFF,
71px 71px 0 #FFF
;
box-shadow:
134px -66px 0 #FFF,
170px -30px 0 #FFF,
140px 0px 0 #FFF,
100px 40px 0 #FFF,
100px -100px 0 #FFF,
70px -70px 0 #FFF,
30px -30px 0 #FFF,
36px 36px 0 #FFF,
71px 71px 0 #FFF
;
}
.SpeechBalloon.type5:after {
position:absolute;
top:-30px;
left:-30px;
content:'';
display:block;
width:60px;
height:60px;
background:#FF54AC;
z-index:-1;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
-webkit-box-shadow:
134px -66px 0 #FF54AC,
170px -30px 0 #FF54AC,
140px 0px 0 #FF54AC,
100px 40px 0 #FF54AC,
100px -100px 0 #FF54AC,
70px -70px 0 #FF54AC,
30px -30px 0 #FF54AC,
36px 36px 0 #FF54AC,
71px 71px 0 #FF54AC
;
-moz-box-shadow:
134px -66px 0 #FF54AC,
170px -30px 0 #FF54AC,
140px 0px 0 #FF54AC,
100px 40px 0 #FF54AC,
100px -100px 0 #FF54AC,
70px -70px 0 #FF54AC,
30px -30px 0 #FF54AC,
36px 36px 0 #FF54AC,
71px 71px 0 #FF54AC
;
box-shadow:
134px -66px 0 #FF54AC,
170px -30px 0 #FF54AC,
140px 0px 0 #FF54AC,
100px 40px 0 #FF54AC,
100px -100px 0 #FF54AC,
70px -70px 0 #FF54AC,
30px -30px 0 #FF54AC,
36px 36px 0 #FF54AC,
71px 71px 0 #FF54AC
;
}
.SpeechBalloon.type5 p {
position:relative;
z-index:2;
height:100px;
font-size:14px;
line-height:100px;
color:#FF54AC;
text-align:center;
}
/* */
textarea {
display: block;
padding:25px 25px 40px;
margin:0 auto 20px auto;
width:250px;
height:250px;
font:20px 'Gloria Hallelujah', cursive;
line-height:1.5;
border:0;
border-radius:3px;
background: -webkit-linear-gradient(#F9EFAF, #F7E98D);
background: -moz-linear-gradient(#F9EFAF, #F7E98D);
background: -o-linear-gradient(#F9EFAF, #F7E98D);
background: -ms-linear-gradient(#F9EFAF, #F7E98D);
background: linear-gradient(#F9EFAF, #F7E98D);
box-shadow:0 4px 6px rgba(0,0,0,0.1);
overflow:hidden;
transition:box-shadow 0.5s ease;
font-smoothing:subpixel-antialiased;
max-width:520px;
max-height:250px;
}
textarea:hover { box-shadow:0 5px 8px rgba(0,0,0,0.15); }
textarea:focus { box-shadow:0 5px 12px rgba(0,0,0,0.2); outline:none; }
/* body {
margin:-180px 0 0 0;
padding:0;
font: normal 10px/1.1em arial;
/* background: #f6f6f6; */
} */
.author {
position: absolute;
bottom:20px;
right:20px;
color:#777;
font-size:1.6em;
line-height: 1.2em;
}
.author a {
font-size: .8em;
color:#2b2b2b;
font-weight: bolder;
}
.body {
width:170px;
margin: 200px auto 0;
position:relative;
}
.head {
position:relative;
z-index:1;
height: 350px;
background:#fed61e;
border:5px solid #000;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
border-radius: 80px;
box-shadow: inset -5px -5px 0 2px rgba(0,0,0,.2),inset 5px 5px 0 2px rgba(255,250,196,.3);
}
/* hair */
.hair, .hair > div {
position: absolute;
top:-12px;
left:0;
right:0;
margin: 0 auto;
z-index:0;
width: 45px;
height:40px;
border:1px solid #000;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.hair > div {margin-top:17px;}
/* eyes */
.eyebrows {
position: absolute;
top:112px;
left:-10px;
right:-10px;
z-index:1;
}
.eyebrow {
position:relative;
z-index:2;
float:left;
height: 36px;
width: 40px;
background:#fed61e;
border-left:2px solid #000;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
box-shadow: inset 5px 5px 0 2px rgba(255,250,196,.3);
}
.eyebrow:last-child {
float:right;
border-left:0;
border-right:2px solid #000;
box-shadow: inset -5px -5px 0 2px rgba(0,0,0,.2);
}
.eyes {
position: absolute;
top:115px;
left:-10px;
right:-10px;
}
.eye {
position:relative;
z-index:2;
float:left;
height: 80px;
width: 80px;
background: #fff;
border:2px solid #000;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
/* animation */
-webkit-animation: eyes 1s infinite step-start 0s;
-moz-animation: eyes 1s infinite step-start 0s;
-ms-animation: eyes 1s infinite step-start 0s;
animation: eyes 4s infinite step-start 0s;
}
.eye:last-child {
float:right;
box-shadow: inset -5px -5px 0 2px rgba(0,0,0,.05);
}
.iris {
content: "";
display: block;
width:14px;
height:14px;
background:#000;
position:absolute;
z-index:3;
top:50%;
left:2px;
right:0;
margin: -7px auto 0;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
/* animation */
-webkit-animation: iris 4s infinite step-start 0s;
-moz-animation: iris 4s infinite step-start 0s;
-ms-animation: iris 4s infinite step-start 0s;
animation: iris 4s infinite step-start 0s;
}
/* ears */
.ears {
position: absolute;
top:170px;
left:-15px;
right:-15px;
}
.ear {
position:relative;
z-index:0;
float:left;
height: 40px;
width: 40px;
background:#fed61e;
border:5px solid #000;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.ear:last-child {
background:#ebce44;
float:right;
box-shadow: inset -5px -5px 0 2px rgba(0,0,0,.05);
}
/* nose */
.nose {
position:absolute;
z-index:3;
top: 175px;
left:0;
right: 0;
margin: 0 auto;
height: 38px;
width: 46px;
background:#fed61e;
border:2px solid #000;
border-top:none;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
box-shadow: inset -3px -3px 0 2px rgba(0,0,0,.2), 1px 3px 0 2px rgba(0,0,0,.1);
}
/* beard */
.beard {
position:absolute;
z-index:2;
top: 200px;
left: -15px;
right: -10px;
height: 140px;
width: 180px;
background:#d3a64b;
border:2px solid #000;
border-width: 2px 5px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
box-shadow: inset -5px -5px 0 2px rgba(0,0,0,.2), inset 5px 5px 0 2px rgba(255,250,196,.1);
}
.mouth {
position:absolute;
z-index:2;
top: 40px;
left:0;
right:0;
height: 55px;
width: 130px;
margin:0 auto;
border-bottom:5px solid #000;
-webkit-border-radius: 80%;
-moz-border-radius: 80%;
border-radius: 80%;
}
.mouth:before, .mouth:after {
content: "";
display: block;
position:absolute;
z-index:3;
top: 30px;
left:-3px;
height: 20px;
width: 20px;
border-left:3px solid #000;
-webkit-border-radius: 40%;
-moz-border-radius: 40%;
border-radius: 40%;
-webkit-transform: rotate(45deg);
}
.mouth:after {
left:auto;
right:-3px;
border-left:none;
border-right:3px solid #000;
-webkit-transform: rotate(-45deg);
}
.chin {
position:absolute;
z-index:2;
top: 105px;
left:0;
right:0;
height: 8px;
width: 30px;
margin:0 auto;
border-bottom:2px solid #000;
-webkit-border-radius: 80%;
-moz-border-radius: 80%;
border-radius: 80%;
}
/* animation */
/* eyes */
@-webkit-keyframes eyes {
0%, 100% {
background:#fed61e;
border-top: none;
-webkit-border-radius: 40% 40% 50% 50%;
-moz-border-radius: 40% 40% 50% 50%;
border-radius: 40% 40% 50% 50%;
}
15%, 95% {
background:#fff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border:2px solid #000;
}
}
@-moz-keyframes eyes {
0%, 100% {
background:#fed61e;
border-top: none;
-webkit-border-radius: 40% 40% 50% 50%;
-moz-border-radius: 40% 40% 50% 50%;
border-radius: 40% 40% 50% 50%;
}
15%, 95% {
background:#fff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border:2px solid #000;
}
}
@-ms-keyframes eyes {
0%, 100% {
background:#fed61e;
border-top: none;
-webkit-border-radius: 40% 40% 50% 50%;
-moz-border-radius: 40% 40% 50% 50%;
border-radius: 40% 40% 50% 50%;
}
15%, 95% {
background:#fff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border:2px solid #000;
}
}
@keyframes eyes {
0%, 100% {
background:#fed61e;
border-top: none;
-webkit-border-radius: 40% 40% 50% 50%;
-moz-border-radius: 40% 40% 50% 50%;
border-radius: 40% 40% 50% 50%;
}
15%, 95% {
background:#fff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border:2px solid #000;
}
}
/* iris */
@-webkit-keyframes iris {
0%, 100% {
opacity: 0;
}
15%, 95% {
opacity: 1;
}
}
@-moz-keyframes iris {
0%, 100% {
opacity: 0;
}
15%, 95% {
opacity: 1;
}
}
@-ms-keyframes iris {
0%, 100% {
opacity: 0;
}
15%, 95% {
opacity: 1;
}
}
@keyframes iris {
0%, 100% {
opacity: 0;
}
15%, 95% {
opacity: 1;
}
}
Raw
dabblet.html
<div class="body">
<div <p class="thought">SitePoint Rocks!</p>
</div>
<div class="head">
<div class="eyebrows">
<div class="eyebrow"></div>
<div class="eyebrow"></div>
</div>
<div class="eyes">
<div class="eye"><div class="iris"></div></div>
<div class="eye"><div class="iris"></div></div>
</div>
<div class="nose"></div>
<div class="beard">
<div class="mouth"></div>
<div class="chin"></div>
</div>
</div>
<div class="ears">
<div class="ear"></div>
<div class="ear"></div>
</div>
<div class="hair"><div></div></div>
<br>
<br>
<br>
<textarea>This is a sticky note you can type and edit.</textarea>
</div>
Raw
settings.json
{"view":"split","fontsize":"170","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment