CSS Laptop
How do I make an css laptop?
CSS Laptop with nice screen animation effect. . What is a css laptop? How do you make a css laptop? This script and codes were developed by Ty Strong on 11 August 2022, Thursday.
CSS Laptop Previews
CSS Laptop - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Laptop</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 { background: #eff;
}
div { position: absolute;
}
.container { position: relative; margin: 100px auto; width: 400px; height: 300px; background: rgba(0,0,0,0);
}
.outer-screen { width: 340px; height: 200px; background: #222; left: 30px; top: 20px; border-top-left-radius: 3px; border-top-right-radius: 3px;
}
.screen { width: 310px; height: 170px; background: #add; top: 15px; left: 15px; animation: color 15s linear infinite;
}
.top-glare { width: 336px; height: 2px; top: 2px; left: 2px; background: #666; border-top-left-radius: 2px; border-top-right-radius: 2px;
}
.bottom-tp { width: 340px; height: 0px; background: transparent; border-bottom: 14px solid #333; border-left: 16px solid transparent; border-right: 16px solid transparent; box-shadow: 0 2px 2px -2px #555; top: 220px; left: 14px; z-index: 2;
}
.bottom-tp:after { position: absolute; content: ''; width: 0; height: 0; border-bottom: 14px solid #777; border-left: 16px solid transparent; border-right: 6px solid transparent; left: -16px;
}
.bottom-tp:before { position: absolute; content: ''; width: 0; height: 0; border-bottom: 14px solid #777; border-left: 6px solid transparent; border-right: 16px solid transparent; right: -16px;
}
.bottom-bt { width: 364px; height: 0px; background: transparent; border-top: 8px solid #2f2f2f; border-left: 4px solid transparent; border-right: 4px solid transparent; top: 234px; left: 14px;
}
.keyboard { width: 290px; height: 0px; background: transparent; border-bottom: 8px solid #000; border-left: 8px solid transparent; border-right: 8px solid transparent; top: 0px; left: 15px;
}
.glare { width: 0; height: 0; border-top: 200px solid rgba(255,255,255,0.2); border-left: 240px solid transparent; right: 0px;
}
@keyframes color
{
0% {background: #add;}
10% {background: #aad;}
20% {background: #dad;}
30% {background: #daa;}
40% {background: #dda;}
50% {background: #ada;}
60% {background: #aaa;}
70% {background: #ddd;}
80% {background: #fff;}
90% {background: #bada55;}
100% {background: #add;}
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <div class="outer-screen"> <div class="screen"></div> <div class="top-glare"></div> </div> <div class="bottom-tp"> <div class="keyboard"></div> </div> <div class="bottom-bt"></div> <div class="glare"></div>
</div> <script src="js/index.js"></script>
</body>
</html>CSS Laptop - Script Codes CSS Codes
html { background: #eff;
}
div { position: absolute;
}
.container { position: relative; margin: 100px auto; width: 400px; height: 300px; background: rgba(0,0,0,0);
}
.outer-screen { width: 340px; height: 200px; background: #222; left: 30px; top: 20px; border-top-left-radius: 3px; border-top-right-radius: 3px;
}
.screen { width: 310px; height: 170px; background: #add; top: 15px; left: 15px; animation: color 15s linear infinite;
}
.top-glare { width: 336px; height: 2px; top: 2px; left: 2px; background: #666; border-top-left-radius: 2px; border-top-right-radius: 2px;
}
.bottom-tp { width: 340px; height: 0px; background: transparent; border-bottom: 14px solid #333; border-left: 16px solid transparent; border-right: 16px solid transparent; box-shadow: 0 2px 2px -2px #555; top: 220px; left: 14px; z-index: 2;
}
.bottom-tp:after { position: absolute; content: ''; width: 0; height: 0; border-bottom: 14px solid #777; border-left: 16px solid transparent; border-right: 6px solid transparent; left: -16px;
}
.bottom-tp:before { position: absolute; content: ''; width: 0; height: 0; border-bottom: 14px solid #777; border-left: 6px solid transparent; border-right: 16px solid transparent; right: -16px;
}
.bottom-bt { width: 364px; height: 0px; background: transparent; border-top: 8px solid #2f2f2f; border-left: 4px solid transparent; border-right: 4px solid transparent; top: 234px; left: 14px;
}
.keyboard { width: 290px; height: 0px; background: transparent; border-bottom: 8px solid #000; border-left: 8px solid transparent; border-right: 8px solid transparent; top: 0px; left: 15px;
}
.glare { width: 0; height: 0; border-top: 200px solid rgba(255,255,255,0.2); border-left: 240px solid transparent; right: 0px;
}
@keyframes color
{
0% {background: #add;}
10% {background: #aad;}
20% {background: #dad;}
30% {background: #daa;}
40% {background: #dda;}
50% {background: #ada;}
60% {background: #aaa;}
70% {background: #ddd;}
80% {background: #fff;}
90% {background: #bada55;}
100% {background: #add;}
}CSS Laptop - Script Codes JS Codes
// Concept from here: http://codepen.io/pouretrebelle/pen/bduoA
| Developer | Ty Strong |
| Username | tystrong |
| Uploaded | August 11, 2022 |
| Rating | 3.5 |
| Size | 2,987 Kb |
| Views | 42,504 |
Do you need developer help for CSS Laptop?
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!
Ty Strong (tystrong) Script Codes
| Name | Size |
| Logo Cubes in Slim and SCSS | 2,661 Kb |
| Rolling Circle | 1,942 Kb |
| Flat logo with hover effect. | 2,572 Kb |
| CSS Spinner | 2,289 Kb |
| Updated Personal Page | 3,682 Kb |
| Beautiful Round Shadow | 3,330 Kb |
| Logo with Slim and SCSS | 3,120 Kb |
| Another No Div Spinner | 1,938 Kb |
| Title Logo | 1,741 Kb |
| The Greatest. | 1,723 Kb |
Create amazing Facebook ads 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 |
| A simple log in form made with css | Mayurelbhar | 2,160 Kb |
| Responsive Section hover effect to show content | Berdejitendra | 2,540 Kb |
| Jstam.com Home Page | Jstam | 10,558 Kb |
| LBCA - Mail canvas | Emnbdx | 3,856 Kb |
| Mega Menu by Joni | Asakasinsky | 3,171 Kb |
| Flexbox Test | Icutpeople | 2,486 Kb |
| C.Rowe Button | Brownerd | 2,473 Kb |
| Stylize Stories | Jvhti | 2,465 Kb |
| Static Image to Video Block | Grayghostvisuals | 4,864 Kb |
| Countdown Timer | Massiebn | 3,001 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!