CSS Piano

Developer
Sebestyén Dániel
Size
5,138 Kb
Views
24,288
  1. CSS Piano Previews
  2. CSS Piano HTML Codes
  3. CSS Piano CSS Codes
  4. CSS Piano JS Codes

How do I make an css piano?

Most of people likes music. Most designers like CSS3. I'm a designer and a music lover. Here's the result.. What is a css piano? How do you make a css piano? This script and codes were developed by Sebestyén Dániel on 25 July 2022, Monday.

CSS Piano Previews
IQ Test

CSS Piano - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Piano</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="piano"> <div class="speaker" id="left"></div> <div class="speaker" id="right"></div> <div class="keyboard"> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button alt"></div> <div class="button"></div> <div class="button"></div> </div>
</div>
<div id="signature">DANNYSTYLE</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS Piano - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Open+Sans:600,700&subset=latin,latin-ext);
html, body { min-height: 100%; font-family: 'Open Sans', sans-serif; background: #16a085; text-align: center;
}
#signature { display: block; position: absolute; left: 50%; bottom: 10px; -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
.piano { top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); position: absolute; display: inline-block; min-height: 127px; background: #e74c3c; padding: 100px 15px 10px 15px; border-radius: 10px 10px 20px 20px; box-shadow: 0 10px 0 0 #c0392b, 0 20px 0 -5px rgba(0, 0, 0, 0.15); overflow: hidden;
}
.piano:before { display: block; content: ''; position: absolute; left: 0; top: 0; width: 0; height: 0; border-style: solid; border-width: 0 15px 100px 0; border-color: transparent #c0392b transparent transparent;
}
.piano:after { display: block; content: ''; position: absolute; right: 0; top: 0; width: 0; height: 0; border-style: solid; border-width: 100px 15px 0 0; border-color: #c0392b transparent transparent transparent;
}
.piano .speaker { display: block; position: absolute; height: 45px; width: 20%; top: 15px; z-index: 10; background: #2c3e50; border-radius: 10px 10px 13px 13px; box-shadow: inset 0 -2px 0;
}
.piano .speaker#left { left: 25px;
}
.piano .speaker#right { right: 25px;
}
.piano .keyboard { position: relative; letter-spacing: -4px; width: 0px;
}
.piano .keyboard:before { display: block; content: ''; background: #c0392b; position: absolute; left: 0; top: -15px; height: 30px; width: 100%;
}
.piano .keyboard:after { display: block; position: absolute; content: 'We love Music'; top: -100px; left: 0; right: 0; background: #cd3d2e; height: 66.66667px; letter-spacing: 0; line-height: 66.66667px; font-size: 33.33333px; color: #FFF; font-weight: 700; text-transform: uppercase;
}
.piano .keyboard .button { position: absolute; letter-spacing: 0; display: inline-block; background: #ecf0f1; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 5px 0 0 #bdc3c7; vertical-align: top; width: 20px; height: 120px; margin: 0; padding: 0; border-radius: 0 0 2px 2px; top: 0; left: auto; z-index: 1; -webkit-transition: all 120ms ease-in-out; transition: all 120ms ease-in-out; -webkit-transform-origin: top center; transform-origin: top center;
}
.piano .keyboard .button:hover { -webkit-transform: translateY(2px); transform: translateY(2px); background: #ecf0f1; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 3px 0 0 #bdc3c7;
}
.piano .keyboard .button:hover:active { -webkit-transform: translateY(5px); transform: translateY(5px); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0px 0 0 #bdc3c7;
}
.piano .keyboard .button.alt { top: -5px; background: #2c3e50; box-shadow: 0 5px 0 0; width: 15px; height: 90px; z-index: 10;
}
.piano .keyboard .button.alt:hover { -webkit-transform: translateY(2px); transform: translateY(2px); background: #2c3e50; box-shadow: 0 3px 0 0;
}
.piano .keyboard .button.alt:hover:active { -webkit-transform: translateY(5px); transform: translateY(5px); box-shadow: 0 0px 0 0;
}
.piano .keyboard .button:nth-child(1) { left: 0px;
}
.piano .keyboard .button:nth-child(1) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(2) { left: 0px;
}
.piano .keyboard .button:nth-child(3) { left: 0px;
}
.piano .keyboard .button:nth-child(4) { left: 0px;
}
.piano .keyboard .button:nth-child(4) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(5) { left: 0px;
}
.piano .keyboard .button:nth-child(6) { left: 0px;
}
.piano .keyboard .button:nth-child(6) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(7) { left: 0px;
}
.piano .keyboard .button:nth-child(8) { left: 0px;
}
.piano .keyboard .button:nth-child(9) { left: 0px;
}
.piano .keyboard .button:nth-child(9) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(10) { left: 0px;
}
.piano .keyboard .button:nth-child(11) { left: 0px;
}
.piano .keyboard .button:nth-child(11) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(12) { left: 0px;
}
.piano .keyboard .button:nth-child(13) { left: 0px;
}
.piano .keyboard .button:nth-child(13) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(14) { left: 0px;
}
.piano .keyboard .button:nth-child(15) { left: 0px;
}
.piano .keyboard .button:nth-child(16) { left: 0px;
}
.piano .keyboard .button:nth-child(16) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(17) { left: 0px;
}
.piano .keyboard .button:nth-child(18) { left: 0px;
}
.piano .keyboard .button:nth-child(18) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(19) { left: 0px;
}
.piano .keyboard .button:nth-child(20) { left: 0px;
}
.piano .keyboard .button:nth-child(21) { left: 0px;
}
.piano .keyboard .button:nth-child(21) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(22) { left: 0px;
}
.piano .keyboard .button:nth-child(23) { left: 0px;
}
.piano .keyboard .button:nth-child(23) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(24) { left: 0px;
}
.piano .keyboard .button:nth-child(25) { left: 0px;
}
.piano .keyboard .button:nth-child(25) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(26) { left: 0px;
}
.piano .keyboard .button:nth-child(27) { left: 0px;
}
.piano .keyboard .button:nth-child(28) { left: 0px;
}
.piano .keyboard .button:nth-child(28) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(29) { left: 0px;
}
.piano .keyboard .button:nth-child(30) { left: 0px;
}
.piano .keyboard .button:nth-child(30) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(31) { left: 0px;
}
.piano .keyboard .button:nth-child(32) { left: 0px;
}
.piano .keyboard .button:nth-child(33) { left: 0px;
}
.piano .keyboard .button:nth-child(33) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(34) { left: 0px;
}
.piano .keyboard .button:nth-child(35) { left: 0px;
}
.piano .keyboard .button:nth-child(35) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(36) { left: 0px;
}
.piano .keyboard .button:nth-child(37) { left: 0px;
}
.piano .keyboard .button:nth-child(37) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(38) { left: 0px;
}
.piano .keyboard .button:nth-child(39) { left: 0px;
}
.piano .keyboard .button:nth-child(40) { left: 0px;
}
.piano .keyboard .button:nth-child(40) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(41) { left: 0px;
}
.piano .keyboard .button:nth-child(42) { left: 0px;
}
.piano .keyboard .button:nth-child(42) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(43) { left: 0px;
}
.piano .keyboard .button:nth-child(44) { left: 0px;
}
.piano .keyboard .button:nth-child(45) { left: 0px;
}
.piano .keyboard .button:nth-child(45) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(46) { left: 0px;
}
.piano .keyboard .button:nth-child(47) { left: 0px;
}
.piano .keyboard .button:nth-child(47) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(48) { left: 0px;
}
.piano .keyboard .button:nth-child(49) { left: 0px;
}
.piano .keyboard .button:nth-child(49) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(50) { left: 0px;
}
.piano .keyboard .button:nth-child(51) { left: 0px;
}
.piano .keyboard .button:nth-child(52) { left: 0px;
}
.piano .keyboard .button:nth-child(52) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(53) { left: 0px;
}
.piano .keyboard .button:nth-child(54) { left: 0px;
}
.piano .keyboard .button:nth-child(54) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(55) { left: 0px;
}
.piano .keyboard .button:nth-child(56) { left: 0px;
}
.piano .keyboard .button:nth-child(57) { left: 0px;
}
.piano .keyboard .button:nth-child(57) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(58) { left: 0px;
}
.piano .keyboard .button:nth-child(59) { left: 0px;
}
.piano .keyboard .button:nth-child(59) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(60) { left: 0px;
}
.piano .keyboard .button:nth-child(61) { left: 0px;
}
.piano .keyboard .button:nth-child(61) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(62) { left: 0px;
}
.piano .keyboard .button:nth-child(63) { left: 0px;
}
.piano .keyboard .button:nth-child(64) { left: 0px;
}
.piano .keyboard .button:nth-child(64) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(65) { left: 0px;
}
.piano .keyboard .button:nth-child(66) { left: 0px;
}
.piano .keyboard .button:nth-child(66) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(67) { left: 0px;
}
.piano .keyboard .button:nth-child(68) { left: 0px;
}
.piano .keyboard .button:nth-child(69) { left: 0px;
}
.piano .keyboard .button:nth-child(69) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(70) { left: 0px;
}
.piano .keyboard .button:nth-child(71) { left: 0px;
}
.piano .keyboard .button:nth-child(71) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(72) { left: 0px;
}
.piano .keyboard .button:nth-child(73) { left: 0px;
}
.piano .keyboard .button:nth-child(73) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(74) { left: 0px;
}
.piano .keyboard .button:nth-child(75) { left: 0px;
}
.piano .keyboard .button:nth-child(76) { left: 0px;
}
.piano .keyboard .button:nth-child(76) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(77) { left: 0px;
}
.piano .keyboard .button:nth-child(78) { left: 0px;
}
.piano .keyboard .button:nth-child(78) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(79) { left: 0px;
}
.piano .keyboard .button:nth-child(80) { left: 0px;
}
.piano .keyboard .button:nth-child(81) { left: 0px;
}
.piano .keyboard .button:nth-child(81) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(82) { left: 0px;
}
.piano .keyboard .button:nth-child(83) { left: 0px;
}
.piano .keyboard .button:nth-child(83) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(84) { left: 0px;
}
.piano .keyboard .button:nth-child(85) { left: 0px;
}
.piano .keyboard .button:nth-child(85) + .button.alt { left: 10px;
}
.piano .keyboard .button:nth-child(86) { left: 0px;
}
.piano .keyboard .button:nth-child(87) { left: 0px;
}
.piano .keyboard .button:nth-child(88) { left: 0px;
}

CSS Piano - Script Codes JS Codes

/**
Pure css3 piano - JS has nothing to do :(
If anyone of you have the soundclips for each (88) keys and would give me those I'd make a real HTML5 CSS3 JS piano :)
**/
$(function(){ var signo = $('#signature').text(), d = new Date(); cy = d.getFullYear(); signo = cy + ' - ' + signo; $('#signature').text(signo);
});
CSS Piano - Script Codes
CSS Piano - Script Codes
Home Page Home
Developer Sebestyén Dániel
Username dannystyle
Uploaded July 25, 2022
Rating 3
Size 5,138 Kb
Views 24,288
Do you need developer help for CSS Piano?

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!

Sebestyén Dániel (dannystyle) Script Codes
Name
Animated clock
Morning coffee
Polite loader
App views animations
Fullheight Hero Unit
Master Dance loader
Mixing Owl-carousel and featerLightGallery
AngularJS Loader interceptor
Hello loader
Atomic loader
Create amazing blog posts 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!