CSS Shop Icon

Developer
Adrian Payne
Size
3,260 Kb
Views
38,456
  1. CSS Shop Icon Previews
  2. CSS Shop Icon HTML Codes
  3. CSS Shop Icon CSS Codes
  4. CSS Shop Icon JS Codes

How do I make an css shop icon?

CSS re-creation of the logo of thewebsiteshop.ie. Not affiliated.. What is a css shop icon? How do you make a css shop icon? This script and codes were developed by Adrian Payne on 18 August 2022, Thursday.

CSS Shop Icon Previews
IQ Test

CSS Shop Icon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Shop Icon</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.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! */ *,
*:before,
*:after { box-sizing: border-box;
}
.shop-icon { width: 400px; height: 320px; margin: 40px auto; text-align: center; position: relative; perspective: 500;
}
.shop-icon > div { position: absolute; left: 50%;
}
.top { width: 350px; height: 30px; background: #656363; border-radius: 15px; margin-left: -175px; z-index: 10;
}
.tarp { width: 360px; margin-left: -180px; position: absolute; top: -10px; z-index: 100; transform: rotateX(30deg); transform-origin: 50%; z-index: 5;
}
.stripe { width: 40px; height: 220px; position: relative; border-radius: 15px; float: left; background: #e46b53;
}
.tarp > .stripe:nth-child(2n) { background: white;
}
.shop { width: 328px; height: 320px; border-radius: 15px; margin-left: -164px; background: #656363;
}
.window { width: 140px; height: 166px; background: #eee; left: 31px; bottom: 38px; position: absolute; overflow: hidden;
}
.shine { width: 300px; height: 80px; bottom: -20px; left: -110px; background: white; position: absolute; transform: rotateZ(-45deg);
}
.door { width: 100px; height: 190px; background: #eee; right: 35px; bottom: 15px; position: absolute;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="shop-icon"> <div class="top"></div> <div class="tarp"> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> </div> <div class="shop"> <div class="window"> <div class="shine"></div> </div> <div class="door"></div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

CSS Shop Icon - Script Codes CSS Codes

*,
*:before,
*:after { box-sizing: border-box;
}
.shop-icon { width: 400px; height: 320px; margin: 40px auto; text-align: center; position: relative; perspective: 500;
}
.shop-icon > div { position: absolute; left: 50%;
}
.top { width: 350px; height: 30px; background: #656363; border-radius: 15px; margin-left: -175px; z-index: 10;
}
.tarp { width: 360px; margin-left: -180px; position: absolute; top: -10px; z-index: 100; transform: rotateX(30deg); transform-origin: 50%; z-index: 5;
}
.stripe { width: 40px; height: 220px; position: relative; border-radius: 15px; float: left; background: #e46b53;
}
.tarp > .stripe:nth-child(2n) { background: white;
}
.shop { width: 328px; height: 320px; border-radius: 15px; margin-left: -164px; background: #656363;
}
.window { width: 140px; height: 166px; background: #eee; left: 31px; bottom: 38px; position: absolute; overflow: hidden;
}
.shine { width: 300px; height: 80px; bottom: -20px; left: -110px; background: white; position: absolute; transform: rotateZ(-45deg);
}
.door { width: 100px; height: 190px; background: #eee; right: 35px; bottom: 15px; position: absolute;
}

CSS Shop Icon - Script Codes JS Codes

// CSS re-creation of the logo of http://thewebsiteshop.ie.
// Not affiliated, but nice idea to have a physical website shop
CSS Shop Icon - Script Codes
CSS Shop Icon - Script Codes
Home Page Home
Developer Adrian Payne
Username dazulu
Uploaded August 18, 2022
Rating 3.5
Size 3,260 Kb
Views 38,456
Do you need developer help for CSS Shop Icon?

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!

Adrian Payne (dazulu) Script Codes
Name
Round and round we go...
Animated fire extinguisher
CSS Flame Animation
CSS butterfly
Radio button label click select
CSS 3D Rotate
A Pen by Adrian Payne
Pure CSS RSS Icon
CSS Ribbons
Code Against Humanity
Create amazing art & images 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!