CSS Turntable

Developer

Size

8,857 Kb

Views

8,096

CSS Turntable Previews
CSS Turntable HTML Codes
CSS Turntable CSS Codes
CSS Turntable JS Codes

How do I make an css turntable?

A pure CSS3 turntable, with a little bit of animation.I love coding & I love music. The two often come together.. What is a css turntable? How do you make a css turntable? This script and codes were developed by Nobitagit on 05 December 2022, Monday.

CSS Turntable Previews

CSS Turntable - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Turntable</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }
html { line-height: 1; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }
q, blockquote { quotes: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }
a img { border: none; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }
@-moz-keyframes spin { from { -moz-transform: rotate(0deg); transform: rotate(0deg); } to { -moz-transform: rotate(360deg); transform: rotate(360deg); } }
@-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@-o-keyframes spin { from { -o-transform: rotate(0deg); transform: rotate(0deg); } to { -o-transform: rotate(360deg); transform: rotate(360deg); } }
@-ms-keyframes spin { from { -ms-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes spin { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } }
@-moz-keyframes arm-movement { from { -moz-transform: rotateZ(25deg); transform: rotateZ(25deg); } 85% { -moz-transform: rotateZ(45deg); transform: rotateZ(45deg); } 91% { -moz-transform: rotateZ(0deg); transform: rotateZ(0deg); } 98% { -moz-transform: rotateZ(0deg); transform: rotateZ(0deg); } to { -moz-transform: rotateZ(25deg); transform: rotateZ(25deg); } }
@-webkit-keyframes arm-movement { from { -webkit-transform: rotateZ(25deg); transform: rotateZ(25deg); } 85% { -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } 91% { -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); } 98% { -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); } to { -webkit-transform: rotateZ(25deg); transform: rotateZ(25deg); } }
@-o-keyframes arm-movement { from { -o-transform: rotateZ(25deg); transform: rotateZ(25deg); } 85% { -o-transform: rotateZ(45deg); transform: rotateZ(45deg); } 91% { -o-transform: rotateZ(0deg); transform: rotateZ(0deg); } 98% { -o-transform: rotateZ(0deg); transform: rotateZ(0deg); } to { -o-transform: rotateZ(25deg); transform: rotateZ(25deg); } }
@-ms-keyframes arm-movement { from { -ms-transform: rotateZ(25deg); transform: rotateZ(25deg); } 85% { -ms-transform: rotateZ(45deg); transform: rotateZ(45deg); } 91% { -ms-transform: rotateZ(0deg); transform: rotateZ(0deg); } 98% { -ms-transform: rotateZ(0deg); transform: rotateZ(0deg); } to { -ms-transform: rotateZ(25deg); transform: rotateZ(25deg); } }
@keyframes arm-movement { from { -webkit-transform: rotateZ(25deg); -moz-transform: rotateZ(25deg); -ms-transform: rotateZ(25deg); -o-transform: rotateZ(25deg); transform: rotateZ(25deg); } 85% { -webkit-transform: rotateZ(45deg); -moz-transform: rotateZ(45deg); -ms-transform: rotateZ(45deg); -o-transform: rotateZ(45deg); transform: rotateZ(45deg); } 91% { -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); } 98% { -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); } to { -webkit-transform: rotateZ(25deg); -moz-transform: rotateZ(25deg); -ms-transform: rotateZ(25deg); -o-transform: rotateZ(25deg); transform: rotateZ(25deg); } }
body { background: #879494; max-width: 420px; margin: 0 auto; font-family: helvetica, arial, serif; }
h1, h2 { text-align: center; font-style: italic; font-weight: bold; color: #879494; text-shadow: 0px 0px 3px #333; }
h1 { font-size: 2.5em; }
h2 { font-size: 1.5em; margin-bottom: 1em; }
p { line-height: 1.3em; color: #1a1026; text-align: center; margin-bottom: 1.6em; }
.turntable { width: 420px; height: 315px; background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #2a2f2d), color-stop(100%, #4a524f)); background-image: -webkit-linear-gradient(top left, #2a2f2d, #4a524f); background-image: -moz-linear-gradient(top left, #2a2f2d, #4a524f); background-image: -o-linear-gradient(top left, #2a2f2d, #4a524f); background-image: linear-gradient(top left, #2a2f2d, #4a524f); -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 2px 2px 4px grey; -moz-box-shadow: 2px 2px 4px grey; box-shadow: 2px 2px 4px grey; position: relative; border: 4px solid #2a2f2d; margin: 40px auto 30px; }
.container { width: 300px; height: 300px; position: absolute; margin: 5px 0 20px 20px; -webkit-animation: spin 0.9s linear infinite; -moz-animation: spin 0.9s linear infinite; -ms-animation: spin 0.9s linear infinite; -o-animation: spin 0.9s linear infinite; animation: spin 0.9s linear infinite; }
.dot { width: 10px; height: 10px; display: block; position: absolute; background: #7e867f; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 0 0 0 1px #4a524f; -moz-box-shadow: inset 0 0 0 1px #4a524f; box-shadow: inset 0 0 0 1px #4a524f; z-index: 12; top: 145px; left: 145px; }
.dot:after { width: 40px; height: 40px; display: block; position: absolute; background: transparent; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 0 1px #c7d620; -moz-box-shadow: inset 0 0 0 1px #c7d620; box-shadow: inset 0 0 0 1px #c7d620; content: " "; position: absolute; top: -15px; left: -15px; }
.small { width: 110px; height: 110px; display: block; position: absolute; background: #d6e346; -webkit-border-radius: 55px; -moz-border-radius: 55px; -ms-border-radius: 55px; -o-border-radius: 55px; border-radius: 55px; z-index: 10; top: 95px; left: 95px; }
.big { width: 300px; height: 300px; display: block; position: absolute; background: black; -webkit-border-radius: 150px; -moz-border-radius: 150px; -ms-border-radius: 150px; -o-border-radius: 150px; border-radius: 150px; background-image: -webkit-gradient(radial, 150px 150px, 0, 150px 150px, 100, color-stop(0%, #2a2f2d), color-stop(0.813%, #4a524f), color-stop(1.626%, #2a2f2d), color-stop(2.439%, #4a524f), color-stop(3.252%, #4a524f), color-stop(4.065%, #2a2f2d), color-stop(4.878%, #4a524f), color-stop(5.691%, #2a2f2d), color-stop(6.504%, #4a524f), color-stop(7.317%, #2a2f2d), color-stop(8.13%, #4a524f), color-stop(8.943%, #2a2f2d), color-stop(9.756%, #4a524f), color-stop(10.569%, #2a2f2d), color-stop(11.382%, #4a524f), color-stop(12.195%, #2a2f2d), color-stop(13.008%, #2a2f2d), color-stop(13.821%, #4a524f), color-stop(14.634%, #2a2f2d), color-stop(15.447%, #4a524f), color-stop(16.26%, #4a524f), color-stop(17.073%, #2a2f2d), color-stop(17.886%, #4a524f), color-stop(18.699%, #2a2f2d), color-stop(19.512%, #4a524f), color-stop(20.325%, #2a2f2d), color-stop(21.138%, #4a524f), color-stop(21.951%, #2a2f2d), color-stop(22.764%, #4a524f), color-stop(23.577%, #2a2f2d), color-stop(24.39%, #4a524f), color-stop(25.203%, #2a2f2d), color-stop(26.016%, #4a524f), color-stop(26.829%, #2a2f2d), color-stop(27.642%, #4a524f), color-stop(28.455%, #2a2f2d), color-stop(29.268%, #4a524f), color-stop(30.081%, #2a2f2d), color-stop(30.894%, #4a524f), color-stop(31.707%, #2a2f2d), color-stop(32.52%, #4a524f), color-stop(33.333%, #2a2f2d), color-stop(34.146%, #4a524f), color-stop(34.959%, #2a2f2d), color-stop(35.772%, #4a524f), color-stop(36.585%, #2a2f2d), color-stop(37.398%, #4a524f), color-stop(38.211%, #2a2f2d), color-stop(39.024%, #4a524f), color-stop(39.837%, #2a2f2d), color-stop(40.65%, #4a524f), color-stop(41.463%, #2a2f2d), color-stop(42.276%, #4a524f), color-stop(43.089%, #2a2f2d), color-stop(43.902%, #4a524f), color-stop(44.715%, #2a2f2d), color-stop(45.528%, #4a524f), color-stop(46.341%, #2a2f2d), color-stop(47.154%, #4a524f), color-stop(47.967%, #2a2f2d), color-stop(48.78%, #4a524f), color-stop(49.593%, #2a2f2d), color-stop(50.407%, #4a524f), color-stop(51.22%, #2a2f2d), color-stop(52.033%, #4a524f), color-stop(52.846%, #2a2f2d), color-stop(53.659%, #4a524f), color-stop(54.472%, #2a2f2d), color-stop(55.285%, #4a524f), color-stop(56.098%, #2a2f2d), color-stop(56.911%, #4a524f), color-stop(57.724%, #2a2f2d), color-stop(58.537%, #4a524f), color-stop(59.35%, #2a2f2d), color-stop(60.163%, #4a524f), color-stop(60.976%, #2a2f2d), color-stop(61.789%, #4a524f), color-stop(62.602%, #2a2f2d), color-stop(63.415%, #4a524f), color-stop(64.228%, #2a2f2d), color-stop(65.041%, #4a524f), color-stop(65.854%, #2a2f2d), color-stop(66.667%, #4a524f), color-stop(67.48%, #2a2f2d), color-stop(68.293%, #4a524f), color-stop(69.106%, #2a2f2d), color-stop(69.919%, #4a524f), color-stop(70.732%, #2a2f2d), color-stop(71.545%, #4a524f), color-stop(72.358%, #2a2f2d), color-stop(73.171%, #4a524f), color-stop(73.984%, #2a2f2d), color-stop(74.797%, #4a524f), color-stop(75.61%, #2a2f2d), color-stop(76.423%, #4a524f), color-stop(77.236%, #2a2f2d), color-stop(78.049%, #4a524f), color-stop(78.862%, #2a2f2d), color-stop(79.675%, #4a524f), color-stop(80.488%, #2a2f2d), color-stop(81.301%, #4a524f), color-stop(82.114%, #2a2f2d), color-stop(82.927%, #4a524f), color-stop(83.74%, #2a2f2d), color-stop(84.553%, #4a524f), color-stop(85.366%, #2a2f2d), color-stop(86.179%, #4a524f), color-stop(86.992%, #2a2f2d), color-stop(87.805%, #4a524f), color-stop(88.618%, #2a2f2d), color-stop(89.431%, #4a524f), color-stop(90.244%, #2a2f2d), color-stop(91.057%, #4a524f), color-stop(91.87%, #2a2f2d), color-stop(92.683%, #4a524f), color-stop(93.496%, #2a2f2d), color-stop(94.309%, #4a524f), color-stop(95.122%, #2a2f2d), color-stop(95.935%, #4a524f), color-stop(96.748%, #2a2f2d), color-stop(97.561%, #4a524f), color-stop(98.374%, #2a2f2d), color-stop(99.187%, #4a524f), color-stop(100%, #2a2f2d)); background-image: -webkit-radial-gradient(150px 150px, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d); background-image: -moz-radial-gradient(150px 150px, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d); background-image: -o-radial-gradient(150px 150px, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d); background-image: radial-gradient(150px 150px, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d); -webkit-box-shadow: inset 0 0 0px 5px #888888; -moz-box-shadow: inset 0 0 0px 5px #888888; box-shadow: inset 0 0 0px 5px #888888; z-index: 8; }
.titles { position: absolute; z-index: 14; top: 165px; width: 300px; text-align: center; z-index: 13; } .titles h3, .titles h4 { font-family: helvetica, sans-serif; font-size: 0.6em; color: #4a524f; } .titles h3 { font-weight: bold; }
.elektra-logo { position: absolute; width: 60px; height: 50px; top: 100px; left: 120px; z-index: 14; -webkit-transform: scale(0.4, 0.4); -moz-transform: scale(0.4, 0.4); -ms-transform: scale(0.4, 0.4); -o-transform: scale(0.4, 0.4); transform: scale(0.4, 0.4); }
.shapes { position: absolute; }
.rect { width: 25; height: 50; background: #2a2f2d; }
.rect:before { width: 20px; height: 20px; display: block; position: absolute; background: #2a2f2d; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; content: " "; top: 15px; left: 28px; }
.triangle-up { border-top: 23px solid #2a2f2d; border-left: 23px solid transparent; right: 0; top: 0; }
.triangle-down { border-right: 23px solid #2a2f2d; border-top: 23px solid transparent; right: 0; bottom: 0; }
.arm-container { width: 90px; height: 90px; position: relative; float: right; margin-top: 10px; margin-right: 20px; -webkit-animation: arm-movement 41s linear infinite normal; -moz-animation: arm-movement 41s linear infinite normal; -ms-animation: arm-movement 41s linear infinite normal; -o-animation: arm-movement 41s linear infinite normal; animation: arm-movement 41s linear infinite normal; }
.arm-container:before { width: 90px; height: 90px; display: block; position: absolute; background: #323735; -webkit-border-radius: 45px; -moz-border-radius: 45px; -ms-border-radius: 45px; -o-border-radius: 45px; border-radius: 45px; -webkit-box-shadow: inset 0 0 0 1px grey; -moz-box-shadow: inset 0 0 0 1px grey; box-shadow: inset 0 0 0 1px grey; content: " "; top: 0px; position: absolute; }
.arm-container:after { width: 40px; height: 40px; display: block; position: absolute; background: #626d69; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 0 1px grey; -moz-box-shadow: inset 0 0 0 1px grey; box-shadow: inset 0 0 0 1px grey; content: " "; top: 25px; left: 25px; }
.arm { width: 18px; height: 80px; z-index: 14; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #b0b8b5), color-stop(50%, #4a524f), color-stop(100%, #b0b8b5)); background-image: -webkit-linear-gradient(left, #b0b8b5, #4a524f, #b0b8b5); background-image: -moz-linear-gradient(left, #b0b8b5, #4a524f, #b0b8b5); background-image: -o-linear-gradient(left, #b0b8b5, #4a524f, #b0b8b5); background-image: linear-gradient(left, #b0b8b5, #4a524f, #b0b8b5); display: block; position: absolute; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; top: 20px; left: 35px; }
.arm:before { width: 28px; height: 32px; z-index: 16; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #b0b8b5), color-stop(50%, #4a524f), color-stop(100%, #b0b8b5)); background-image: -webkit-linear-gradient(left, #b0b8b5, #4a524f, #b0b8b5); background-image: -moz-linear-gradient(left, #b0b8b5, #4a524f, #b0b8b5); background-image: -o-linear-gradient(left, #b0b8b5, #4a524f, #b0b8b5); background-image: linear-gradient(left, #b0b8b5, #4a524f, #b0b8b5); display: block; position: absolute; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; content: " "; top: -15px; left: -5px; }
.arm:after { width: 8px; height: 140px; z-index: 12; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #b0b8b5), color-stop(50%, #4a524f), color-stop(100%, #b0b8b5)); background-image: -webkit-linear-gradient(left, #b0b8b5, #4a524f, #b0b8b5); background-image: -moz-linear-gradient(left, #b0b8b5, #4a524f, #b0b8b5); background-image: -o-linear-gradient(left, #b0b8b5, #4a524f, #b0b8b5); background-image: linear-gradient(left, #b0b8b5, #4a524f, #b0b8b5); display: block; position: absolute; content: " "; top: 80px; left: 5px; }
.thorn { width: 20px; height: 40px; background: grey; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #95a09c), color-stop(100%, #626d69)); background-image: -webkit-linear-gradient(left, #95a09c, #626d69); background-image: -moz-linear-gradient(left, #95a09c, #626d69); background-image: -o-linear-gradient(left, #95a09c, #626d69); background-image: linear-gradient(left, #95a09c, #626d69); position: absolute; display: block; top: 240px; left: 34px; }
.thorn:before { width: 5px; height: 5px; display: block; position: absolute; background: #4a524f; -webkit-border-radius: 2.5px; -moz-border-radius: 2.5px; -ms-border-radius: 2.5px; -o-border-radius: 2.5px; border-radius: 2.5px; content: " "; bottom: 3px; left: 7px; }
.thorn:after { width: 15px; height: 5px; background: #2a2f2d; display: block; content: " "; position: absolute; bottom: 5px; right: -15px; }
.speedStrobe { width: 25px; height: 25px; display: block; position: absolute; background: #2a2f2d; -webkit-border-radius: 12.5px; -moz-border-radius: 12.5px; -ms-border-radius: 12.5px; -o-border-radius: 12.5px; border-radius: 12.5px; background-image: -webkit-gradient(radial, 50%, 0, 50%, 100, color-stop(0%, #424a47), color-stop(100%, #626d69)); background-image: -webkit-radial-gradient(center, #424a47, #626d69); background-image: -moz-radial-gradient(center, #424a47, #626d69); background-image: -o-radial-gradient(center, #424a47, #626d69); background-image: radial-gradient(center, #424a47, #626d69); bottom: 25px; left: 35px; z-index: 16; }
.speedStrobe:after { width: 15px; height: 15px; display: block; position: absolute; background: #2a2f2d; -webkit-border-radius: 7.5px; -moz-border-radius: 7.5px; -ms-border-radius: 7.5px; -o-border-radius: 7.5px; border-radius: 7.5px; background-image: -webkit-gradient(radial, 50%, 0, 50%, 100, color-stop(0%, #424a47), color-stop(100%, #626d69)); background-image: -webkit-radial-gradient(center, #424a47, #626d69); background-image: -moz-radial-gradient(center, #424a47, #626d69); background-image: -o-radial-gradient(center, #424a47, #626d69); background-image: radial-gradient(center, #424a47, #626d69); content: " "; left: 230px; top: 20px; }
.redLight { width: 12px; height: 0; display: block; position: absolute; bottom: 36px; left: 43px; border-top: 25px rgba(255, 0, 0, 0.2) solid; border-right: 15px transparent solid; border-left: 15px transparent solid; z-index: 15; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
.whiteLight { width: 0px; height: 45px; display: block; position: absolute; bottom: 20px; left: 250px; background: transparent; z-index: 15; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-box-shadow: 0px 0px 13px 5px rgba(255, 255, 255, 0.2); -moz-box-shadow: 0px 0px 13px 5px rgba(255, 255, 255, 0.2); box-shadow: 0px 0px 13px 5px rgba(255, 255, 255, 0.2); }
.curtain { background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #2a2f2d), color-stop(6.667%, #4a524f), color-stop(13.333%, #2a2f2d), color-stop(20%, #4a524f), color-stop(26.667%, #4a524f), color-stop(33.333%, #2a2f2d), color-stop(40%, #4a524f), color-stop(46.667%, #2a2f2d), color-stop(53.333%, #4a524f), color-stop(60.0%, #2a2f2d), color-stop(66.667%, #4a524f), color-stop(73.333%, #2a2f2d), color-stop(80%, #4a524f), color-stop(86.667%, #2a2f2d), color-stop(93.333%, #4a524f), color-stop(100%, #2a2f2d)); background-image: -webkit-linear-gradient(top left, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d); background-image: -moz-linear-gradient(top left, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d); background-image: -o-linear-gradient(top left, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d); background-image: linear-gradient(top left, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d); }
.curtain2 { background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #2a2f2d), color-stop(3.704%, #4a524f), color-stop(7.407%, #2a2f2d), color-stop(11.111%, #4a524f), color-stop(14.815%, #4a524f), color-stop(18.519%, #2a2f2d), color-stop(22.222%, #4a524f), color-stop(25.926%, #2a2f2d), color-stop(29.63%, #4a524f), color-stop(33.333%, #2a2f2d), color-stop(37.037%, #4a524f), color-stop(40.741%, #2a2f2d), color-stop(44.444%, #4a524f), color-stop(48.148%, #2a2f2d), color-stop(51.852%, #4a524f), color-stop(55.556%, #2a2f2d), color-stop(59.259%, #2a2f2d), color-stop(62.963%, #4a524f), color-stop(66.667%, #2a2f2d), color-stop(70.37%, #4a524f), color-stop(74.074%, #4a524f), color-stop(77.778%, #2a2f2d), color-stop(81.481%, #4a524f), color-stop(85.185%, #2a2f2d), color-stop(88.889%, #4a524f), color-stop(92.593%, #2a2f2d), color-stop(96.296%, #4a524f), color-stop(100%, #2a2f2d)); background-image: -webkit-linear-gradient(top left, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d); background-image: -moz-linear-gradient(top left, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d); background-image: -o-linear-gradient(top left, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d); background-image: linear-gradient(top left, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d); } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <html>
<!DOCTYPE HTML>
<html>
<head> <title>CSS Turntable</title>
</head>
<body>
<div class="turntable">	<span class="speedStrobe"></span>	<span class="redLight"></span>	<span class="whiteLight"></span>	<div class="container"> <span class="circle small"></span> <span class="circle big"></span> <span class="circle dot"></span>	<div class="elektra-logo">	<span class="shapes rect"></span>	<span class="shapes triangle-down"></span>	<span class="shapes triangle-up"></span>	</div> <span class="titles"><h3>THE DOORS</h3><h4>Strange Days</h4></span>	</div>	<span class="arm-container">	<span class="arm"></span>	<span class="thorn"></span>	</span>
</div>
<h1>CSS3 TURNTABLE</h1>
<h2>100% CSS, 0% images</h2>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>

CSS Turntable - Script Codes CSS Codes

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }
html { line-height: 1; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }
q, blockquote { quotes: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }
a img { border: none; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }
@-moz-keyframes spin { from { -moz-transform: rotate(0deg); transform: rotate(0deg); } to { -moz-transform: rotate(360deg); transform: rotate(360deg); } }
@-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@-o-keyframes spin { from { -o-transform: rotate(0deg); transform: rotate(0deg); } to { -o-transform: rotate(360deg); transform: rotate(360deg); } }
@-ms-keyframes spin { from { -ms-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes spin { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } }
@-moz-keyframes arm-movement { from { -moz-transform: rotateZ(25deg); transform: rotateZ(25deg); } 85% { -moz-transform: rotateZ(45deg); transform: rotateZ(45deg); } 91% { -moz-transform: rotateZ(0deg); transform: rotateZ(0deg); } 98% { -moz-transform: rotateZ(0deg); transform: rotateZ(0deg); } to { -moz-transform: rotateZ(25deg); transform: rotateZ(25deg); } }
@-webkit-keyframes arm-movement { from { -webkit-transform: rotateZ(25deg); transform: rotateZ(25deg); } 85% { -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } 91% { -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); } 98% { -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); } to { -webkit-transform: rotateZ(25deg); transform: rotateZ(25deg); } }
@-o-keyframes arm-movement { from { -o-transform: rotateZ(25deg); transform: rotateZ(25deg); } 85% { -o-transform: rotateZ(45deg); transform: rotateZ(45deg); } 91% { -o-transform: rotateZ(0deg); transform: rotateZ(0deg); } 98% { -o-transform: rotateZ(0deg); transform: rotateZ(0deg); } to { -o-transform: rotateZ(25deg); transform: rotateZ(25deg); } }
@-ms-keyframes arm-movement { from { -ms-transform: rotateZ(25deg); transform: rotateZ(25deg); } 85% { -ms-transform: rotateZ(45deg); transform: rotateZ(45deg); } 91% { -ms-transform: rotateZ(0deg); transform: rotateZ(0deg); } 98% { -ms-transform: rotateZ(0deg); transform: rotateZ(0deg); } to { -ms-transform: rotateZ(25deg); transform: rotateZ(25deg); } }
@keyframes arm-movement { from { -webkit-transform: rotateZ(25deg); -moz-transform: rotateZ(25deg); -ms-transform: rotateZ(25deg); -o-transform: rotateZ(25deg); transform: rotateZ(25deg); } 85% { -webkit-transform: rotateZ(45deg); -moz-transform: rotateZ(45deg); -ms-transform: rotateZ(45deg); -o-transform: rotateZ(45deg); transform: rotateZ(45deg); } 91% { -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); } 98% { -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); } to { -webkit-transform: rotateZ(25deg); -moz-transform: rotateZ(25deg); -ms-transform: rotateZ(25deg); -o-transform: rotateZ(25deg); transform: rotateZ(25deg); } }
body { background: #879494; max-width: 420px; margin: 0 auto; font-family: helvetica, arial, serif; }
h1, h2 { text-align: center; font-style: italic; font-weight: bold; color: #879494; text-shadow: 0px 0px 3px #333; }
h1 { font-size: 2.5em; }
h2 { font-size: 1.5em; margin-bottom: 1em; }
p { line-height: 1.3em; color: #1a1026; text-align: center; margin-bottom: 1.6em; }
.turntable { width: 420px; height: 315px; background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #2a2f2d), color-stop(100%, #4a524f)); background-image: -webkit-linear-gradient(top left, #2a2f2d, #4a524f); background-image: -moz-linear-gradient(top left, #2a2f2d, #4a524f); background-image: -o-linear-gradient(top left, #2a2f2d, #4a524f); background-image: linear-gradient(top left, #2a2f2d, #4a524f); -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 2px 2px 4px grey; -moz-box-shadow: 2px 2px 4px grey; box-shadow: 2px 2px 4px grey; position: relative; border: 4px solid #2a2f2d; margin: 40px auto 30px; }
.container { width: 300px; height: 300px; position: absolute; margin: 5px 0 20px 20px; -webkit-animation: spin 0.9s linear infinite; -moz-animation: spin 0.9s linear infinite; -ms-animation: spin 0.9s linear infinite; -o-animation: spin 0.9s linear infinite; animation: spin 0.9s linear infinite; }
.dot { width: 10px; height: 10px; display: block; position: absolute; background: #7e867f; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 0 0 0 1px #4a524f; -moz-box-shadow: inset 0 0 0 1px #4a524f; box-shadow: inset 0 0 0 1px #4a524f; z-index: 12; top: 145px; left: 145px; }
.dot:after { width: 40px; height: 40px; display: block; position: absolute; background: transparent; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 0 1px #c7d620; -moz-box-shadow: inset 0 0 0 1px #c7d620; box-shadow: inset 0 0 0 1px #c7d620; content: " "; position: absolute; top: -15px; left: -15px; }
.small { width: 110px; height: 110px; display: block; position: absolute; background: #d6e346; -webkit-border-radius: 55px; -moz-border-radius: 55px; -ms-border-radius: 55px; -o-border-radius: 55px; border-radius: 55px; z-index: 10; top: 95px; left: 95px; }
.big { width: 300px; height: 300px; display: block; position: absolute; background: black; -webkit-border-radius: 150px; -moz-border-radius: 150px; -ms-border-radius: 150px; -o-border-radius: 150px; border-radius: 150px; background-image: -webkit-gradient(radial, 150px 150px, 0, 150px 150px, 100, color-stop(0%, #2a2f2d), color-stop(0.813%, #4a524f), color-stop(1.626%, #2a2f2d), color-stop(2.439%, #4a524f), color-stop(3.252%, #4a524f), color-stop(4.065%, #2a2f2d), color-stop(4.878%, #4a524f), color-stop(5.691%, #2a2f2d), color-stop(6.504%, #4a524f), color-stop(7.317%, #2a2f2d), color-stop(8.13%, #4a524f), color-stop(8.943%, #2a2f2d), color-stop(9.756%, #4a524f), color-stop(10.569%, #2a2f2d), color-stop(11.382%, #4a524f), color-stop(12.195%, #2a2f2d), color-stop(13.008%, #2a2f2d), color-stop(13.821%, #4a524f), color-stop(14.634%, #2a2f2d), color-stop(15.447%, #4a524f), color-stop(16.26%, #4a524f), color-stop(17.073%, #2a2f2d), color-stop(17.886%, #4a524f), color-stop(18.699%, #2a2f2d), color-stop(19.512%, #4a524f), color-stop(20.325%, #2a2f2d), color-stop(21.138%, #4a524f), color-stop(21.951%, #2a2f2d), color-stop(22.764%, #4a524f), color-stop(23.577%, #2a2f2d), color-stop(24.39%, #4a524f), color-stop(25.203%, #2a2f2d), color-stop(26.016%, #4a524f), color-stop(26.829%, #2a2f2d), color-stop(27.642%, #4a524f), color-stop(28.455%, #2a2f2d), color-stop(29.268%, #4a524f), color-stop(30.081%, #2a2f2d), color-stop(30.894%, #4a524f), color-stop(31.707%, #2a2f2d), color-stop(32.52%, #4a524f), color-stop(33.333%, #2a2f2d), color-stop(34.146%, #4a524f), color-stop(34.959%, #2a2f2d), color-stop(35.772%, #4a524f), color-stop(36.585%, #2a2f2d), color-stop(37.398%, #4a524f), color-stop(38.211%, #2a2f2d), color-stop(39.024%, #4a524f), color-stop(39.837%, #2a2f2d), color-stop(40.65%, #4a524f), color-stop(41.463%, #2a2f2d), color-stop(42.276%, #4a524f), color-stop(43.089%, #2a2f2d), color-stop(43.902%, #4a524f), color-stop(44.715%, #2a2f2d), color-stop(45.528%, #4a524f), color-stop(46.341%, #2a2f2d), color-stop(47.154%, #4a524f), color-stop(47.967%, #2a2f2d), color-stop(48.78%, #4a524f), color-stop(49.593%, #2a2f2d), color-stop(50.407%, #4a524f), color-stop(51.22%, #2a2f2d), color-stop(52.033%, #4a524f), color-stop(52.846%, #2a2f2d), color-stop(53.659%, #4a524f), color-stop(54.472%, #2a2f2d), color-stop(55.285%, #4a524f), color-stop(56.098%, #2a2f2d), color-stop(56.911%, #4a524f), color-stop(57.724%, #2a2f2d), color-stop(58.537%, #4a524f), color-stop(59.35%, #2a2f2d), color-stop(60.163%, #4a524f), color-stop(60.976%, #2a2f2d), color-stop(61.789%, #4a524f), color-stop(62.602%, #2a2f2d), color-stop(63.415%, #4a524f), color-stop(64.228%, #2a2f2d), color-stop(65.041%, #4a524f), color-stop(65.854%, #2a2f2d), color-stop(66.667%, #4a524f), color-stop(67.48%, #2a2f2d), color-stop(68.293%, #4a524f), color-stop(69.106%, #2a2f2d), color-stop(69.919%, #4a524f), color-stop(70.732%, #2a2f2d), color-stop(71.545%, #4a524f), color-stop(72.358%, #2a2f2d), color-stop(73.171%, #4a524f), color-stop(73.984%, #2a2f2d), color-stop(74.797%, #4a524f), color-stop(75.61%, #2a2f2d), color-stop(76.423%, #4a524f), color-stop(77.236%, #2a2f2d), color-stop(78.049%, #4a524f), color-stop(78.862%, #2a2f2d), color-stop(79.675%, #4a524f), color-stop(80.488%, #2a2f2d), color-stop(81.301%, #4a524f), color-stop(82.114%, #2a2f2d), color-stop(82.927%, #4a524f), color-stop(83.74%, #2a2f2d), color-stop(84.553%, #4a524f), color-stop(85.366%, #2a2f2d), color-stop(86.179%, #4a524f), color-stop(86.992%, #2a2f2d), color-stop(87.805%, #4a524f), color-stop(88.618%, #2a2f2d), color-stop(89.431%, #4a524f), color-stop(90.244%, #2a2f2d), color-stop(91.057%, #4a524f), color-stop(91.87%, #2a2f2d), color-stop(92.683%, #4a524f), color-stop(93.496%, #2a2f2d), color-stop(94.309%, #4a524f), color-stop(95.122%, #2a2f2d), color-stop(95.935%, #4a524f), color-stop(96.748%, #2a2f2d), color-stop(97.561%, #4a524f), color-stop(98.374%, #2a2f2d), color-stop(99.187%, #4a524f), color-stop(100%, #2a2f2d)); background-image: -webkit-radial-gradient(150px 150px, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d); background-image: -moz-radial-gradient(150px 150px, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d); background-image: -o-radial-gradient(150px 150px, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d); background-image: radial-gradient(150px 150px, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d); -webkit-box-shadow: inset 0 0 0px 5px #888888; -moz-box-shadow: inset 0 0 0px 5px #888888; box-shadow: inset 0 0 0px 5px #888888; z-index: 8; }
.titles { position: absolute; z-index: 14; top: 165px; width: 300px; text-align: center; z-index: 13; } .titles h3, .titles h4 { font-family: helvetica, sans-serif; font-size: 0.6em; color: #4a524f; } .titles h3 { font-weight: bold; }
.elektra-logo { position: absolute; width: 60px; height: 50px; top: 100px; left: 120px; z-index: 14; -webkit-transform: scale(0.4, 0.4); -moz-transform: scale(0.4, 0.4); -ms-transform: scale(0.4, 0.4); -o-transform: scale(0.4, 0.4); transform: scale(0.4, 0.4); }
.shapes { position: absolute; }
.rect { width: 25; height: 50; background: #2a2f2d; }
.rect:before { width: 20px; height: 20px; display: block; position: absolute; background: #2a2f2d; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; content: " "; top: 15px; left: 28px; }
.triangle-up { border-top: 23px solid #2a2f2d; border-left: 23px solid transparent; right: 0; top: 0; }
.triangle-down { border-right: 23px solid #2a2f2d; border-top: 23px solid transparent; right: 0; bottom: 0; }
.arm-container { width: 90px; height: 90px; position: relative; float: right; margin-top: 10px; margin-right: 20px; -webkit-animation: arm-movement 41s linear infinite normal; -moz-animation: arm-movement 41s linear infinite normal; -ms-animation: arm-movement 41s linear infinite normal; -o-animation: arm-movement 41s linear infinite normal; animation: arm-movement 41s linear infinite normal; }
.arm-container:before { width: 90px; height: 90px; display: block; position: absolute; background: #323735; -webkit-border-radius: 45px; -moz-border-radius: 45px; -ms-border-radius: 45px; -o-border-radius: 45px; border-radius: 45px; -webkit-box-shadow: inset 0 0 0 1px grey; -moz-box-shadow: inset 0 0 0 1px grey; box-shadow: inset 0 0 0 1px grey; content: " "; top: 0px; position: absolute; }
.arm-container:after { width: 40px; height: 40px; display: block; position: absolute; background: #626d69; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 0 1px grey; -moz-box-shadow: inset 0 0 0 1px grey; box-shadow: inset 0 0 0 1px grey; content: " "; top: 25px; left: 25px; }
.arm { width: 18px; height: 80px; z-index: 14; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #b0b8b5), color-stop(50%, #4a524f), color-stop(100%, #b0b8b5)); background-image: -webkit-linear-gradient(left, #b0b8b5, #4a524f, #b0b8b5); background-image: -moz-linear-gradient(left, #b0b8b5, #4a524f, #b0b8b5); background-image: -o-linear-gradient(left, #b0b8b5, #4a524f, #b0b8b5); background-image: linear-gradient(left, #b0b8b5, #4a524f, #b0b8b5); display: block; position: absolute; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; top: 20px; left: 35px; }
.arm:before { width: 28px; height: 32px; z-index: 16; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #b0b8b5), color-stop(50%, #4a524f), color-stop(100%, #b0b8b5)); background-image: -webkit-linear-gradient(left, #b0b8b5, #4a524f, #b0b8b5); background-image: -moz-linear-gradient(left, #b0b8b5, #4a524f, #b0b8b5); background-image: -o-linear-gradient(left, #b0b8b5, #4a524f, #b0b8b5); background-image: linear-gradient(left, #b0b8b5, #4a524f, #b0b8b5); display: block; position: absolute; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; content: " "; top: -15px; left: -5px; }
.arm:after { width: 8px; height: 140px; z-index: 12; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #b0b8b5), color-stop(50%, #4a524f), color-stop(100%, #b0b8b5)); background-image: -webkit-linear-gradient(left, #b0b8b5, #4a524f, #b0b8b5); background-image: -moz-linear-gradient(left, #b0b8b5, #4a524f, #b0b8b5); background-image: -o-linear-gradient(left, #b0b8b5, #4a524f, #b0b8b5); background-image: linear-gradient(left, #b0b8b5, #4a524f, #b0b8b5); display: block; position: absolute; content: " "; top: 80px; left: 5px; }
.thorn { width: 20px; height: 40px; background: grey; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #95a09c), color-stop(100%, #626d69)); background-image: -webkit-linear-gradient(left, #95a09c, #626d69); background-image: -moz-linear-gradient(left, #95a09c, #626d69); background-image: -o-linear-gradient(left, #95a09c, #626d69); background-image: linear-gradient(left, #95a09c, #626d69); position: absolute; display: block; top: 240px; left: 34px; }
.thorn:before { width: 5px; height: 5px; display: block; position: absolute; background: #4a524f; -webkit-border-radius: 2.5px; -moz-border-radius: 2.5px; -ms-border-radius: 2.5px; -o-border-radius: 2.5px; border-radius: 2.5px; content: " "; bottom: 3px; left: 7px; }
.thorn:after { width: 15px; height: 5px; background: #2a2f2d; display: block; content: " "; position: absolute; bottom: 5px; right: -15px; }
.speedStrobe { width: 25px; height: 25px; display: block; position: absolute; background: #2a2f2d; -webkit-border-radius: 12.5px; -moz-border-radius: 12.5px; -ms-border-radius: 12.5px; -o-border-radius: 12.5px; border-radius: 12.5px; background-image: -webkit-gradient(radial, 50%, 0, 50%, 100, color-stop(0%, #424a47), color-stop(100%, #626d69)); background-image: -webkit-radial-gradient(center, #424a47, #626d69); background-image: -moz-radial-gradient(center, #424a47, #626d69); background-image: -o-radial-gradient(center, #424a47, #626d69); background-image: radial-gradient(center, #424a47, #626d69); bottom: 25px; left: 35px; z-index: 16; }
.speedStrobe:after { width: 15px; height: 15px; display: block; position: absolute; background: #2a2f2d; -webkit-border-radius: 7.5px; -moz-border-radius: 7.5px; -ms-border-radius: 7.5px; -o-border-radius: 7.5px; border-radius: 7.5px; background-image: -webkit-gradient(radial, 50%, 0, 50%, 100, color-stop(0%, #424a47), color-stop(100%, #626d69)); background-image: -webkit-radial-gradient(center, #424a47, #626d69); background-image: -moz-radial-gradient(center, #424a47, #626d69); background-image: -o-radial-gradient(center, #424a47, #626d69); background-image: radial-gradient(center, #424a47, #626d69); content: " "; left: 230px; top: 20px; }
.redLight { width: 12px; height: 0; display: block; position: absolute; bottom: 36px; left: 43px; border-top: 25px rgba(255, 0, 0, 0.2) solid; border-right: 15px transparent solid; border-left: 15px transparent solid; z-index: 15; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
.whiteLight { width: 0px; height: 45px; display: block; position: absolute; bottom: 20px; left: 250px; background: transparent; z-index: 15; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-box-shadow: 0px 0px 13px 5px rgba(255, 255, 255, 0.2); -moz-box-shadow: 0px 0px 13px 5px rgba(255, 255, 255, 0.2); box-shadow: 0px 0px 13px 5px rgba(255, 255, 255, 0.2); }
.curtain { background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #2a2f2d), color-stop(6.667%, #4a524f), color-stop(13.333%, #2a2f2d), color-stop(20%, #4a524f), color-stop(26.667%, #4a524f), color-stop(33.333%, #2a2f2d), color-stop(40%, #4a524f), color-stop(46.667%, #2a2f2d), color-stop(53.333%, #4a524f), color-stop(60.0%, #2a2f2d), color-stop(66.667%, #4a524f), color-stop(73.333%, #2a2f2d), color-stop(80%, #4a524f), color-stop(86.667%, #2a2f2d), color-stop(93.333%, #4a524f), color-stop(100%, #2a2f2d)); background-image: -webkit-linear-gradient(top left, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d); background-image: -moz-linear-gradient(top left, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d); background-image: -o-linear-gradient(top left, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d); background-image: linear-gradient(top left, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d); }
.curtain2 { background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #2a2f2d), color-stop(3.704%, #4a524f), color-stop(7.407%, #2a2f2d), color-stop(11.111%, #4a524f), color-stop(14.815%, #4a524f), color-stop(18.519%, #2a2f2d), color-stop(22.222%, #4a524f), color-stop(25.926%, #2a2f2d), color-stop(29.63%, #4a524f), color-stop(33.333%, #2a2f2d), color-stop(37.037%, #4a524f), color-stop(40.741%, #2a2f2d), color-stop(44.444%, #4a524f), color-stop(48.148%, #2a2f2d), color-stop(51.852%, #4a524f), color-stop(55.556%, #2a2f2d), color-stop(59.259%, #2a2f2d), color-stop(62.963%, #4a524f), color-stop(66.667%, #2a2f2d), color-stop(70.37%, #4a524f), color-stop(74.074%, #4a524f), color-stop(77.778%, #2a2f2d), color-stop(81.481%, #4a524f), color-stop(85.185%, #2a2f2d), color-stop(88.889%, #4a524f), color-stop(92.593%, #2a2f2d), color-stop(96.296%, #4a524f), color-stop(100%, #2a2f2d)); background-image: -webkit-linear-gradient(top left, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d); background-image: -moz-linear-gradient(top left, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d); background-image: -o-linear-gradient(top left, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d); background-image: linear-gradient(top left, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d, #4a524f, #2a2f2d); }

CSS Turntable - Script Codes JS Codes

/*
I know it's useless but it was definitely a good exercise when I made it some time ago and it was fun coding it.
Maybe I'll try to sync some music someday...who knows.
*/

Home Page	Home
Developer	Nobitagit
Username	nobitagit
Uploaded	December 05, 2022
Rating	3.5
Size	8,857 Kb
Views	8,096

Do you need developer help for CSS Turntable?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Nobitagit (nobitagit) Script Codes

Name	Size
Ripples in water	2,704 Kb
CSS3 Locker	2,023 Kb
Rebbbound	6,636 Kb
Radials	4,821 Kb
Svg mobile burger icon	1,864 Kb
Angularjs Material floating button directive	14,578 Kb
A Pen by nobitagit	2,965 Kb
Prankmarklet	3,406 Kb
CSS-only Clock	3,198 Kb

Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Stylize Stories	Jvhti	2,465 Kb
A Pen by Jason Kinney	Jason-kinney	1,980 Kb
A Pen by Malith Hettiarachchi	MalZiiirA	5,531 Kb
CircleType	Peterhry	3,535 Kb
Resizable SASS Icons	Marianarlt	7,611 Kb
Flat design iframe	Damienpm	1,819 Kb
A Pen by Markku Lehmonen	SharpDal	7,804 Kb
Hard-Stop Gradients	Mackdoyle	2,288 Kb
Clock	Martingrand	3,520 Kb
Tree growth tests	Orchard	3,818 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!