Cool flat-yet-3d - ALL CSS

Developer
Brett Clanton
Size
2,697 Kb
Views
32,384
  1. Cool flat-yet-3d - ALL CSS Previews
  2. Cool flat-yet-3d - ALL CSS HTML Codes
  3. Cool flat-yet-3d - ALL CSS CSS Codes

How do I make an cool flat-yet-3d - all css?

I've been browsing dribbble for cool designs to keep my chops up, this one was quite challenging. It's not perfect, but damn close... What is a cool flat-yet-3d - all css? How do you make a cool flat-yet-3d - all css? This script and codes were developed by Brett Clanton on 15 August 2022, Monday.

Cool flat-yet-3d - ALL CSS Previews
IQ Test

Cool flat-yet-3d - ALL CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cool flat-yet-3d - ALL CSS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="logo-area"> <div class="icon-container"> <div class="shadow"></div> <div class="icon"> <div class="inner-shadow"></div> <div class="cover one"></div> <div class="cover two"></div> <div class="seven"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom-ghost"></div> </div> <div class="sparkle one"></div> <div class="sparkle two"></div> </div> </div> <div class="inspired">Inspired by <a href="http://dribbble.com/shots/1109451-ICT7-mockup" target="_blank">Dribbble</a></div>
</div>
</body>
</html>

Cool flat-yet-3d - ALL CSS - Script Codes CSS Codes

 .logo-area { background: rgb(33,27,26); /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, rgba(33,27,26,1) 0%, rgba(12,12,12,1) 80%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 80%, color-stop(0%,rgba(33,27,26,1)), color-stop(80%,rgba(12,12,12,1))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(33,27,26,1) 0%,rgba(12,12,12,1) 80%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(33,27,26,1) 0%,rgba(12,12,12,1) 80%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(33,27,26,1) 0%,rgba(12,12,12,1) 80%); /* IE10+ */ background: radial-gradient(ellipse at center, rgba(33,27,26,1) 0%,rgba(12,12,12,1) 80%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#211b1a', endColorstr='#201e1e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ position: fixed; top: 0; left: 0; right: 0; bottom: 0; } .icon-container { position: absolute; top: 50%; left: 50%; height: 0; width: 0; } .icon { position: absolute; top: -97px; left: -97px; width: 194px; height: 194px; border-radius: 10px; background: #96483f; overflow: hidden; -webkit-box-shadow: inset #b2625a -1px 1px 1px, rgba(0,0,0,0.2) 1px 1px 2px; -moz-box-shadow: inset #b2625a -1px 1px 1px, rgba(0,0,0,0.2) 1px 1px 2px; -ms-box-shadow: inset #b2625a -1px 1px 1px, rgba(0,0,0,0.2) 1px 1px 2px; -o-box-shadow: inset #b2625a -1px 1px 1px, rgba(0,0,0,0.2) 1px 1px 2px; box-shadow: inset #b2625a -1px 1px 1px, rgba(0,0,0,0.2) 1px 1px 2px; } .shadow { position: absolute; top: -294px; left: -839px; width: 266px; height: 2000px; background: rgba(12,12,12,1); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .inner-shadow { position: absolute; top: 1px; left: -90px; width: 122.8px; height: 400px; background: rgba(12,12,12,0.6); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .cover.one { position: absolute; top: 81px; left: 116px; width: 40px; height: 100px; background: #96483f; -webkit-transform: rotate(25deg); -moz-transform: rotate(25deg); -ms-transform: rotate(25deg); -o-transform: rotate(25deg); transform: rotate(25deg); } .cover.two { position: absolute; top: 6px; left: 46px; width: 100px; height: 30px; background: #96483f; } .seven { position: relative; margin: 36px auto; width: 96px; height: 124px; overflow: hidden; } .seven .top { position: absolute; top: 0; left: 0; right: 0; height: 26px; background: #b5b4b3; -webkit-box-shadow: inset rgba(0,0,0,0.4) 10px -2px 2px -8px, inset rgba(255,255,255,0.9) -2px 2px 2px; -moz-box-shadow: inset rgba(0,0,0,0.4) 10px -2px 2px -8px, inset rgba(255,255,255,0.9) -2px 2px 2px; -ms-box-shadow: inset rgba(0,0,0,0.4) 10px -2px 2px -8px, inset rgba(255,255,255,0.9) -2px 2px 2px; -o-box-shadow: inset rgba(0,0,0,0.4) 10px -2px 2px -8px, inset rgba(255,255,255,0.9) -2px 2px 2px; box-shadow: inset rgba(0,0,0,0.4) 10px -2px 2px -8px, inset rgba(255,255,255,0.9) -2px 2px 2px; } .seven .left { position: absolute; top: 0; left: 0; width: 32px; height: 37px; background: #b5b4b3; -webkit-box-shadow: inset rgba(0,0,0,0.4) 2px -2px 2px, inset rgba(255,255,255,0.9) -2px 2px 2px; -moz-box-shadow: inset rgba(0,0,0,0.4) 2px -2px 2px, inset rgba(255,255,255,0.9) -2px 2px 2px; -ms-box-shadow: inset rgba(0,0,0,0.4) 2px -2px 2px, inset rgba(255,255,255,0.9) -2px 2px 2px; -o-box-shadow: inset rgba(0,0,0,0.4) 2px -2px 2px, inset rgba(255,255,255,0.9) -2px 2px 2px; box-shadow: inset rgba(0,0,0,0.4) 2px -2px 2px, inset rgba(255,255,255,0.9) -2px 2px 2px; } .seven .right { position: absolute; top: 0px; left: 24px; width: 37px; height: 194px; background: #b5b4b3; -webkit-box-shadow: inset rgba(0,0,0,0.4) 2px 2px 2px, inset rgba(255,255,255,0.6) -2px 0px 2px, #DDD 1px 0 1px; -moz-box-shadow: inset rgba(0,0,0,0.4) 2px 2px 2px, inset rgba(255,255,255,0.6) -2px 0px 2px, #DDD 1px 0 1px; -ms-box-shadow: inset rgba(0,0,0,0.4) 2px 2px 2px, inset rgba(255,255,255,0.6) -2px 0px 2px, #DDD 1px 0 1px; -o-box-shadow: inset rgba(0,0,0,0.4) 2px 2px 2px, inset rgba(255,255,255,0.6) -2px 0px 2px, #DDD 1px 0 1px; box-shadow: inset rgba(0,0,0,0.4) 2px 2px 2px, inset rgba(255,255,255,0.6) -2px 0px 2px, #DDD 1px 0 1px; -webkit-transform: rotate(25deg); -moz-transform: rotate(25deg); -ms-transform: rotate(25deg); -o-transform: rotate(25deg); transform: rotate(25deg); } .seven .bottom-ghost { position: absolute; top: 104px; left: 10px; width: 40px; height: 20px; -webkit-box-shadow: inset rgba(0,0,0,0.4) 0px -4px 2px -3px; -moz-box-shadow: inset rgba(0,0,0,0.4) 0px -4px 2px -3px; -ms-box-shadow: inset rgba(0,0,0,0.4) 0px -4px 2px -3px; -o-box-shadow: inset rgba(0,0,0,0.4) 0px -4px 2px -3px; box-shadow: inset rgba(0,0,0,0.4) 0px -4px 2px -3px; } .sparkle.one { position: absolute; top: 0; width: 92px; height: 1px; -webkit-box-shadow: #FFF 56px 40px 30px 6px; -moz-box-shadow: #FFF 56px 40px 30px 6px; -ms-box-shadow: #FFF 56px 40px 30px 6px; -o-box-shadow: #FFF 56px 40px 30px 6px; box-shadow: #FFF 56px 40px 30px 6px; } .sparkle.two { position: absolute; top: 0; width: 1px; height: 23px; -webkit-box-shadow: #FFF 144px 40px 30px 6px; -moz-box-shadow: #FFF 144px 40px 30px 6px; -ms-box-shadow: #FFF 144px 40px 30px 6px; -o-box-shadow: #FFF 144px 40px 30px 6px; box-shadow: #FFF 144px 40px 30px 6px; } .inspired { position: absolute; left: 0; right: 0; bottom: 0; line-height: 30px; font-family: sans-serif; text-align: center; color: #666; } .inspired a { color: #666; }
Cool flat-yet-3d - ALL CSS - Script Codes
Cool flat-yet-3d - ALL CSS - Script Codes
Home Page Home
Developer Brett Clanton
Username brettclanton001
Uploaded August 15, 2022
Rating 4.5
Size 2,697 Kb
Views 32,384
Do you need developer help for Cool flat-yet-3d - ALL 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!

Brett Clanton (brettclanton001) Script Codes
Name
Staging Embed Widget
Fun with columns
Space Sun Design - All CSS
How To Compile Ruby in CSS
Mincraft cube experiment ALL CSS
Percent Clock
Left Align
Mac Pro page
Hidden scrollbar in all browsers
Dribbble logo in CSS
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!