Skip to content

Instantly share code, notes, and snippets.

@alyssaq

alyssaq/index.html

Created September 22, 2014 10:57
Show Gist options
  • Save alyssaq/bf12b68a7cfb297425d4 to your computer and use it in GitHub Desktop.
Save alyssaq/bf12b68a7cfb297425d4 to your computer and use it in GitHub Desktop.
Download ZIP
Labels on stickies css http://jsbin.com/wafamo/2
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.min.js"></script>
<canvas id="debug" style="position:absolute; left:100px"></canvas>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.stickies {
pointer-events: all;
list-style-type: none;
overflow: visible;
padding: 0;
margin: 0;
position: relative;
}
.labels {
pointer-events: all;
list-style-type: none;
overflow: visible;
padding: 5px;
margin: 0;
position: absolute;
display: inline;
left: -50%;
top: 5px;
}
.stickie {
position: absolute;
}
.card {
box-sizing: border-box;
width: 288px;
height: 288px;
//overflow: hidden;
color: black;
padding: 0 0 6px 0;
box-shadow: inset 0px 0px 0px 2px rgba(0, 0, 0, 0.1),
inset 0 -6px 0 0 rgba(0, 0, 0, 0.3);
position: relative;
}
.label {
position: relative;
background: skyblue;
width: 144px;
height: 34px;
margin-bottom:5px;
border-bottom: 1px solid grey;
opacity: 0.8;
}
.first-label {
background: orange !important;
}
.first-label:after {
border-left-color: orange !important;
}
.label:after, .label:before {
left: 100%;
top: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.label:before {
border-left-color: grey;
border-width: 17px;
margin-top: -16px;
}
.label:after {
border-left-color: skyblue;
border-width: 17px;
margin-top: -17px;
}
.pad {
padding-left: 170px;
margin: 0 auto;
}
.title {
display: inline-block;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 10px 20px 0 20px;
border: none;
background: transparent;
color: #000;
font-size: 34px;
font-weight: 400;
line-height: 41px;
}
</style>
</head>
<body>
<div class="pad">
<ul class="stickies">
<li class="stickie">
<div class="card" style="background-color: orange;">
<div class="title"> Make stickies fly </div>
<ul class="list-container labels">
<li class="label first-label">
<span class="text">
Enchancements
</span>
</li>
<li class="label">
<span class="text">
Basic
</span>
</li>
<li class="label">
<span class="text">
Performance
</span>
</li>
<li class="label">
<span class="text">
Tools
</span>
</li>
<li class="label">
<span class="text">
p2
</span>
</li>
<li class="label">
<span class="text">
Needs documentation
</span>
</li>
<li class="label">
<span class="text">
Needs test
</span>
</li>
</ul>
</div>
<li>
</ul>
</div>
<script id="jsbin-source-css" type="text/css">.stickies {
pointer-events: all;
list-style-type: none;
overflow: visible;
padding: 0;
margin: 0;
position: relative;
}
.labels {
pointer-events: all;
list-style-type: none;
overflow: visible;
padding: 5px;
margin: 0;
position: absolute;
display: inline;
left: -50%;
top: 5px;
}
.stickie {
position: absolute;
}
.card {
box-sizing: border-box;
width: 288px;
height: 288px;
//overflow: hidden;
color: black;
padding: 0 0 6px 0;
box-shadow: inset 0px 0px 0px 2px rgba(0, 0, 0, 0.1),
inset 0 -6px 0 0 rgba(0, 0, 0, 0.3);
position: relative;
}
.label {
position: relative;
background: skyblue;
width: 144px;
height: 34px;
margin-bottom:5px;
border-bottom: 1px solid grey;
opacity: 0.8;
}
.first-label {
background: orange !important;
}
.first-label:after {
border-left-color: orange !important;
}
.label:after, .label:before {
left: 100%;
top: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.label:before {
border-left-color: grey;
border-width: 17px;
margin-top: -16px;
}
.label:after {
border-left-color: skyblue;
border-width: 17px;
margin-top: -17px;
}
.pad {
padding-left: 170px;
margin: 0 auto;
}
.title {
display: inline-block;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 10px 20px 0 20px;
border: none;
background: transparent;
color: #000;
font-size: 34px;
font-weight: 400;
line-height: 41px;
}
</script>
</body>
</html>
Raw
jsbin.wafamo.css
.stickies {
pointer-events: all;
list-style-type: none;
overflow: visible;
padding: 0;
margin: 0;
position: relative;
}
.labels {
pointer-events: all;
list-style-type: none;
overflow: visible;
padding: 5px;
margin: 0;
position: absolute;
display: inline;
left: -50%;
top: 5px;
}
.stickie {
position: absolute;
}
.card {
box-sizing: border-box;
width: 288px;
height: 288px;
//overflow: hidden;
color: black;
padding: 0 0 6px 0;
box-shadow: inset 0px 0px 0px 2px rgba(0, 0, 0, 0.1),
inset 0 -6px 0 0 rgba(0, 0, 0, 0.3);
position: relative;
}
.label {
position: relative;
background: skyblue;
width: 144px;
height: 34px;
margin-bottom:5px;
border-bottom: 1px solid grey;
opacity: 0.8;
}
.first-label {
background: orange !important;
}
.first-label:after {
border-left-color: orange !important;
}
.label:after, .label:before {
left: 100%;
top: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.label:before {
border-left-color: grey;
border-width: 17px;
margin-top: -16px;
}
.label:after {
border-left-color: skyblue;
border-width: 17px;
margin-top: -17px;
}
.pad {
padding-left: 170px;
margin: 0 auto;
}
.title {
display: inline-block;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 10px 20px 0 20px;
border: none;
background: transparent;
color: #000;
font-size: 34px;
font-weight: 400;
line-height: 41px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment