DEV Community

Cover image for CSS Icon: Microsoft
Jatin Sharma
Jatin Sharma

Posted on • Originally published at j471n.in

CSS Icon: Microsoft

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

Problem

logo

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>


Enter fullscreen mode Exit fullscreen mode

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;
}


Enter fullscreen mode Exit fullscreen mode

Now we style all the children by Universal Selector (*) and give them 50px height and width.



.wrapper > * {
  width: 50px;
  height: 50px;
}


Enter fullscreen mode Exit fullscreen mode

It's time to apply the colors to the individual children.



.red {
background: #f44336;
}
.green {
background: #4caf50;
}
.blue {
background: #2196f3;
}
.yellow {
background: #ffc107;
}

Enter fullscreen mode Exit fullscreen mode




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)

Collapse
 
ritamchakraborty profile image
Ritam Chakraborty

How about designing the Windows 10 Logo?

Collapse
 
j471n profile image
Jatin Sharma

That's great, just add colors ๐ŸŽจ It will look more realistic.

Collapse
 
ritamchakraborty profile image
Ritam Chakraborty

I was just trying to mimic the windows 10 logo. It has a single color so went on that direction

Collapse
 
gass profile image
Gass • Edited

Nice. I like your solution. The only thing though, I would liked it more if you explained this grid-template-columns: repeat(2, 1fr);

Collapse
 
j471n profile image
Jatin Sharma

I have used grid to layout the childrens. grid-template-columns: repeat(2, 1fr) property defines that there should be two columns with 1fr. Here fr represents a fraction of the available space in the grid container. And repeat refers to the repeated fraction (how many times you want to repeat the values). repeat() take two arguments

  • repeat count
  • tracks (value or width of children)

For more info you can visit the following links-

Collapse
 
gass profile image
Gass

Thanks! This is a very good explanation. I think it would be a good idea to add it to the article.