Skip to content

Instantly share code, notes, and snippets.

@lukasborawski

lukasborawski/index.html

Last active September 21, 2017 11:01
Show Gist options
  • Save lukasborawski/1493380 to your computer and use it in GitHub Desktop.
Save lukasborawski/1493380 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<html>
<head>
<title>CSS3 CD Audio Box - My Loved Creation</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<section>
<div class="cd first_cd rotate_default">
<div class="cd_in"></div>
</div>
<div class="top_pack_closer"></div>
<div class="bottom_pack_closer"></div>
<div class="cd_box_shadow_down rotate_default"></div>
<div class="cover_main rotate_default first">
<img class="main_cover" src="http://mylovedcreation.pl/demos/css3_cd_box/cover_b_img.jpeg"/>
<div class="shine_element_one"></div>
<div class="plastick_field"></div>
</div>
<!-- shine glow -->
<div class="album_shine_cover rotate_default"></div>
<div class="cd second_cd rotate_default">
<div class="cd_in"></div>
</div>
<div class="cover_main rotate_default second">
<img class="main_cover_shine main_cover" src="cover_b_img.jpeg"/>
<div class="plastick_field"></div>
</div>
</section>
</body>
</html>
Raw
style.css
body {
margin: 0;
font-weight: normal;
font-size:12px;
width: 100%;
background: #000;
font-family: "Trebuchet MS", sans-serif;
}
.rotate_default {
-webkit-transform: rotateY(-30deg);
-moz-transform: rotateY(-30deg);
-o-transform: rotateY(-30deg);
-ms-transform: rotateY(-30deg);
transform: rotateY(-30deg);
}
section {
width:900px;
margin: 0 auto;
padding-top: 120px;
-webkit-perspective: 1000;
-webkit-perspective-origin-x: 50%;
-webkit-perspective-origin-y: 30%;
}
.cover_main {
position: relative;
z-index: 3;
width:553px;
height: 500px;
border-top: 3px solid #999;
border-bottom: 3px solid #999;
border-right: 4px solid #999;
border-left: 3px solid #0d0d0d;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin-bottom: -3px;
-webkit-box-shadow: 0 0 50px 20px #000;
-moz-box-shadow: 0 0 50px 20px #000;
box-shadow: 0 0 50px 20px #000;
}
.cd_box_shadow_down {
position: absolute;
top:622px;
left:3px;
z-index: 2;
width:550px;
height:1px;
-webkit-box-shadow: 10px 0 200px 15px #fff;
-moz-box-shadow: 10px 0 200px 15px #fff;
box-shadow: 10px 0 200px 15px #fff;
}
.top_pack_closer, .bottom_pack_closer {
z-index: 5;
position: absolute;
width:15px;
height: 2px;
border-radius: 3px;
border: 1px solid #999;
background: #999;
}
.top_pack_closer {
top: 100px;
right: 352px;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
.bottom_pack_closer {
top: 680px;
right: 351px;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.cd {
width:500px;
height:500px;
background: url('http://mylovedcreation.pl/demos/css3_cd_box/cover_b_img.jpeg') no-repeat 0 0;
position: absolute;
top:133px;
left:260px;
z-index: 1;
-webkit-border-radius: 1000px;
-moz-border-radius: 1000px;
border-radius: 1000px;
border: 6px solid #1a1919;
}
.cd_in {
position: absolute;
z-index: 1;
width: 80px;
height: 80px;
background: #000;
top:215px;
left:215px;
border: 10px solid #2a2a2a;
-webkit-border-radius: 1000px;
-moz-border-radius: 1000px;
border-radius: 1000px;
}
.second_cd {
top:690px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
filter: alpha(opacity=10);
opacity: 0.1;
}
.second {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
opacity: 0.4;
height: 250px;
overflow: hidden;
border-right: 4px solid #999;
width:553px;
box-shadow: none;
position: relative;
z-index: 1;
}
.plastick_field {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
top:0;
left:0;
width:50px;
height: 500px;
position: absolute;
z-index: 3;
background: rgb(76,76,76);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRjNGM0YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTIlIiBzdG9wLWNvbG9yPSIjNjY2NjY2IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTglIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMjQlIiBzdG9wLWNvbG9yPSIjNjY2NjY2IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMjYlIiBzdG9wLWNvbG9yPSIjNjY2NjY2IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMzElIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMzYlIiBzdG9wLWNvbG9yPSIjNjY2NjY2IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMzklIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjNjY2NjY2IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNDklIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTMlIiBzdG9wLWNvbG9yPSIjNjY2NjY2IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTYlIiBzdG9wLWNvbG9yPSIjNjY2NjY2IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNjIlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNjglIiBzdG9wLWNvbG9yPSIjNjY2NjY2IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNzMlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNzglIiBzdG9wLWNvbG9yPSIjNjY2NjY2IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iODMlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iODglIiBzdG9wLWNvbG9yPSIjNjY2NjY2IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iOTIlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iOTklIiBzdG9wLWNvbG9yPSIjNjY2NjY2IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(left, rgba(76,76,76,1) 0%, rgba(0,0,0,1) 6%, rgba(102,102,102,1) 12%, rgba(0,0,0,1) 18%, rgba(102,102,102,1) 24%, rgba(102,102,102,1) 26%, rgba(0,0,0,1) 31%, rgba(102,102,102,1) 36%, rgba(0,0,0,1) 39%, rgba(102,102,102,1) 44%, rgba(0,0,0,1) 49%, rgba(102,102,102,1) 53%, rgba(102,102,102,1) 56%, rgba(0,0,0,1) 62%, rgba(102,102,102,1) 68%, rgba(0,0,0,1) 73%, rgba(102,102,102,1) 78%, rgba(0,0,0,1) 83%, rgba(102,102,102,1) 88%, rgba(0,0,0,1) 92%, rgba(102,102,102,1) 99%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(76,76,76,1)), color-stop(6%,rgba(0,0,0,1)), color-stop(12%,rgba(102,102,102,1)), color-stop(18%,rgba(0,0,0,1)), color-stop(24%,rgba(102,102,102,1)), color-stop(26%,rgba(102,102,102,1)), color-stop(31%,rgba(0,0,0,1)), color-stop(36%,rgba(102,102,102,1)), color-stop(39%,rgba(0,0,0,1)), color-stop(44%,rgba(102,102,102,1)), color-stop(49%,rgba(0,0,0,1)), color-stop(53%,rgba(102,102,102,1)), color-stop(56%,rgba(102,102,102,1)), color-stop(62%,rgba(0,0,0,1)), color-stop(68%,rgba(102,102,102,1)), color-stop(73%,rgba(0,0,0,1)), color-stop(78%,rgba(102,102,102,1)), color-stop(83%,rgba(0,0,0,1)), color-stop(88%,rgba(102,102,102,1)), color-stop(92%,rgba(0,0,0,1)), color-stop(99%,rgba(102,102,102,1)));
background: -webkit-linear-gradient(left, rgba(76,76,76,1) 0%,rgba(0,0,0,1) 6%,rgba(102,102,102,1) 12%,rgba(0,0,0,1) 18%,rgba(102,102,102,1) 24%,rgba(102,102,102,1) 26%,rgba(0,0,0,1) 31%,rgba(102,102,102,1) 36%,rgba(0,0,0,1) 39%,rgba(102,102,102,1) 44%,rgba(0,0,0,1) 49%,rgba(102,102,102,1) 53%,rgba(102,102,102,1) 56%,rgba(0,0,0,1) 62%,rgba(102,102,102,1) 68%,rgba(0,0,0,1) 73%,rgba(102,102,102,1) 78%,rgba(0,0,0,1) 83%,rgba(102,102,102,1) 88%,rgba(0,0,0,1) 92%,rgba(102,102,102,1) 99%);
background: -o-linear-gradient(left, rgba(76,76,76,1) 0%,rgba(0,0,0,1) 6%,rgba(102,102,102,1) 12%,rgba(0,0,0,1) 18%,rgba(102,102,102,1) 24%,rgba(102,102,102,1) 26%,rgba(0,0,0,1) 31%,rgba(102,102,102,1) 36%,rgba(0,0,0,1) 39%,rgba(102,102,102,1) 44%,rgba(0,0,0,1) 49%,rgba(102,102,102,1) 53%,rgba(102,102,102,1) 56%,rgba(0,0,0,1) 62%,rgba(102,102,102,1) 68%,rgba(0,0,0,1) 73%,rgba(102,102,102,1) 78%,rgba(0,0,0,1) 83%,rgba(102,102,102,1) 88%,rgba(0,0,0,1) 92%,rgba(102,102,102,1) 99%);
background: -ms-linear-gradient(left, rgba(76,76,76,1) 0%,rgba(0,0,0,1) 6%,rgba(102,102,102,1) 12%,rgba(0,0,0,1) 18%,rgba(102,102,102,1) 24%,rgba(102,102,102,1) 26%,rgba(0,0,0,1) 31%,rgba(102,102,102,1) 36%,rgba(0,0,0,1) 39%,rgba(102,102,102,1) 44%,rgba(0,0,0,1) 49%,rgba(102,102,102,1) 53%,rgba(102,102,102,1) 56%,rgba(0,0,0,1) 62%,rgba(102,102,102,1) 68%,rgba(0,0,0,1) 73%,rgba(102,102,102,1) 78%,rgba(0,0,0,1) 83%,rgba(102,102,102,1) 88%,rgba(0,0,0,1) 92%,rgba(102,102,102,1) 99%);
background: linear-gradient(left, rgba(76,76,76,1) 0%,rgba(0,0,0,1) 6%,rgba(102,102,102,1) 12%,rgba(0,0,0,1) 18%,rgba(102,102,102,1) 24%,rgba(102,102,102,1) 26%,rgba(0,0,0,1) 31%,rgba(102,102,102,1) 36%,rgba(0,0,0,1) 39%,rgba(102,102,102,1) 44%,rgba(0,0,0,1) 49%,rgba(102,102,102,1) 53%,rgba(102,102,102,1) 56%,rgba(0,0,0,1) 62%,rgba(102,102,102,1) 68%,rgba(0,0,0,1) 73%,rgba(102,102,102,1) 78%,rgba(0,0,0,1) 83%,rgba(102,102,102,1) 88%,rgba(0,0,0,1) 92%,rgba(102,102,102,1) 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#666666',GradientType=1 );
}
.shine_element_one {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 0.6;
top:0;
left:53px;
position: absolute;
z-index: 1;
width: 500px;
height: 500px;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMzMiLz4KICAgIDxzdG9wIG9mZnNldD0iNDklIiBzdG9wLWNvbG9yPSIjNTY1NjU2IiBzdG9wLW9wYWNpdHk9IjAuMzMiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjNTg1ODU4IiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FmYWZhZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(-45deg, rgba(0,0,0,0.33) 0%, rgba(86,86,86,0.33) 49%, rgba(88,88,88,0) 50%, rgba(175,175,175,0) 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0.33)), color-stop(49%,rgba(86,86,86,0.33)), color-stop(50%,rgba(88,88,88,0)), color-stop(100%,rgba(175,175,175,0)));
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0.33) 0%,rgba(86,86,86,0.33) 49%,rgba(88,88,88,0) 50%,rgba(175,175,175,0) 100%);
background: -o-linear-gradient(-45deg, rgba(0,0,0,0.33) 0%,rgba(86,86,86,0.33) 49%,rgba(88,88,88,0) 50%,rgba(175,175,175,0) 100%);
background: -ms-linear-gradient(-45deg, rgba(0,0,0,0.33) 0%,rgba(86,86,86,0.33) 49%,rgba(88,88,88,0) 50%,rgba(175,175,175,0) 100%);
background: linear-gradient(-45deg, rgba(0,0,0,0.33) 0%,rgba(86,86,86,0.33) 49%,rgba(88,88,88,0) 50%,rgba(175,175,175,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#54000000', endColorstr='#00afafaf',GradientType=1 );
}
.cover_main img.main_cover, .cover_main img.main_cover_shine {
position: relative;
z-index: 2;
margin-left: 50px;
border-left: 3px solid #999;
}
.cover_main img.main_cover_shine {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
border-right: 3px solid #999;
}
.album_shine_cover {
display: inline-block;
z-index: 4;
position: absolute;
height:600px;
width:900px;
margin-left: -60px;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ5JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 49%, rgba(0,0,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(49%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,1)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 49%,rgba(0,0,0,1) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 49%,rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 49%,rgba(0,0,0,1) 100%);
background: linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 49%,rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment