Posted on • Originally published atjenniferbland.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 thebox-shadow property.
What we will be creating
We will create the Microsoft logo in pure CSS. It will look like this:
Create our starter files
Let's start by creating two files calledindex.html andstyle.css. In yourindex.html file add the following starter code:
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Microsoft Logo v2</title><linkrel="stylesheet"href="style.css"></head><body></body></html>In thestyle.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;}box-shadow
Thebox-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 thebody tag in yourindex.html file:
<divclass="microsoft-logo"></div>Add this code to yourstyle.css file:
.microsoft-logo{background-color:#f25022;box-shadow:220px000#7fba00,0220px00#00a4ef,220px220px00#ffb900;height:200px;width:200px;}The first line in thebox-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 thebox-shadow property creates a shadow 220px below the initial box and sets the color to blue.
The 3rd line in thebox-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 yourindex.html file in a browser you should see the completed Microsoft Logo:
Let's Connect
Thanks for reading my article today. You can get thesource code here.
If you like my content, please considerbuying me a coffee ☕.
Top comments(1)
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 ofglass 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.
For further actions, you may consider blocking this person and/orreporting abuse
