DEV Community

Cover image for Learn CSS: Create the Microsoft Logo (Version 2)
Jennifer Bland
Jennifer Bland

Posted on • Originally published at jenniferbland.com on

Learn CSS: Create the Microsoft Logo (Version 2)

One of the best ways to learn CSS is by creating something useful while you learn. I will show you how to use the following CSS items by creating the Microsoft logo:

  • box-shadow

In a previous article, I showed you how to create the Microsoft Logo using CSS Grid. In this article, I will show you how to create the same logo using the box-shadow property.

What we will be creating

We will create the Microsoft logo in pure CSS. It will look like this:

Microsoft Logo

Create our starter files

Let's start by creating two files called index.html and style.css. In your index.html file add the following starter code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Microsoft Logo v2</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

In the style.css file add the following starter code:

body{
  padding: 0;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: azure;
}
Enter fullscreen mode Exit fullscreen mode

box-shadow

The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.

We will take advantage of that by creating one square of the logo and then adding three shadows for the other squares.

Add the following one line inside the body tag in your index.html file:

<div class="microsoft-logo"></div>
Enter fullscreen mode Exit fullscreen mode

Add this code to your style.css file:

.microsoft-logo {
    background-color: #f25022;
    box-shadow: 
            220px 0 0 0 #7fba00,
            0 220px 0 0 #00a4ef,
            220px 220px 0 0 #ffb900;
    height: 200px;
    width: 200px;
}
Enter fullscreen mode Exit fullscreen mode

The first line in the box-shadow property creates a shadow 220px on the right side with a green color. Since our square is 200px wide and high, this starts the shadow 20px to the right of the initial box.

The 2nd line in the box-shadow property creates a shadow 220px below the initial box and sets the color to blue.

The 3rd line in the box-shadow property creates a shadow 220px to the right and 220px below the initial box and sets the color to orange.

Final Logo

If you view your index.html file in a browser you should see the completed Microsoft Logo:

completed microsoft logo

Let's Connect

Thanks for reading my article today. You can get the source code here.

If you like my content, please consider buying me a coffee ☕.

Top comments (1)

Collapse
 
ryan284057 profile image
AlyceRyan21

Creating the Microsoft Logo is a fantastic endeavor that showcases innovation and design prowess. The seamless fusion of elements highlights the brand's evolution. The use of glass shades for pendant lights in the logo's vibrant colors adds a captivating dimension, symbolizing clarity and forward-thinking. This artistic masterpiece not only represents a company but also embodies a vision, making it a true inspiration for aspiring designers and creators everywhere.