Nice flat icon

Developer
Jaflo
Size
2,956 Kb
Views
36,432
  1. Nice flat icon Previews
  2. Nice flat icon HTML Codes
  3. Nice flat icon CSS Codes

How do I make an nice flat icon?

Inspired by Dribbble (http://dribbble.com/shots/1106177-Something-less-flat): A nice flat Photoshop icon. What is a nice flat icon? How do you make a nice flat icon? This script and codes were developed by Jaflo on 12 September 2022, Monday.

Nice flat icon Previews
IQ Test

Nice flat icon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Nice flat icon</title> <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! */ body { background: #34495E; color: white; font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; text-align: center;
}
a { color: white;
}
#icon { background: #389adc;
background: -moz-linear-gradient(top, #389adc 0%, #41a0de 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#389adc), color-stop(100%,#41a0de));
background: -webkit-linear-gradient(top, #389adc 0%,#41a0de 100%);
background: -o-linear-gradient(top, #389adc 0%,#41a0de 100%);
background: -ms-linear-gradient(top, #389adc 0%,#41a0de 100%);
background: linear-gradient(to bottom, #389adc 0%,#41a0de 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#389adc', endColorstr='#41a0de',GradientType=0 ); width: 100px; height: 100px; color: #B7E2FF; font-size: 40px; line-height: 100px; text-align: center; /* Again: */ font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; font-weight: bold; border-radius: 2px; margin: 50px auto; letter-spacing: .05em; box-shadow: inset 0 1px 2px rgba(255,255,255,0.3), 0 0 20px rgba(0,0,0,0.5); /* Is there a better way to do this than to hand-code it? */ text-shadow: 1px 1px 0 rgba(36,117,203,1), 3px 3px 0 rgba(36,117,203,0.9), 5px 5px 0 rgba(36,117,203,0.8), 7px 7px 0 rgba(36,117,203,0.7), 9px 9px 0 rgba(36,117,203,0.6), 11px 11px 0 rgba(36,117,203,0.5), 13px 13px 0 rgba(36,117,203,0.4), 15px 15px 0 rgba(36,117,203,0.3), 17px 17px 0 rgba(36,117,203,0.2), 19px 19px 0 rgba(36,117,203,0.1), 21px 21px 0 rgba(36,117,203,0.08), 23px 23px 0 rgba(36,117,203,0.06), 25px 25px 0 rgba(36,117,203,0.04), 27px 27px 0 rgba(36,117,203,0.02), 29px 29px 0 rgba(36,117,203,0.0);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="icon">PS</div>
Inspired by <a href="http://dribbble.com/shots/1106177-Something-less-flat">Dribbble</a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Nice flat icon - Script Codes CSS Codes

body { background: #34495E; color: white; font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; text-align: center;
}
a { color: white;
}
#icon { background: #389adc;
background: -moz-linear-gradient(top, #389adc 0%, #41a0de 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#389adc), color-stop(100%,#41a0de));
background: -webkit-linear-gradient(top, #389adc 0%,#41a0de 100%);
background: -o-linear-gradient(top, #389adc 0%,#41a0de 100%);
background: -ms-linear-gradient(top, #389adc 0%,#41a0de 100%);
background: linear-gradient(to bottom, #389adc 0%,#41a0de 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#389adc', endColorstr='#41a0de',GradientType=0 ); width: 100px; height: 100px; color: #B7E2FF; font-size: 40px; line-height: 100px; text-align: center; /* Again: */ font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; font-weight: bold; border-radius: 2px; margin: 50px auto; letter-spacing: .05em; box-shadow: inset 0 1px 2px rgba(255,255,255,0.3), 0 0 20px rgba(0,0,0,0.5); /* Is there a better way to do this than to hand-code it? */ text-shadow: 1px 1px 0 rgba(36,117,203,1), 3px 3px 0 rgba(36,117,203,0.9), 5px 5px 0 rgba(36,117,203,0.8), 7px 7px 0 rgba(36,117,203,0.7), 9px 9px 0 rgba(36,117,203,0.6), 11px 11px 0 rgba(36,117,203,0.5), 13px 13px 0 rgba(36,117,203,0.4), 15px 15px 0 rgba(36,117,203,0.3), 17px 17px 0 rgba(36,117,203,0.2), 19px 19px 0 rgba(36,117,203,0.1), 21px 21px 0 rgba(36,117,203,0.08), 23px 23px 0 rgba(36,117,203,0.06), 25px 25px 0 rgba(36,117,203,0.04), 27px 27px 0 rgba(36,117,203,0.02), 29px 29px 0 rgba(36,117,203,0.0);
}
Nice flat icon - Script Codes
Nice flat icon - Script Codes
Home Page Home
Developer Jaflo
Username jaflo
Uploaded September 12, 2022
Rating 4
Size 2,956 Kb
Views 36,432
Do you need developer help for Nice flat 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!

Jaflo (jaflo) Script Codes
Name
Pokemon-like dialogue box
Share button for images
Little loader
Wobble menu change animation
A note
Cloud upload
Shopping cart
A Pen by jaflo
Resizable mail icon
File save gif in CSS
Create amazing captions 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!