CSS work desk

Developer
Ivan Sakoman
Size
6,139 Kb
Views
58,696
  1. CSS work desk Previews
  2. CSS work desk HTML Codes
  3. CSS work desk CSS Codes
  4. CSS work desk JS Codes

How do I make an css work desk?

What is a css work desk? How do you make a css work desk? This script and codes were developed by Ivan Sakoman on 12 June 2022, Sunday.

CSS work desk Previews
IQ Test

CSS work desk - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS work desk</title> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="tv"> <div class="black-off"></div> <!--.power-button contain ".off" witch change power-button active color--> <div class="power-button"></div> <div class="stand"> <div class="stand-hole"></div> <div class="stand-bottom"></div> </div> <!--svg elements for monitor content--> <svg class="logo" width="200px" height="200px" viewBox="0 0 140.19 136.06"> <ellipse fill="#a03033" cx="70.09" cy="68.03" rx="70.09" ry="68.03"/> <path fill="#FFF" d="M68.21,50.6L59.4,45.38A56.62,56.62,0,0,0,46.33,82q0,20.17,13.07,36.92l8.81-5.29a95.63,95.63,0,0,1-7.9-15.47A45.07,45.07,0,0,1,57.72,82a45.08,45.08,0,0,1,2.58-16.16A88.87,88.87,0,0,1,68.21,50.6Z" transform="translate(-14.17 -14.17)"/> <path fill="#FFF" d="M95.33,50.6l-8.81-5.22A56.64,56.64,0,0,0,73.45,82q0,20.17,13.07,36.92l8.81-5.29a95.58,95.58,0,0,1-7.9-15.47A45.05,45.05,0,0,1,84.85,82a45.07,45.07,0,0,1,2.59-16.16A88.83,88.83,0,0,1,95.33,50.6Z" transform="translate(-14.17 -14.17)"/> <path fill="#FFF" d="M112,82a45.11,45.11,0,0,1,2.58-16.16,88.84,88.84,0,0,1,7.9-15.26l-8.81-5.22A56.65,56.65,0,0,0,100.58,82q0,20.17,13.07,36.92l8.81-5.29a95.59,95.59,0,0,1-7.9-15.47A45.1,45.1,0,0,1,112,82Z" transform="translate(-14.17 -14.17)"/> </svg> <svg class="cursor" width="10px" viewBox="0 0 45 85"> <polygon points="0 0 0 63.64 17.88 56.23 29.8 85 39.03 81.17 27.12 52.41 45 45 0 0"/> </svg> <svg class="speaker-icon" width="40px" fill="#333" viewBox="0 0 93.32 100"> <polygon points="0 37.46 0 62.54 22.08 62.54 39.13 79.6 39.13 20.4 22.08 37.46 0 37.46"/> <path d="M63.22,50h0A40.47,40.47,0,0,0,51.87,21.63c-2.66-2.83-6.91,1.43-4.26,4.26C54.1,32.79,57.06,40.56,57.2,50c-.14,9.44-3.09,17.21-9.58,24.11-2.66,2.83,1.59,7.09,4.26,4.26A40.47,40.47,0,0,0,63.22,50Z"/> <path d="M78.27,50h0C78.06,35.23,73,22,62.79,11.28c-2.68-2.82-6.94,1.45-4.26,4.26C67.65,25.09,72.06,36.82,72.25,50c-.19,13.18-4.6,24.91-13.71,34.47-2.68,2.81,1.57,7.07,4.26,4.26C73,78,78.06,64.77,78.27,50Z"/> <path d="M93.32,50h0C93.11,31.42,86.61,14.33,73.71.92,71-1.89,66.77,2.38,69.46,5.17,81.26,17.45,87.11,33,87.3,50c-.19,17-6,32.55-17.84,44.83-2.69,2.8,1.56,7.06,4.26,4.26C86.61,85.67,93.11,68.58,93.32,50Z"/> </svg> <!--div that hide cursor on right side of monitor--> <div class="border-right"></div>
</div>
<!--.table elemetn contain speakers and stand for monitor-->
<div class="table"> <div class="speaker1"> <div class="membran1"></div> <div class="membran2"></div> </div> <div class="speaker2"> <div class="membran1"></div> <div class="membran2"></div> </div>
</div>
<!--element witch control position of secound "virtual! mouse cursor-->
<div class="controller-wrapper"> <div class="controller"> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS work desk - Script Codes CSS Codes

body { font-family: 'Lato', sans-serif; background-color: #34495e;
}
.tv { background-color: #fff; position: relative; margin: 70px auto; width: 500px; height: 250px; border-radius: 10px; border: 10px solid #333; border-bottom-width: 20px;
}
.tv.off .black-off { width: 500px; height: 250px; background-color: #111; position: absolute; top: 0; left: 0;
}
.tv.off .power-button { background-color: #a03033; box-shadow: 0 0 10px 1px #a03033;
}
.tv .black-off { width: 500px; height: 250px; background-color: transparent; position: absolute; top: 0; left: 0; transition: all .3s ease; z-index: 666;
}
.tv .logo { display: block; margin: 25px auto;
}
.tv .cursor { position: absolute; top: 0px; left: 0px;
}
.tv .power-button { position: absolute; width: 8px; height: 8px; border-radius: 4px; background-color: #27ae60; box-shadow: 0 0 10px 1px #2ecc71; bottom: -14px; right: 5px; cursor: pointer; z-index: 666;
}
.tv .stand { position: absolute; bottom: -80px; left: calc(50% - 25px); z-index: -1; height: 80px; width: 50px; background-color: #777;
}
.tv .stand .stand-hole { position: absolute; top: 5px; left: calc(50% - 12px); background-color: #34495e; width: 24px; height: 24px; border-radius: 50%;
}
.tv .stand .stand-bottom { position: absolute; bottom: -10px; left: calc(50% - 100px); width: 200px; height: 10px; background-color: #333; border-top-left-radius: 8px; border-top-right-radius: 8px;
}
.tv .speaker-icon { position: absolute; top: calc(50% - 20px); left: 40px; display: block;
}
.tv .speaker-icon.off path { display: none;
}
.tv .border-right { position: absolute; width: 10px; height: 250px; background-color: #333; right: -10px; top: 0;
}
.tv .border-right:after { content: ""; position: absolute; width: 510px; height: 20px; border-bottom-right-radius: 10px; background-color: #333; left: -500px; bottom: -20px;
}
.speaker, .speaker1, .speaker2 { position: absolute; top: -100px; width: 70px; height: 100px; background-color: #333; border-radius: 4px; animation-name: vibration; animation-duration: 600ms; transform-origin: 50% 50%; animation-iteration-count: infinite; animation-timing-function: linear;
}
.speaker.off, .off.speaker1, .off.speaker2 { animation-iteration-count: 1;
}
.speaker .membran1, .speaker1 .membran1, .speaker2 .membran1 { position: absolute; top: 10px; left: calc(50% - 15px); width: 22px; height: 22px; background-color: #a03033; border-radius: 25px; border: 4px solid #222;
}
.speaker .membran1::after, .speaker1 .membran1::after, .speaker2 .membran1::after { content: ''; position: absolute; top: calc(50% - 4px); left: calc(50% - 4px); width: 8px; height: 8px; border-radius: 5px; background-color: #333; display: block;
}
.speaker .membran2, .speaker1 .membran2, .speaker2 .membran2 { position: absolute; top: 48px; left: calc(50% - 22px); width: 36px; height: 36px; background-color: #a03033; border-radius: 25px; border: 4px solid #222; animation-name: speaker-on; animation-duration: 600ms; transform-origin: 50% 50%; animation-iteration-count: infinite; animation-timing-function: linear;
}
.speaker .membran2::after, .speaker1 .membran2::after, .speaker2 .membran2::after { content: ''; position: absolute; top: calc(50% - 6px); left: calc(50% - 6px); width: 12px; height: 12px; border-radius: 5px; background-color: #333; display: block;
}
.speaker .membran2.off, .speaker1 .membran2.off, .speaker2 .membran2.off { animation-play-state: paused;
}
.speaker1 { left: 30px;
}
.speaker2 { right: 30px;
}
.table { position: relative; width: 800px; height: 50px; background-color: #999; box-shadow: inset 0 -30px 0 -15px rgba(0, 0, 0, 0.2); margin: 0 auto; border-radius: 4px;
}
.controller-wrapper { position: relative; width: 200px; height: 200px; margin: 25px auto; border-radius: 100px; background-color: #ccc;
}
.controller-wrapper::after { position: absolute; bottom: -40px; color: white; content: "Hover to move cursor"; display: block; text-align: center; width: 200px; font-size: 20px; opacity: 0.5;
}
.controller-wrapper .controller { position: absolute; top: calc(50% - 25px); left: calc(50% - 25px); width: 50px; height: 50px; border-radius: 100px; background-color: #333; box-shadow: 0 0 15px -3px #333; transition: background-color .15s ease; cursor: pointer;
}
.controller-wrapper .controller:hover { box-shadow: 0 0 15px 0px #a03033;
}
.controller-wrapper .controller:active { background-color: #a03033;
}
@media screen and (max-width: 815px) { .tv { margin: 80px 140px; }
}
@keyframes speaker-on { 0% { transform: scale(1); } 40% { transform: scale(1.11); } 50% { transform: scale(1); } 70% { transform: scale(1.09); } 100% { transform: scale(1); }
}
@keyframes vibration { 0% { transform: rotate(5deg); transform-origin: 50% 80%; } 20% { transform: rotate(-5deg); transform-origin: 50% 80%; } 40% { transform: rotate(10deg); transform-origin: 50% 80%; } 60% { transform: rotate(-7deg); transform-origin: 50% 80%; } 80% { transform: rotate(3deg); transform-origin: 50% 80%; } 100% { transform: rotate(0deg); transform-origin: 50% 80%; }
}

CSS work desk - Script Codes JS Codes

$(document).ready(function() { registerHandler(); powerButton();
});
var r = 100 + 25;
var dragging = false;
function powerButton(){ $('.power-button').click(function(){ $('.tv').toggleClass('off'); });
}
function moveCursorTo(x, y) { var el = $(".tv")[0]; var cursor = $(".cursor")[0]; var rect = el.getBoundingClientRect(); ///cursor.style.transitionDuration = 500/x + `s`; cursor.style.transform = `translate3d(${x*2.5}px,${y*1.25}px,${0}px)`;
}
function moveController(e, el) { var parent = $(".controller-wrapper")[0]; var rect = parent.getBoundingClientRect(); el.style.top = (e.clientY - rect.top - 25) + 'px'; el.style.left = (e.clientX - rect.left - 25) + 'px'; var wrapperCenterX = rect.left + 200/2; var wrapperCenterY = rect.top + 200/2; if (Math.abs(wrapperCenterX - e.clientX) > 100 || Math.abs(wrapperCenterY - e.clientY) > 100) { resetPosition(el); dragging = false; //$(el).trigger("dragend"); } else moveCursorTo(Math.abs(e.clientX - rect.left), Math.abs(e.clientY - rect.top));
}
function resetPosition(el) { //el.style.transform = `translate3d(${75}px,${75}px,0)`; el.style.left = 75 + 'px'; el.style.top = 75 + 'px'; el.style.transition = "all .3s ease"; var to = setTimeout(function() { el.style.transition = "none"; clearTimeout(to); }, 300)
}
function speakersPower(e,el){ if((parseInt(el.style.top) >= 58 && parseInt(el.style.top) <= 94) && (parseInt(el.style.left) >= -10 && parseInt(el.style.left) <= 10 )) { $('.speaker-icon').toggleClass('off'); $('.membran2').toggleClass('off'); $('.speaker1,.speaker2').toggleClass('off'); }
}
function registerHandler() { var el = $(".controller")[0]; $(".controller") .on("mousemove", function(e){ dragging = true; moveController(e,el); }) .on("click", function(e){ speakersPower(e,el); }); /*$(".controller") .on("mousemove", function(e) { if (dragging) moveController(e, el); }) .on("mousedown", function() { if (!dragging) $(this).trigger("dragstart"); }) .on("mouseup", function() { $(this).trigger("dragend") }) .on("dragstart", function() { dragging = true; }) .on("dragend", function() { dragging = false; resetPosition(el); });*/
}
CSS work desk - Script Codes
CSS work desk - Script Codes
Home Page Home
Developer Ivan Sakoman
Username ssaakkaa
Uploaded June 12, 2022
Rating 3
Size 6,139 Kb
Views 58,696
Do you need developer help for CSS work desk?

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!

Ivan Sakoman (ssaakkaa) Script Codes
Name
OnClick transition
Colorful Apple logo
Dropdown
Responsive header
Rick Sanchez
3D flipping card
Bootstrap example
Binary controller
Bootstrap header
3D cube rotation
Create amazing SEO content 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!