Google Mic Icon
How do I make an google mic icon?
Decided to try and reproduce the new google mic icon in css, for practice.The yellow still isn't perfect and there's a couple of mobile issues, but it's a pretty ok first attempt :). What is a google mic icon? How do you make a google mic icon? This script and codes were developed by Robert Lowe on 23 July 2022, Saturday.
Google Mic Icon - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Google Mic Icon</title> <link href='https://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h2> <span class="blue">G</span><span class="red">o</span><span class="yellow">o</span><span class="blue">g</span><span class="green">l</span><span class="red">e</span><span> </span><span class="blue">M</span><span class="red">i</span><span class="yellow">c</span><span> </span><span class="green">I</span><span class="blue">c</span><span class="red">o</span><span class="yellow">n</span></h2>
<h3><span class="blue">i</span><span class="red">n</span><span> </span><span class="yellow">p</span><span class="green">u</span><span class="blue">r</span><span class="red">e</span><span> </span><span class="yellow">c</span><span class="green">s</span><span class="blue">s</span></h3>
<div class="display"> <div class="google-mic"> <div class="part"> <div class="blue"></div> </div> <div class="part"> <div class="red one"></div> <div class="red two"></div> <div class="yellow"></div> </div> <div class="part"> <div class="green"></div> </div> </div>
</div>
</body>
</html>
Google Mic Icon - Script Codes CSS Codes
* { box-sizing: border-box;
}
body { font-family: 'Droid Serif', serif; letter-spacing: 0.3em;
}
h2, h3 { text-align: center; color: #4285F4;
}
h2 .blue, h3 .blue { color: #4285F4;
}
h2 .red, h3 .red { color: #EA4335;
}
h2 .yellow, h3 .yellow { color: #FBBC05;
}
h2 .green, h3 .green { color: #34A853;
}
.display { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; height: 80vh;
}
.google-mic { position: relative; padding-top: 0.8em; font-size: 4em; width: 4em; height: 4em; border: 1px solid #ccc;
}
.google-mic .part { position: relative; display: flex; justify-content: center;
}
.google-mic .part .blue { background-color: #4285F4; width: 0.78em; height: 1.6em; border-top-left-radius: 50% 30%; border-top-right-radius: 50% 30%; border-bottom-left-radius: 50% 30%; border-bottom-right-radius: 50% 30%;
}
.google-mic .part .red { margin-top: -0.6em; width: 0.8em; height: 0.93023em; background-color: transparent; border: 0.2em solid #EA4335; border-right-color: transparent; border-left-color: transparent; border-top-color: transparent;
}
.google-mic .part .red.one { border-bottom-left-radius: 100% 100%; border-right-width: 0;
}
.google-mic .part .red.two { border-bottom-right-radius: 100% 100%; border-left-width: 0;
}
.google-mic .part .yellow { position: absolute; margin-top: -0.6em; width: 0.81633em; height: 0.93023em; background-color: transparent; border: 0.2em solid #FBBC05; border-right-color: transparent; border-left-color: transparent; border-top-color: transparent; border-bottom-left-radius: 100% 100%; border-right-width: 0; left: 1.17647em; -webkit-clip-path: polygon(0 1%, 100% 0%, 15% 100%, 0% 100%); clip-path: polygon(0 1%, 100% 0%, 15% 100%, 0% 100%);
}
.google-mic .part .green { position: absolute; background-color: #34A853; width: 0.2em; height: 0.36em; z-index: -10; top: -0.04em; left: 1.9em;
}
Developer | Robert Lowe |
Username | rlo206 |
Uploaded | July 23, 2022 |
Rating | 3 |
Size | 3,388 Kb |
Views | 68,816 |
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!
Name | Size |
Whirlpool Spinner with 4 sizes | 3,473 Kb |
Dynamic UI with AngularJS attributes | 5,934 Kb |
Google Mic Icon | 3,388 Kb |
Semantic Element Document Outline | 3,153 Kb |
Draggables in pure angular | 5,167 Kb |
Fly-Through-Loader | 2,936 Kb |
Testing Semantic UI Grid | 2,832 Kb |
Customizable ripples with angular | 4,825 Kb |
Learning to style range inputs | 4,175 Kb |
Exploring ngForm | 7,554 Kb |
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!
Name | Username | Size |
Beautiful canvas stars | Matths | 2,399 Kb |
Using Flickr API | MoyArt | 6,761 Kb |
Next Word Predictor | Rfalor | 2,776 Kb |
C.Rowe Button | Brownerd | 2,473 Kb |
Cant get enough icecream in pure css3 | Melawire | 4,322 Kb |
Spilled Paint | Darrylhuffman | 3,894 Kb |
Flat design iframe | Damienpm | 1,819 Kb |
Old calculator | Gnarfugh | 2,815 Kb |
Twinkling Stars | Ripley6811 | 2,750 Kb |
Tile Animation Thing | Frxnz | 4,332 Kb |
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!