Some Ugly Icons

Developer

Size

3,930 Kb

Views

28,336

Some Ugly Icons Previews
Some Ugly Icons HTML Codes
Some Ugly Icons CSS Codes

How do I make an some ugly icons?

These icons are built with PURE background gradients, ONE element each, ZERO pseudo elements! Inspired by simple flat/retro/ios7 icons all over Dribbble. I wanna see you guys build some more/better ones, they're easy and super fun!. What is a some ugly icons? How do you make a some ugly icons? This script and codes were developed by Billy Crist on 04 October 2022, Tuesday.

Some Ugly Icons Previews

Some Ugly Icons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Some Ugly Icons</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <i class='clock'></i>
<i class='camera'></i>
<i class='map'></i>
<i class='notepad'></i>
<i class='weather'></i>
<i class='email'></i>
<i class='music'></i>
<i class='chat'></i>
</body>
</html>

Some Ugly Icons - Script Codes CSS Codes

/* Clear color: */
body { padding: 0.5em; background: #aac;
}
i { font-size: 1rem; display: inline-block; position: relative; width: 15em; height: 15em; margin: 0.5em; cursor: pointer; border-radius: 3em;
}
.clock { background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.03) 50%, rgba(0, 0, 0, 0.04) 50%), radial-gradient(#111122 1%, #ccccdd 1%, #ccccdd 4%, rgba(255, 255, 255, 0) 4.3%), linear-gradient(270deg, rgba(255, 255, 255, 0) 47.5%, #000000 48%, #000000 52%, rgba(255, 255, 255, 0) 52.5%) 50% 65%, linear-gradient(rgba(255, 255, 255, 0) 47.5%, #000000 48%, #000000 52%, rgba(255, 255, 255, 0) 52.5%) 30% 50%, linear-gradient(45deg, rgba(255, 255, 255, 0) 49%, #bb5555 49%, #bb5555 51%, rgba(255, 255, 255, 0) 51%) 25% 33.5%, linear-gradient(180deg, rgba(255, 255, 255, 0) 13%, #111122 13%, #111122 21%, rgba(255, 255, 255, 0) 21%, rgba(255, 255, 255, 0) 79%, #111122 79%, #111122 87%, rgba(255, 255, 255, 0) 87%) 50% 50%, linear-gradient(90deg, rgba(255, 255, 255, 0) 13%, #111122 13%, #111122 21%, rgba(255, 255, 255, 0) 21%, rgba(255, 255, 255, 0) 79%, #111122 79%, #111122 87%, rgba(255, 255, 255, 0) 87%) 50% 50%, radial-gradient(#ddddee 55.5%, #eeeeee 56%, #eeeeee 57.5%, #ccccdd 58%, #ccccdd 60%, rgba(255, 255, 255, 0) 60.5%), #224; background-repeat: no-repeat; background-size: 100%,100%,50% 23%,28% 50%,50% 25%,4% 100%,100% 4%,100%,100%,100%,100%,100%;
}
.camera { background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.03) 50%, rgba(0, 0, 0, 0.04) 50%), linear-gradient(#eeeeff, #eeeeff) 85% 14%, radial-gradient(rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0) 12%) 40% 40%, radial-gradient(rgba(255, 255, 255, 0.4) 25%, rgba(255, 255, 255, 0) 27%) 44% 44%, radial-gradient(#111122 12%, #444455 12.5%, #444455 23.5%, #222233 24%, #222233 30.5%, #ccccdd 31%, #ccccdd 35%, rgba(255, 255, 255, 0) 35.5%), linear-gradient(#225566 40%, #ddddee 40%, #ddddee 42.5%, #338888 42.5%); background-repeat: no-repeat; background-size: 100%,15% 7.5%,25% 25%,25% 25%,100%,100%;
}
.map { background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.03) 50%, rgba(0, 0, 0, 0.04) 50%), radial-gradient(#eeeeff 30%, rgba(255, 255, 255, 0) 31%) 52% 23%, linear-gradient(65deg, rgba(255, 255, 255, 0) 51%, #4488ff 50%) 45% 42%, linear-gradient(115deg, #4488ff 50%, rgba(255, 255, 255, 0) 51%) 58% 42%, radial-gradient(#4488ff 65%, rgba(255, 255, 255, 0) 67%) 52% 23%, linear-gradient(90deg, rgba(255, 255, 255, 0) 57.5%, #dddddd 58%, #dddddd 68%, rgba(255, 255, 255, 0) 68.5%), linear-gradient(rgba(255, 255, 255, 0) 59.5%, #dddddd 60%, #dddddd 70%, #669955 70.5%), #954; background-repeat: no-repeat; background-size: 100%,25% 25%,12% 25%,12% 25%,25% 25%,100%,100%,100%;
}
.notepad { background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.03) 50%, rgba(0, 0, 0, 0.04) 50%), linear-gradient(#eedd44 22%, rgba(255, 255, 255, 0) 23%), radial-gradient(#333333 15%, rgba(255, 255, 255, 0) 16%) repeat-y, linear-gradient(#ccccff 3%, #eeeecc 4%) repeat 50% 0%; background-size: 100%,100%,20% 20%,100% 20%;
}
.weather { background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.03) 50%, rgba(0, 0, 0, 0.04) 50%), radial-gradient(#eeeeff 40%, rgba(255, 255, 255, 0) 40.5%) 75% 45%, radial-gradient(#eeeeff 35%, rgba(255, 255, 255, 0) 35.5%) 32% 52%, radial-gradient(#eeeeff 30%, rgba(255, 255, 255, 0) 30.5%) 0% 70%, radial-gradient(#eeeeff 30%, rgba(255, 255, 255, 0) 30.5%) 100% 70%, linear-gradient(#eeeeff 30%, rgba(255, 255, 255, 0) 30.5%) 50% 112%, radial-gradient(#ffdd00 40%, rgba(255, 255, 255, 0) 40.5%) 5% 25%, #4ac; background-repeat: no-repeat; background-size: 100%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,80% 80%,100%;
}
.email { background: linear-gradient(205deg, #eeeeee 50%, rgba(255, 255, 255, 0) 51%), linear-gradient(155deg, #eeeeee 50%, rgba(255, 255, 255, 0) 51%) 100% 0, linear-gradient(205deg, #d5d5d5 45%, rgba(255, 255, 255, 0) 45.5%), linear-gradient(155deg, #d5d5d5 45%, rgba(255, 255, 255, 0) 45.5%), #dfdfdf; background-repeat: no-repeat; background-size: 50% 77%,50% 77%,100%,100%;
}
.music { background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.03) 50%, rgba(0, 0, 0, 0.04) 50%), linear-gradient(160deg, rgba(255, 255, 255, 0) 44.5%, #ffffff 45%, #ffffff 55%, rgba(255, 255, 255, 0) 55.5%) 50% -50%, linear-gradient(90deg, #ffffff 10%, rgba(255, 255, 255, 0) 10.5%) 60% 60%, radial-gradient(#ffffff 50%, rgba(255, 255, 255, 0) 52%) 22.5% 82%, linear-gradient(90deg, #ffffff 10%, rgba(255, 255, 255, 0) 10.5%) 130% 45%, radial-gradient(#ffffff 50%, rgba(255, 255, 255, 0) 52%) 66% 70%, #a3d; background-repeat: no-repeat; background-size: 100%,40% 80%,50% 40%,20% 15%,50% 40%,20% 15%;
}
.chat { background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.03) 50%, rgba(0, 0, 0, 0.04) 50%), linear-gradient(135deg, rgba(255, 255, 255, 0) 50%, #3377ee 50%) 13% 19%, radial-gradient(#3377ee 50%, rgba(255, 255, 255, 0) 51%) 10% 7.5%, linear-gradient(225deg, rgba(255, 255, 255, 0) 50%, #33cc33 50%) 87% 81%, radial-gradient(#33cc33 50%, rgba(255, 255, 255, 0) 51%) 90% 92.5%, #eef; background-repeat: no-repeat; background-size: 100%,30% 30%,75% 50%,30% 30%,75% 50%,100%;
}

Home Page	Home
Developer	Billy Crist
Username	billyysea
Uploaded	October 04, 2022
Rating	3
Size	3,930 Kb
Views	28,336

Do you need developer help for Some Ugly 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!

Billy Crist (billyysea) Script Codes

Name	Size
DMND	2,796 Kb
Re-invented CSS Drop-down Menu	2,757 Kb
Full Page Vertical Hover Sliders	2,418 Kb
Camera	2,136 Kb
CSS Slider	1,910 Kb
Location Pin Point	3,102 Kb
A Little Menu Bar	3,899 Kb
Interactive Business Card - OG	3,334 Kb
A Sphere	2,244 Kb
A Music Player	6,174 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
The Walking Raymarcher	Xorxor_hu	7,934 Kb
Sony Xperia Z3 Flat MockUp	Dapinitial	4,379 Kb
CSS Google Now	Jackmoran	3,196 Kb
Canvas Background Effect	Sonick	3,513 Kb
A Pen by panstable	Panstable	2,940 Kb
Lecture 1	Law	0 Kb
CSS3 iPad	Vikvarg	1,766 Kb
Draggables in pure angular	Rlo206	5,167 Kb
Resume	Rottingroom	5,483 Kb
Bezier Animation with straight paths	Rhernando	2,087 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!