In this article, I will create a Microsoft icon by using CSS only. Let's look at how we do that.
Problem
Solution
First, we need to create the structure for this logo then we will style that structure.
HTML
<div class="wrapper">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="yellow"></div>
</div>
The above HTML code has a wrapper
container and it has four children red
, green
, blue
, and yellow
.
CSS
Now let's style them one by one. First, let's style the wrapper
container. I've created a two-column grid
and managed spacing by using gap
property.
.wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
Now we style all the children by Universal Selector (*) and give them 50px
height and width.
.wrapper > * {
width: 50px;
height: 50px;
}
It's time to apply the colors to the individual children.
.red {
background: #f44336;
}
.green {
background: #4caf50;
}
.blue {
background: #2196f3;
}
.yellow {
background: #ffc107;
}
Codepen
Now the result is as follows:
Wrapping up
This is going to be 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.
Top comments (6)
How about designing the Windows 10 Logo?
That's great, just add colors ๐จ It will look more realistic.
I was just trying to mimic the windows 10 logo. It has a single color so went on that direction
Nice. I like your solution. The only thing though, I would liked it more if you explained this
grid-template-columns: repeat(2, 1fr);
I have used grid to layout the childrens.
grid-template-columns: repeat(2, 1fr)
property defines that there should be two columns with1fr
. Herefr
represents a fraction of the available space in the grid container. Andrepeat
refers to the repeated fraction (how many times you want to repeat the values).repeat()
take two argumentsFor more info you can visit the following links-
Thanks! This is a very good explanation. I think it would be a good idea to add it to the article.