Skip to content

Instantly share code, notes, and snippets.

@phongjalvn

phongjalvn/index.html

Created May 4, 2012 07:03
Show Gist options
  • Save phongjalvn/2592736 to your computer and use it in GitHub Desktop.
Save phongjalvn/2592736 to your computer and use it in GitHub Desktop.
Download ZIP
Sliding Clipboard
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:700italic,400,300,700' rel='stylesheet' type='text/css'>
<div class="holder">
<div class="bullet"></div>
<div class="line_one"></div>
<div class="line_two"></div>
<div class="pholder_one"></div>
<input type="checkbox" class="openercheck"></input>
<div class="cholder">
<h2>Lorem ipsum dolor sit amet</h2>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div class="opener"></div>
<div class="pholder_two"></div>
<div class="open_line"></div>
</div>
</body>
</html>
Raw
style.css
body {
background: url(http://subtlepatterns.com/patterns/tileable_wood_texture.png);
font-family: 'Open Sans', sans-serif;
color: #666;
min-height: 500px;
}
h2 {
margin: 10px 0 0 0;
font-weight: 400;
border-bottom: 1px dashed #ccc;
padding-bottom: 10px;
padding-top: 5px;
background: url(http://cdn1.iconfinder.com/data/icons/stuttgart/32/edit.png) 5px no-repeat;
text-indent: 50px;
}
p {
margin: 10px 0 0 0;
font-size: 13px;
}
a {
color: #6da2ce;
}
.holder {
width: 400px;
position: relative;
margin: 20px auto;
margin-top: 100px;
}
.bullet {
width: 5px;
height: 5px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: rgb(173,173,173);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNhZGFkYWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjM2QzZDNkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, rgba(173,173,173,1) 0%, rgba(61,61,61,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(173,173,173,1)), color-stop(100%,rgba(61,61,61,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(173,173,173,1) 0%,rgba(61,61,61,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(173,173,173,1) 0%,rgba(61,61,61,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(173,173,173,1) 0%,rgba(61,61,61,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(173,173,173,1) 0%,rgba(61,61,61,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#adadad', endColorstr='#3d3d3d',GradientType=1 );
border: 1px solid rgba(0,0,0,0.2);
box-shadow: inset 0 1px 0 0 rgba(255,255,255, 1);
position: absolute;
left: 197px;
top: -50px;
z-index: 999;
}
.line_one {
width: 160px;
height: 2px;
background: rgb(247,247,247);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNmM2YzYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(198,198,198,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,247,1)), color-stop(100%,rgba(198,198,198,1)));
background: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(198,198,198,1) 100%);
background: -o-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(198,198,198,1) 100%);
background: -ms-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(198,198,198,1) 100%);
background: linear-gradient(top, rgba(247,247,247,1) 0%,rgba(198,198,198,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#c6c6c6',GradientType=0 );
position: absolute;
-moz-transform:rotate(-20deg);
-webkit-transform:rotate(-20deg);
-o-transform:rotate(-20deg);
transform:rotate(-20deg);
top: -21px;
left: 46px;
box-shadow: 0 0 2px 0px rgba(0,0,0,0.2);
}
.line_two {
width: 160px;
height: 2px;
background: rgb(247,247,247);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNmM2YzYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(198,198,198,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,247,1)), color-stop(100%,rgba(198,198,198,1)));
background: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(198,198,198,1) 100%);
background: -o-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(198,198,198,1) 100%);
background: -ms-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(198,198,198,1) 100%);
background: linear-gradient(top, rgba(247,247,247,1) 0%,rgba(198,198,198,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#c6c6c6',GradientType=0 );
position: absolute;
-moz-transform:rotate(20deg);
-webkit-transform:rotate(20deg);
-o-transform:rotate(20deg);
transform:rotate(20deg);
top: -21px;
right: 46px;
box-shadow: 0 0 2px 0px rgba(0,0,0,0.2);
}
.pholder_one {
width: 400px;
height: 10px;
background: rgb(109,162,206);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZkYTJjZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1MzdmYTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(109,162,206,1) 0%, rgba(83,127,163,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(109,162,206,1)), color-stop(100%,rgba(83,127,163,1)));
background: -webkit-linear-gradient(top, rgba(109,162,206,1) 0%,rgba(83,127,163,1) 100%);
background: -o-linear-gradient(top, rgba(109,162,206,1) 0%,rgba(83,127,163,1) 100%);
background: -ms-linear-gradient(top, rgba(109,162,206,1) 0%,rgba(83,127,163,1) 100%);
background: linear-gradient(top, rgba(109,162,206,1) 0%,rgba(83,127,163,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6da2ce', endColorstr='#537fa3',GradientType=0 );
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
z-index: 999;
position: absolute;
border: 1px solid #537FA3;
box-shadow: 0 3px 3px 0 rgba(0,0,0,0.1),
inset 0 1px 0 0 rgba(255,255,255,0.3),
inset 0 0px 0 1px rgba(255,255,255,0.1),
0 6px 15px -2px rgba(0,0,0,0.2);
}
.cholder {
width: 380px;
height: 12px;
background-color: red;
top: 10px;
position: relative;
left: 1px;
background: #F7F7F7;
box-shadow: inset 0 1px 1px 0 rgba(0,0,0,1),
inset 0 1px 0 2px rgba(255,255,255,1),
0 0 5px 0px rgba(0,0,0,0.2);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
padding: 0px 10px 0px 10px;
overflow: hidden;
}
/* .holder:hover .cholder {
height: 220px;
}
*/
.pholder_two {
width: 400px;
height: 10px;
background: rgb(109,162,206);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZkYTJjZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1MzdmYTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(109,162,206,1) 0%, rgba(83,127,163,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(109,162,206,1)), color-stop(100%,rgba(83,127,163,1)));
background: -webkit-linear-gradient(top, rgba(109,162,206,1) 0%,rgba(83,127,163,1) 100%);
background: -o-linear-gradient(top, rgba(109,162,206,1) 0%,rgba(83,127,163,1) 100%);
background: -ms-linear-gradient(top, rgba(109,162,206,1) 0%,rgba(83,127,163,1) 100%);
background: linear-gradient(top, rgba(109,162,206,1) 0%,rgba(83,127,163,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6da2ce', endColorstr='#537fa3',GradientType=0 );
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
z-index: 999;
position: absolute;
border: 1px solid #537FA3;
box-shadow: 0 3px 3px 0 rgba(0,0,0,0.1),
inset 0 1px 0 0 rgba(255,255,255,0.3),
inset 0 0px 0 1px rgba(255,255,255,0.1),
0 -6px 15px -2px rgba(0,0,0,0.2);
}
.open_line {
width: 2px;
height: 25px;
background: rgb(127,127,127);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iIzdmN2Y3ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZjRmNGYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(127,127,127,1) 1%, rgba(79,79,79,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(127,127,127,1)), color-stop(100%,rgba(79,79,79,1)));
background: -webkit-linear-gradient(top, rgba(127,127,127,1) 1%,rgba(79,79,79,1) 100%);
background: -o-linear-gradient(top, rgba(127,127,127,1) 1%,rgba(79,79,79,1) 100%);
background: -ms-linear-gradient(top, rgba(127,127,127,1) 1%,rgba(79,79,79,1) 100%);
background: linear-gradient(top, rgba(127,127,127,1) 1%,rgba(79,79,79,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f7f7f', endColorstr='#4f4f4f',GradientType=0 );
position: absolute;
left: 197px;
box-shadow: 0 0 4px 0px rgba(0,0,0,0.3);
}
.openercheck {
position: absolute;
left: 187px;
margin-top: 37px;
background: transparent;
border: none;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
cursor: pointer;
}
.opener {
width: 10px;
height: 10px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 2px solid rgba(0,0,0,0.8);
box-shadow: inset 0 1px 0 0 rgba(255,255,255, 0.5),
0 0 4px 0px rgba(0,0,0,0.5);
position: absolute;
left: 191px;
margin-top: 25px;
z-index: 999;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-appearance: none;
-webkit-margin-start: 0;
-webkit-margin-end: 5px;
pointer-events: none;
}
.openercheck:checked {
top: 207px;
}
.openercheck:checked + .cholder {
height: 220px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment