Last active
September 21, 2017 11:01
-
-
Save lukasborawski/1493380 to your computer and use it in GitHub Desktop.
CSS3 CD Audio Box - https://codepen.io/anon/pen/zEBRVq
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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