Responsive Icons in CSS
How do I make an responsive icons in css?
Inspired by the recent Dribble post by Joe Harrison : http://dribbble.com/shots/1290195-New-Project-Responsive-Icons?list=following. What is a responsive icons in css? How do you make a responsive icons in css? This script and codes were developed by Nick Hehr on 15 August 2022, Monday.
Responsive Icons in CSS Previews
Responsive Icons in CSS - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Icons in CSS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <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! */ * { box-sizing: border-box; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; transition: all 0.5s ease-out;
}
body { display: flex; flex-direction: row; justify-content: center; align-items: center; text-align: center; font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; font-weight: bold; color: #00BF9A; background: #2E2F3D; font-size: 2em;
}
main { display: flex; flex-direction: column; justify-content: center; align-items: center;
}
main::before { content: 'Responsive Icons'; margin-bottom: 40%; margin-top: 5%;
}
main::after { content: 'Boom, A New HipsterBrown Pen!'; margin-top: 10%;
}
@media screen and (max-width: 700px) { main::before { content: 'Rspnsve Icns'; } main::after { content: 'Bm, New HpstrBrwn Pen!'; }
}
@media screen and (max-width: 500px) { main::before { content: 'Rspnsv Icns'; font-size: .7em; } main::after { content: 'Bm, Nw HpstrBrwn Pn!'; font-size: .7em; }
}
.front { background: #F6AE96; height: 133.33333px; width: 200px; position: relative;
}
.front::before { content: ''; height: 0px; width: 0px; border-bottom: 99px solid #F6AE96; border-left: 110px solid transparent; border-right: 110px solid transparent; position: absolute; top: -95px; left: -10px;
}
@media screen and (max-width: 1100px) { .front { background: #F6764C; } .front::before { height: 0px; width: 0px; border-bottom: 100px solid #F6764C; border-left: 100px solid transparent; border-right: 100px solid transparent; top: -100px; left: 0; }
}
@media screen and (max-width: 1000px) { .front { width: 170px; height: 100px; background: #d13c0b; } .front::before { opacity: 0; }
}
@media screen and (max-width: 900px) { .front { width: 150px; }
}
@media screen and (max-width: 800px) { .front { width: 120px; height: 90px; }
}
@media screen and (max-width: 700px) { .front { width: 100px; height: 70px; }
}
@media screen and (max-width: 600px) { .front { width: 60px; height: 40px; }
}
@media screen and (max-width: 500px) { .front { width: 50px; height: 30px; }
}
@media screen and (max-width: 400px) { .front { width: 30px; height: 20px; }
}
.window { background: #2E2F3D; height: 40px; width: 40px; display: inline-block; position: relative;
}
.window::before { content: ''; width: 40px; border-bottom: 5px solid #F6AE96; position: absolute; bottom: 17px; left: 0;
}
.window::after { content: ''; height: 40px; border-left: 5px solid #F6AE96; position: absolute; bottom: 0; left: 17px;
}
.window:nth-of-type(2) { margin: 0 15px; bottom: 50px; width: 30px; border-radius: 15px 15px 0 0;
}
.window:nth-of-type(2)::after { left: 12.5px;
}
@media screen and (max-width: 1100px) { .window:nth-of-type(2) { opacity: 0; }
}
.window:nth-of-type(odd) { top: 50px;
}
.window:nth-of-type(odd) .sill { background: #2E2F3D; height: 5px; width: 47px; position: absolute; bottom: -8px; left: -3px;
}
@media screen and (max-width: 1100px) { .window:nth-of-type(odd) .sill { height: 4px; width: 42px; bottom: -8px; }
}
@media screen and (max-width: 1000px) { .window:nth-of-type(odd) .sill { width: 50px; }
}
@media screen and (max-width: 900px) { .window:nth-of-type(odd) .sill { background: none; }
}
@media screen and (max-width: 1100px) { .window { height: 35px; width: 35px; } .window::before { border-bottom: 5px solid #F6764C; bottom: 15px; } .window::after { border-left: 5px solid #F6764C; left: 15px; }
}
@media screen and (max-width: 1000px) { .window { height: 45px; width: 45px; right: 30px; } .window:nth-of-type(odd) { top: 20px; } .window:first-of-type { opacity: 0; } .window::before { border-bottom: 5px solid #d13c0b; bottom: 18px; width: 50px; } .window::after { border-left: 5px solid #d13c0b; left: 20px; bottom: 0px; height: 55px; }
}
@media screen and (max-width: 900px) { .window { height: 35px; width: 35px; } .window::before { bottom: 16px; border-bottom: 4px solid #d13c0b; } .window::after { left: 16px; border-left: 4px solid #d13c0b; }
}
@media screen and (max-width: 800px) { .window { height: 20px; width: 20px; } .window:nth-of-type(odd) { top: 5px; right: 20px; } .window::before { border: none; } .window::after { border: none; }
}
@media screen and (max-width: 700px) { .window { opacity: 0; }
}
.door { background: #F6764C; height: 60px; width: 40px; position: absolute; left: 80px; bottom: 0; box-shadow: inset -4px 4px 0 0 #d13c0b;
}
.door::before { content: ''; background: #2E2F3D; height: 5px; width: 5px; border-radius: 50%; position: absolute; left: 10px; bottom: 25px;
}
.door::after { content: ''; width: 47px; border-bottom: 5px solid #2E2F3D; position: absolute; bottom: 0; left: -4px;
}
@media screen and (max-width: 1100px) { .door { background: #2E2F3D; box-shadow: none; height: 65px; } .door::before { background: #d13c0b; bottom: 30px; left: 7px; }
}
@media screen and (max-width: 1000px) { .door { left: 20px; height: 55px; width: 35px; } .door::after { width: 44px; }
}
@media screen and (max-width: 900px) { .door::before { opacity: 0; } .door::after { opacity: 0; }
}
@media screen and (max-width: 800px) { .door { width: 25px; height: 40px; }
}
@media screen and (max-width: 700px) { .door { width: 30px; left: 35px; }
}
@media screen and (max-width: 600px) { .door { width: 20px; height: 30px; left: 21px; }
}
@media screen and (max-width: 500px) { .door { width: 15px; height: 20px; left: 18px; }
}
@media screen and (max-width: 400px) { .door { opacity: 0; }
}
.back { background: #F6764C; height: 133.33333px; width: 200px; z-index: -1; position: relative; bottom: 150px; left: 45px;
}
.back::before { content: ''; background: #d13c0b; height: 50px; width: 150px; position: absolute; left: 45px; top: -50px; -webkit-transform: skew(35deg); -moz-transform: skew(35deg); -ms-transform: skew(35deg); -o-transform: skew(35deg); transform: skew(35deg);
}
@media screen and (max-width: 1100px) { .back { height: 0px; width: 0px; border-bottom: 130px solid #d13c0b; border-left: 130px solid transparent; border-right: 130px solid transparent; background: none; left: 0; top: -260px; } .back::before { -webkit-transform: skew(0deg); -moz-transform: skew(0deg); -ms-transform: skew(0deg); -o-transform: skew(0deg); transform: skew(0deg); left: 0; top: 0; height: 0px; width: 0px; border-bottom: 140px solid #2E2F3D; border-left: 140px solid transparent; border-right: 140px solid transparent; background: none; top: 20px; left: -140px; }
}
@media screen and (max-width: 1000px) { .back { height: 0px; width: 0px; border-bottom: 110px solid #d13c0b; border-left: 110px solid transparent; border-right: 110px solid transparent; top: -215px; } .back::before { opacity: 0; }
}
@media screen and (max-width: 900px) { .back { height: 0px; width: 0px; border-bottom: 90px solid #d13c0b; border-left: 90px solid transparent; border-right: 90px solid transparent; top: -195px; }
}
@media screen and (max-width: 800px) { .back { height: 0px; width: 0px; border-bottom: 75px solid #d13c0b; border-left: 75px solid transparent; border-right: 75px solid transparent; top: -170px; }
}
@media screen and (max-width: 700px) { .back { height: 0px; width: 0px; border-bottom: 65px solid #d13c0b; border-left: 65px solid transparent; border-right: 65px solid transparent; top: -135px; }
}
@media screen and (max-width: 600px) { .back { height: 0px; width: 0px; border-bottom: 40px solid #d13c0b; border-left: 40px solid transparent; border-right: 40px solid transparent; top: -80px; }
}
@media screen and (max-width: 500px) { .back { height: 0px; width: 0px; border-bottom: 26px solid #d13c0b; border-left: 26px solid transparent; border-right: 26px solid transparent; top: -56px; }
}
@media screen and (max-width: 400px) { .back { height: 0px; width: 0px; border-bottom: 16px solid #d13c0b; border-left: 16px solid transparent; border-right: 16px solid transparent; top: -36px; }
}
.chimney { background: #F6764C; height: 60px; width: 30px; position: absolute; top: -55px; left: -10px;
}
.chimney::before { content: ''; position: absolute; border-top: 10px solid #F6764C; top: -10px; left: -5px; width: 40px;
}
@media screen and (max-width: 1100px) { .chimney { top: 30px; left: -80px; background: #d13c0b; z-index: -1; } .chimney::before { border-top: 12px solid #d13c0b; top: -16px; left: -7px; width: 43px; }
}
@media screen and (max-width: 900px) { .chimney { left: -65px; width: 20px; } .chimney::before { border-top: 10px solid #d13c0b; top: -10px; width: 33px; }
}
@media screen and (max-width: 800px) { .chimney { height: 30px; left: -50px; top: 20px; } .chimney::before { opacity: 0; }
}
@media screen and (max-width: 600px) { .chimney { opacity: 0; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <main class="house"> <div class="front"> <div class="window"> <div class="sill"></div> </div> <div class="window"></div> <div class="window"> <div class="sill"></div> </div> <div class="door"></div> </div> <div class="back"> <div class="chimney"></div> </div>
</main>
</body>
</html>
Responsive Icons in CSS - Script Codes CSS Codes
* { box-sizing: border-box; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; transition: all 0.5s ease-out;
}
body { display: flex; flex-direction: row; justify-content: center; align-items: center; text-align: center; font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; font-weight: bold; color: #00BF9A; background: #2E2F3D; font-size: 2em;
}
main { display: flex; flex-direction: column; justify-content: center; align-items: center;
}
main::before { content: 'Responsive Icons'; margin-bottom: 40%; margin-top: 5%;
}
main::after { content: 'Boom, A New HipsterBrown Pen!'; margin-top: 10%;
}
@media screen and (max-width: 700px) { main::before { content: 'Rspnsve Icns'; } main::after { content: 'Bm, New HpstrBrwn Pen!'; }
}
@media screen and (max-width: 500px) { main::before { content: 'Rspnsv Icns'; font-size: .7em; } main::after { content: 'Bm, Nw HpstrBrwn Pn!'; font-size: .7em; }
}
.front { background: #F6AE96; height: 133.33333px; width: 200px; position: relative;
}
.front::before { content: ''; height: 0px; width: 0px; border-bottom: 99px solid #F6AE96; border-left: 110px solid transparent; border-right: 110px solid transparent; position: absolute; top: -95px; left: -10px;
}
@media screen and (max-width: 1100px) { .front { background: #F6764C; } .front::before { height: 0px; width: 0px; border-bottom: 100px solid #F6764C; border-left: 100px solid transparent; border-right: 100px solid transparent; top: -100px; left: 0; }
}
@media screen and (max-width: 1000px) { .front { width: 170px; height: 100px; background: #d13c0b; } .front::before { opacity: 0; }
}
@media screen and (max-width: 900px) { .front { width: 150px; }
}
@media screen and (max-width: 800px) { .front { width: 120px; height: 90px; }
}
@media screen and (max-width: 700px) { .front { width: 100px; height: 70px; }
}
@media screen and (max-width: 600px) { .front { width: 60px; height: 40px; }
}
@media screen and (max-width: 500px) { .front { width: 50px; height: 30px; }
}
@media screen and (max-width: 400px) { .front { width: 30px; height: 20px; }
}
.window { background: #2E2F3D; height: 40px; width: 40px; display: inline-block; position: relative;
}
.window::before { content: ''; width: 40px; border-bottom: 5px solid #F6AE96; position: absolute; bottom: 17px; left: 0;
}
.window::after { content: ''; height: 40px; border-left: 5px solid #F6AE96; position: absolute; bottom: 0; left: 17px;
}
.window:nth-of-type(2) { margin: 0 15px; bottom: 50px; width: 30px; border-radius: 15px 15px 0 0;
}
.window:nth-of-type(2)::after { left: 12.5px;
}
@media screen and (max-width: 1100px) { .window:nth-of-type(2) { opacity: 0; }
}
.window:nth-of-type(odd) { top: 50px;
}
.window:nth-of-type(odd) .sill { background: #2E2F3D; height: 5px; width: 47px; position: absolute; bottom: -8px; left: -3px;
}
@media screen and (max-width: 1100px) { .window:nth-of-type(odd) .sill { height: 4px; width: 42px; bottom: -8px; }
}
@media screen and (max-width: 1000px) { .window:nth-of-type(odd) .sill { width: 50px; }
}
@media screen and (max-width: 900px) { .window:nth-of-type(odd) .sill { background: none; }
}
@media screen and (max-width: 1100px) { .window { height: 35px; width: 35px; } .window::before { border-bottom: 5px solid #F6764C; bottom: 15px; } .window::after { border-left: 5px solid #F6764C; left: 15px; }
}
@media screen and (max-width: 1000px) { .window { height: 45px; width: 45px; right: 30px; } .window:nth-of-type(odd) { top: 20px; } .window:first-of-type { opacity: 0; } .window::before { border-bottom: 5px solid #d13c0b; bottom: 18px; width: 50px; } .window::after { border-left: 5px solid #d13c0b; left: 20px; bottom: 0px; height: 55px; }
}
@media screen and (max-width: 900px) { .window { height: 35px; width: 35px; } .window::before { bottom: 16px; border-bottom: 4px solid #d13c0b; } .window::after { left: 16px; border-left: 4px solid #d13c0b; }
}
@media screen and (max-width: 800px) { .window { height: 20px; width: 20px; } .window:nth-of-type(odd) { top: 5px; right: 20px; } .window::before { border: none; } .window::after { border: none; }
}
@media screen and (max-width: 700px) { .window { opacity: 0; }
}
.door { background: #F6764C; height: 60px; width: 40px; position: absolute; left: 80px; bottom: 0; box-shadow: inset -4px 4px 0 0 #d13c0b;
}
.door::before { content: ''; background: #2E2F3D; height: 5px; width: 5px; border-radius: 50%; position: absolute; left: 10px; bottom: 25px;
}
.door::after { content: ''; width: 47px; border-bottom: 5px solid #2E2F3D; position: absolute; bottom: 0; left: -4px;
}
@media screen and (max-width: 1100px) { .door { background: #2E2F3D; box-shadow: none; height: 65px; } .door::before { background: #d13c0b; bottom: 30px; left: 7px; }
}
@media screen and (max-width: 1000px) { .door { left: 20px; height: 55px; width: 35px; } .door::after { width: 44px; }
}
@media screen and (max-width: 900px) { .door::before { opacity: 0; } .door::after { opacity: 0; }
}
@media screen and (max-width: 800px) { .door { width: 25px; height: 40px; }
}
@media screen and (max-width: 700px) { .door { width: 30px; left: 35px; }
}
@media screen and (max-width: 600px) { .door { width: 20px; height: 30px; left: 21px; }
}
@media screen and (max-width: 500px) { .door { width: 15px; height: 20px; left: 18px; }
}
@media screen and (max-width: 400px) { .door { opacity: 0; }
}
.back { background: #F6764C; height: 133.33333px; width: 200px; z-index: -1; position: relative; bottom: 150px; left: 45px;
}
.back::before { content: ''; background: #d13c0b; height: 50px; width: 150px; position: absolute; left: 45px; top: -50px; -webkit-transform: skew(35deg); -moz-transform: skew(35deg); -ms-transform: skew(35deg); -o-transform: skew(35deg); transform: skew(35deg);
}
@media screen and (max-width: 1100px) { .back { height: 0px; width: 0px; border-bottom: 130px solid #d13c0b; border-left: 130px solid transparent; border-right: 130px solid transparent; background: none; left: 0; top: -260px; } .back::before { -webkit-transform: skew(0deg); -moz-transform: skew(0deg); -ms-transform: skew(0deg); -o-transform: skew(0deg); transform: skew(0deg); left: 0; top: 0; height: 0px; width: 0px; border-bottom: 140px solid #2E2F3D; border-left: 140px solid transparent; border-right: 140px solid transparent; background: none; top: 20px; left: -140px; }
}
@media screen and (max-width: 1000px) { .back { height: 0px; width: 0px; border-bottom: 110px solid #d13c0b; border-left: 110px solid transparent; border-right: 110px solid transparent; top: -215px; } .back::before { opacity: 0; }
}
@media screen and (max-width: 900px) { .back { height: 0px; width: 0px; border-bottom: 90px solid #d13c0b; border-left: 90px solid transparent; border-right: 90px solid transparent; top: -195px; }
}
@media screen and (max-width: 800px) { .back { height: 0px; width: 0px; border-bottom: 75px solid #d13c0b; border-left: 75px solid transparent; border-right: 75px solid transparent; top: -170px; }
}
@media screen and (max-width: 700px) { .back { height: 0px; width: 0px; border-bottom: 65px solid #d13c0b; border-left: 65px solid transparent; border-right: 65px solid transparent; top: -135px; }
}
@media screen and (max-width: 600px) { .back { height: 0px; width: 0px; border-bottom: 40px solid #d13c0b; border-left: 40px solid transparent; border-right: 40px solid transparent; top: -80px; }
}
@media screen and (max-width: 500px) { .back { height: 0px; width: 0px; border-bottom: 26px solid #d13c0b; border-left: 26px solid transparent; border-right: 26px solid transparent; top: -56px; }
}
@media screen and (max-width: 400px) { .back { height: 0px; width: 0px; border-bottom: 16px solid #d13c0b; border-left: 16px solid transparent; border-right: 16px solid transparent; top: -36px; }
}
.chimney { background: #F6764C; height: 60px; width: 30px; position: absolute; top: -55px; left: -10px;
}
.chimney::before { content: ''; position: absolute; border-top: 10px solid #F6764C; top: -10px; left: -5px; width: 40px;
}
@media screen and (max-width: 1100px) { .chimney { top: 30px; left: -80px; background: #d13c0b; z-index: -1; } .chimney::before { border-top: 12px solid #d13c0b; top: -16px; left: -7px; width: 43px; }
}
@media screen and (max-width: 900px) { .chimney { left: -65px; width: 20px; } .chimney::before { border-top: 10px solid #d13c0b; top: -10px; width: 33px; }
}
@media screen and (max-width: 800px) { .chimney { height: 30px; left: -50px; top: 20px; } .chimney::before { opacity: 0; }
}
@media screen and (max-width: 600px) { .chimney { opacity: 0; }
}
| Developer | Nick Hehr |
| Username | HipsterBrown |
| Uploaded | August 15, 2022 |
| Rating | 4 |
| Size | 6,961 Kb |
| Views | 36,432 |
Do you need developer help for Responsive Icons in CSS?
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!
Nick Hehr (HipsterBrown) Script Codes
| Name | Size |
| A Sexy Button Hover | 4,752 Kb |
| The CodePen Quiz | 4,944 Kb |
| DogSight.js | 5,766 Kb |
| Welcome to Mavericks | 6,548 Kb |
| Triangular Pattern Background | 4,393 Kb |
| Animated React Home Feed | 7,040 Kb |
| CSS Icons | 3,516 Kb |
| SVG Heart Animations with React | 5,579 Kb |
| ATOM Icon in CSS and Animated | 6,216 Kb |
| Cubical Pattern Background | 4,467 Kb |
Create amazing web 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!
Similar Scripts & Codes
| Name | Username | Size |
| CSS eye follow | Pedrocampos | 2,592 Kb |
| 03 - CSS Variables | Run-time | 2,682 Kb |
| Caputre Cam with JS | KimmoCommit | 2,795 Kb |
| Animated Slide Hamburger Mobile Menu | BJack | 2,247 Kb |
| Clock Face Idea | Chrisburnell | 3,196 Kb |
| To Do List with Delete | Mattlbrody | 2,068 Kb |
| Realistic Buttons | Stoypenny | 2,248 Kb |
| Find The Penguin | Lelder | 2,212 Kb |
| Animated SVG stroke-dasharray | Netsi1964 | 3,179 Kb |
| Slider for stackoverflow | KKOKU | 3,222 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!