Crazy icons
How do I make an crazy icons?
Only css... a little inspired on Huffington Post Icons by Nathan Manire on dribbble but with my own style :). What is a crazy icons? How do you make a crazy icons? This script and codes were developed by Judith Neumann on 13 October 2022, Thursday.
Crazy icons Previews
Crazy icons - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Crazy icons</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul> <li><div class="i1"> <span class="cortinas"></span> </div></li> <li><div class="cartel"> <span class="cartel3"></span> </div></li> <li><div class="cocina"> <span class="tab"></span> <span class="uten"></span> <span class="door"></span> <span class="door3"></span> </div></li> <li><div class="hall"> <span class="braz"></span> <span class="lamp"></span> <span class="cuadros"></span> <span class="cuadros3"></span> </div></li> <li><div class="ofi"></div> <div class="ofi3"></div> <div class="compu"></div> <div class="lampi"> <span class="luz"></span> </div> </li> <li><div class="edi"> <span class="ventanas"></span> <span class="ventanas3"></span> <span class="ventanas5"></span> </div></li> <li><div class="sala"> <span class="florero"></span> <span class="flores"></span> <div class="flores3"></div> </div></li> <li><div class="tables"> <span class="bottle"></span> <span class="co"></span> <span class="co3"></span> </div></li> <li><div class="bath"> <span class="ducha"></span> <span class="toalla"></span> </div></li> <li><div class="estantes"> <span class="books"></span> <span class="books3"></span> <span class="taza"></span> </div></li>
</ul>
</body>
</html>
Crazy icons - Script Codes CSS Codes
*{ margin:0; padding:0;
}
body{ background:#212121;
}
ul { position:relative; width:800px; height:600px; list-style:none; margin:121px auto;
}
ul li{ display:inline-block; width:128px; height:128px; border-radius:100%; background:#003b75; margin:50px 12px
}
.i1{ position:absolute; width:55px; height:70px; border:5px solid #1ac2ff; margin:25px 33px;
}
.i1::before{ content:""; display:block; width:5px; height:70px; background:#1ac2ff; margin:0 25px
}
.i1::after{ content:""; display:block; width:55px; height:5px; background:#1ac2ff; margin:-37px 0px
}
.cortinas{ position:absolute; width:70px; height:5px; background:#ff5675; margin:-83px -7px;
}
.cortinas::before{ content:""; display:block; width:12px; height:95px; background:rgba(255, 255, 255, .3); margin: 0 0;
}
.cortinas::after{ content:""; display:block; width:12px; height:95px; background:rgba(255, 255, 255, .3);
margin:-95px 57px
}
.cartel{ position:absolute; width:75px; height:45px; border-top:5px solid #1ac2ff; border-right:5px solid #1ac2ff; border-bottom:5px solid #1ac2ff; border-radius:12px 21px 0 0; margin:30px 30px
}
.cartel::before{ content:""; display:block; width:30px; height:45px; border-radius:21px 21px 0 0; background:#003b75; margin:-5px -12px; border:5px solid #ff5675;
}
.cartel::after{ content:""; display:block; width:9px; height:30px; background:#1ac2ff; margin:5px 40px
}
.cocina{ position:absolute; width:102px; height:5px; background:#1ac2ff; margin:95px 12px;
}
.cartel3{ position:absolute; width:12px; height:12px; border-radius:100%; background:#ff5675; margin:-30px 40px
}
.cartel3::before{ content:""; display:block; Width:7px; height:30px; border-radius: 7px; border:3px solid #1ac2ff; margin:-35px 0
}
.cocina::before{ content:""; display:block; width:55px; height:35px; border-left:5px solid #1ac2ff; border-right:5px solid #1ac2ff; margin:-35px 0;
}
.cocina::after{ content:""; display:block; width:5px; height:35px; background:#1ac2ff; margin:0 29px
}
.tab{ position:absolute; width:65px; height:5px; background:#1ac2ff;
}
.tab::before{ content:""; display:block; width:5px; height:17px; background:#1ac2ff; margin:-60px 50px;
}
.tab::after{ content:""; display:block; width:17px; height:6px; border-radius:21px 21px 0 0; border:4px solid #1ac2ff; margin:60px 40px
}
.uten{ position:absolute; width:9px; height:5px; border-radius: 0 0 9px 9px; border:3px solid #ff5675; margin:-12px 7px
}
.uten::before{ content:""; display:block; width:12px; height:6px; border-radius: 0 0 9px 9px; border:3px solid #ff5675; margin:-4px 33px
}
.uten::after{ content:""; display:block; width:7px; height:12px; border:3px solid #ff5675; margin:-17px 16px
}
.door{ position:absolute; width:25px; height:60px; background:#ff5675; border:5px solid #1ac2ff; margin:-30px 70px
}
.door::before{ content:""; display:block; width:25px; height:5px; background:#ffceff; margin:21px 0;
}
.door3{ position:absolute; width: 0; height: 0; border-top: 21px solid rgba(255,255, 255, .3); border-left: 21px solid transparent; margin:-25px 80px
}
.door3::before{ content:""; display:block; width: 0; height: 0; border-bottom: 35px solid rgba(255,255, 255, .3); border-right: 21px solid transparent; margin:4px -26px
}
.hall { position:absolute; width:70px; height:30px; border-radius:12px 12px 0 0; border:5px solid #1ac2ff; margin:60px 27px
}
.hall::before{ content:""; display:block; width:70px; height:5px; background:#1ac2ff; margin:12px 0px;
}
.hall::after{ content:""; display:block; width:5px; height:17px; background:#1ac2ff; margin:-30px 32px;
}
.braz { position:absolute; width:5px; height:21px; border-radius:12px 12px 0 0; border:3px solid #1ac2ff; margin:-21px -12px;
}
.braz::before { content:""; display:block; width:5px; height:21px; border-radius:12px 12px 0 0; border:3px solid #1ac2ff; margin:-3px 80px;
}
.lamp{ position:absolute; width:3px; height:45px; background:#1ac2ff; margin:-39px -19px
}
.lamp::before{ content:""; display:block; border-bottom: 12px solid #1ac2ff; border-left: 7px solid transparent; border-right: 7px solid transparent; height: 0; width: 9px; margin:-7px -9px;
}
.lamp::after{ content:""; display:block; border-bottom: 9px solid #ff5675; border-left: 5px solid transparent; border-right: 5px solid transparent; height: 0; width: 9px; margin:-9px -7px;
}
.cuadros{ position:absolute; width:16px; height:12px; background:#ff5675; border:5px solid #1ac2ff; margin:-69px 0
}
.cuadros::before{ content:""; display:block; width:16px; height:12px; background:#ff5675; border:5px solid #1ac2ff; margin:0px 34px
}
.cuadros3{ position:absolute; width: 0; height: 0; border-bottom: 12px solid #ffceff; border-left: 16px solid transparent; margin:-63px 5px
}
.cuadros3::before{ content:""; display:block; width: 0; height: 0; border-bottom: 12px solid #ffceff;; border-right: 16px solid transparent; margin:5px 23px
}
.ofi{ position:absolute; width:85px; height:5px; background:#1ac2ff; margin:70px 21px
}
.ofi::before{ content:""; display:block; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 40px solid #1ac2ff; margin:0 12px
}
.ofi::after{ content:""; display:block; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 40px solid #1ac2ff; margin:-40px 50px
}
.ofi3{ position:absolute; width:80px; height:5px; background:#1ac2ff; margin:109px 24px
}
.ofi3::before{ content:""; display:block; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 35px solid #003b75; margin:-35px 14px
}
.ofi3::after{ content:""; display:block; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 35px solid #003b75; margin:-35px 52px
}
.compu{ position:absolute; width:30px; height:21px; border-radius:3px; background:#ff5675; border:3px solid #1ac2ff; margin:37px 65px;
}
.compu::before{ content:""; display:block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 7px solid #1ac2ff; margin:23px 9px;
}
.compu::after{ content:""; display:block; width: 0; height: 0; border-bottom: 21px solid #ffceff; border-left: 30px solid transparent; margin:-53px 0px;
}
.lampi{ position:absolute; width:12px; height:3px; background: #1ac2ff; margin:67px 30px;
}
.lampi::before{ content:""; display:block; width:17px; height:40px; border-bottom:3px solid #1ac2ff; border-left:3px solid #1ac2ff; margin:-40px 3px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
}
.lampi::after{ content:""; display:block; width:12px; height:7px; border-radius:21px 21px 0 0; border-top:3px solid #ff5675; border-left:3px solid #ff5675; border-right:3px solid #ff5675; border-bottom:3px solid #ffceff; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); margin:-50px 18px;
}
.luz{ position:absolute; border-bottom: 60px solid rgba(255,255,255,.3); border-left: 16px solid transparent; border-right: 16px solid transparent; height: 0; width: 12px; margin:-9px 33px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);
}
.edi{ position:absolute; width:45px; height:70px; border:5px solid #1ac2ff; margin:21px 35px
}
.edi::before{ content:""; display:block; width:80px; height:5px; background:#1ac2ff; margin:80px -17px
}
.ventanas{ position:absolute; width:12px; height:12px; background:#ff5675; margin:-159px 5px;
}
.ventanas::before{ content:""; display:block; width:12px; height:12px; background:#ff5675; margin:0px 23px;
}
.ventanas3{ position:absolute; width:12px; height:12px; background:#ff5675; margin:-142px 5px;
}
.ventanas3::before{ content:""; display:block; width:12px; height:12px; background:#ff5675; margin:0px 23px;
}
.ventanas5{ position:absolute; width:12px; height:12px; background:#ff5675; margin:-125px 5px;
}
.ventanas5::before{ content:""; display:block; width:12px; height:12px; background:#ff5675; margin:0px 23px;
}
.ventanas5::after{ content:""; display:block; width:21px; height:16px; background:#1ac2ff; margin:3px 7px;
}
.sala{ position:absolute; width:60px; height:33px; border-top:5px solid #1ac2ff; border-left:5px solid #1ac2ff; border-right:5px solid #1ac2ff; margin:65px 30px;
}
.sala::before{ content:""; display:block; width:60px; height:5px; background: #1ac2ff; margin:12px 0
}
.sala::after{ content:""; display:block; width:83px; height:5px; background: #1ac2ff; margin:-35px -12px
}
.florero{ position:absolute; width:21px; height:21px; border-radius:100%; background:#1ac2ff; margin:-55px 19px
}
.florero::before{ content:""; display:block; border-top: 12px solid #1ac2ff; border-left: 5px solid transparent; border-right: 5px solid transparent; height: 0; width: 12px; margin:-0px 0px;
}
.florero::after{ content:""; display:block; width:9px; height:9px; border-radius:100%; border-left: 3px solid rgba(255,255,255,.5); margin:-5px 3px;
}
.flores{ position:absolute; width:9px; height:9px; border-radius:100%; background:#ff5675; margin:-63px 16px;
}
.flores::before{ content:""; display:block; width:9px; height:9px; border-radius:100%; background:#ff5675; margin:-3px 9px;
}
.flores::after{ content:""; display:block; width:9px; height:9px; border-radius:100%; background:#ffceff; margin:-9px 3px;
}
.flores3{ position:absolute; width:9px; height:9px; border-radius:100%; background:#ff5675; margin:-63px 25px;
}
.flores3::before{ content:""; display:block; width:9px; height:9px; border-radius:100%; background:#ff5675; margin:0px 9px;
}
.flores3::after{ content:""; display:block; width:9px; height:9px; border-radius:100%; background:#ffceff; margin:-12px 5px;
}
.tables{ position:absolute; width:83px; height:5px; background:#1ac2ff; margin:70px 21px
}
.tables::before{ content:""; display:block; width:12px; height:12px; border:5px solid #1ac2ff; margin:3px 3px;
}
.tables::after{ content:""; display:block; width:12px; height:12px; border:5px solid #1ac2ff; margin:-25px 58px;
}
.bottle{ position:absolute; width:9px; height:21px; border-radius: 9px 9px 0 0; border:3px solid #1ac2ff; background:#ff5675; margin:-55px 35px;
}
.bottle::before{ content:""; display:block; width:5px; height:9px; background:#1ac2ff; margin:-12px 2px
}
.bottle::after{ content:""; display:block; width:3px; height:19px; background:rgba(255,255,255,.5); margin:17px 0px;
}
.co{ position:absolute; width:9px; height:5px; border-radius:0 0 9px 9px; background:#ff5675; border:2px solid #1ac2ff; margin:-43px 7px;
}
.co::before{ content:""; display:block; width:3px; height:5px; background:#1ac2ff; margin:7px 3px
}
.co::after{ content:""; display:block; width:9px; height:2px; background:#1ac2ff; margin:-9px 0;
}
.co3{ position:absolute; width:9px; height:5px; border-radius:0 0 9px 9px; background:#ff5675; border:2px solid #1ac2ff; margin:-43px 63px;
}
.co3::before{ content:""; display:block; width:3px; height:5px; background:#1ac2ff; margin:7px 3px
}
.co3::after{ content:""; display:block; width:9px; height:2px; background:#1ac2ff; margin:-9px 0;
}
.bath{ position:absolute; width:70px; height:27px; border-radius:0 0 21px 21px; border:5px solid #1ac2ff; margin:70px 25px
}
.bath::before{ content:""; display:block; width:7px; height:9px; border-radius:3px; background:#1ac2ff; margin:25px 3px
}
.bath::after{ content:""; display:block; width:7px; height:9px; background:#1ac2ff; border-radius:3px; margin:-34px 60px
}
.ducha{ position:absolute; width:5px; height:40px; background:#1ac2ff; margin:-102px -5px
}
.ducha::before{ content:""; display:block; width:17px; height:6px; border-radius:21px 21px 0 0; border-top:5px solid #1ac2ff; border-right:5px solid #1ac2ff; margin:0px 0px
}
.ducha::after{ content:""; display:block; border-bottom: 9px solid #ff5675; border-left: 5px solid transparent; border-right: 5px solid transparent; height: 0; width: 7px; margin:-5px 13px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);
}
.toalla{ position:absolute; width:5px; height:12px; border:3px solid #ff5675; margin: -64px 30px
}
.toalla::before{ content:""; display:block; border-top: 12px solid #ff5675; border-left: 3px solid transparent; border-right: 3px solid transparent; height: 0; width: 4px; margin:-21px 21px
}
.toalla::after{ content:""; display:block; width:2px; height:2px; border:1px solid #ff5675; margin:21px 24px
}
.estantes{ position:absolute; width:65px; height:65px; border:5px solid #1ac2ff; margin:25px 27px
}
.estantes::before{ content:""; display:block; width:3px; height:65px; background:#1ac2ff; margin:0 30px;
}
.estantes:after{ content:""; display:block; width:65px; height:3px; background:#1ac2ff; margin:-33px 0px;
}
.books{ position:absolute; width:5px; height:17px; border:3px solid #ff5675; margin:-57px 3px
}
.books::before{ content:""; display:block; width:5px; height:19px; border:3px solid #ff5675; margin:-5px 9px;
}
.books::after{ content:""; display:block; width:21px; height:9px; border:3px solid #ff5675; margin:-14px 29px;
}
.books3{ position:absolute; width:3px; height:23px; border:2px solid #1ac2ff; margin:-27px 3px;
}
.books3::before{ content:""; display:block; width:3px; height:23px; border:2px solid #ff5675; margin:-2px 7px;
}
.books3::after{ content:""; display:block; width:3px; height:23px; border:2px solid #1ac2ff; margin:-27px 16px;
}
.taza{ position:absolute; width:12px; height:7px; border-radius:0 0 12px 12px; border:3px solid #1ac2ff; margin:-14px 38px; }
.taza::before{ content:""; display:block; width:3px; height:3px; border-radius:100%; border:1px solid #ff5675; margin:0 14px
}
| Developer | Judith Neumann |
| Username | judag |
| Uploaded | October 13, 2022 |
| Rating | 4.5 |
| Size | 3,699 Kb |
| Views | 16,192 |
Do you need developer help for Crazy icons?
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!
Judith Neumann (judag) Script Codes
| Name | Size |
| Css flat day landscape | 4,610 Kb |
| Wait for a cofee... | 3,422 Kb |
| Colorfull night... | 2,818 Kb |
| Fireworks | 2,722 Kb |
| Parrot preloader... | 2,691 Kb |
| Css or Czz.. | 4,111 Kb |
| Antartic day | 3,901 Kb |
| Sad kitty | 2,643 Kb |
| Responsive flexbox letters... | 2,002 Kb |
| In the beach | 3,764 Kb |
Create amazing sales emails 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 |
| Sinclair Research Computers | MattCowley | 3,068 Kb |
| React Markdown Previewer | C0d0er | 3,190 Kb |
| A Pen by Ben Babics | Benbabics | 2,957 Kb |
| Nice responsive team page | Infomiho | 3,139 Kb |
| SVG email test v2.0 | M_J_Robbins | 2,090 Kb |
| Sidebar Thing | Jonambas | 2,779 Kb |
| Scifi-style Interative Form | Aaronchuo | 4,566 Kb |
| A Pen by John Malc | F789gh | 1,420 Kb |
| TimelineMax Circular loader | Nicolund | 2,649 Kb |
| Typefaces with descriptions | Megandoty | 2,944 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!