Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 18, 2022 04:09 pm GMT

CSS Icon: Android

In this article, I will create a Android icon by using CSS only. Let's look at how we do that.

Problem

problem

Solution

First, we need to create the structure for this logo then we will style that structure.

HTML

<div class="wrapper">  <div class="head"></div>  <div class="center-square"></div>  <div class="left-hand"></div>  <div class="right-hand"></div>  <div class="left-foot"></div>  <div class="right-foot"></div>  <div class="eye-left"></div>  <div class="eye-right"></div>  <div class="left-ear"></div>  <div class="right-ear"></div></div>

Here we have an outer container .wrapper and it contains multiple parts of the logo.

CSS

Let's first style the .wrapper and .center-square:

.wrapper {  --bg: #222;  --clr: #aac148;  position: relative;}.center-square {  width: 140px;  height: 115px;  border-radius: 5px;  transform: translatey(16px);  background: var(--clr);}

image.png

Now let's just style left-hand, right-hand, left-foot and right-foot:

.left-hand,.right-hand,.left-foot,.right-foot {  position: absolute;  height: 95px;  width: 30px;  background: var(--clr);  border-radius: 100px;}.left-hand {  top: 0;  left: 0;  transform: translate(-37px, 16px);}.right-hand {  top: 0;  right: 0;  transform: translate(37px, 16px);}.left-foot {  left: 28px;  margin-top: -25px;}.right-foot {  margin-top: -25px;  right: 28px;}

image.png

Now adding head and eyes:

.head {  position: absolute;  width: 100%;  height: 70px;  background: var(--clr);  transform: translatey(-60px);  border-radius: 100px 100px 5px 5px;}.eye-left,.eye-right {  position: absolute;  width: 10px;  height: 10px;  border-radius: 100px;  background: var(--bg);  top: 0;}.eye-left {  transform: translate(32px, -28px);}.eye-right {  right: 0;  transform: translate(-32px, -28px);}

image.png

Now the last thing we need to add is ears:

.left-ear,.right-ear {  position: absolute;  width: 6px;  height: 50px;  border-radius: 100px;  background: var(--clr);  top: 0;}.left-ear {  transform: translate(34px, -78px) rotate(-30deg);}.right-ear {  right: 0;  transform: translate(-34px, -78px) rotate(30deg);}

After all this, now our final product is ready.

Codepen

Wrapping up

If you have any queries, feel free to drop a comment below. This is a series of CSS Icons so make sure you follow for more such articles. If you like this then don't forget to it. And I'll see you in the next one.


Original Link: https://dev.to/j471n/css-icon-android-4am8

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To