blog.roostech.secontentpostsPowerShell logo made with CSS3.md (July 27, 2015)

---
title: PowerShell logo made with CSS3
date: 2015-07-27 14:14:00 +0200 CEST
draft: false
author: John Roos
----

If you are following this blog you might have noticed some small changes here and there. I have been playing around with CSS in search of something that I like. While playing with CSS I started to wonder how hard it would be to create the PowerShell logo with only CSS, and it turned out it was not that hard. Unfortunately it requires some CSS3 components which not all browsers support, so depending on your browser the logo in the end of this post might or might not show properly. The picture below was the logo I was aiming for.

PowerShell logo as a regular image

The magic of CSS3

To make the logo I created five span tags. Two for the borders around the logo, two for the “>” symbol and one for the underscore. For that nice shine in the background I made a huge circular shape which is a bit transparent and is only visible within the mail span. I also added three more span tags to get the glow to look a bit better, but its not necessary.

CSS

.powershell-div {
    overflow: hidden;
    width: 325px;
    height:270px;
    padding-left: 25px;
    padding-bottom: 2px;
    border: 0px solid black;
    float:left;
}
     
.powershell-outer-border {
    position: absolute;
    content:'';
    width:300px;
    height:270px;
    background: rgb(200, 224, 244);
    border: 1px solid rgb(38, 116, 182);
    border-radius: 25px;
    -webkit-transform: skew(-11deg);
    -moz-transform: skew(-11deg);
    -o-transform: skew(-11deg);
}
 
.powershell-inner-border {
    overflow: hidden;
    position: absolute;
    content:'';
    width:294px;
    height:264px;
    background: rgb(100, 162, 216);
    border: 0px;
    border-radius: 25px;
    margin-left: 2px;
    margin-top: 2px;
}
 
.powershell-top-slash {
    position: absolute;
    content:'';
    width:160px;
    height:30px;
    background: white;
    border-radius: 20px;
    border-top:0px solid white;
    border-bottom:0px solid white;
    margin-top: 72px;
    margin-left: 40px;
    -moz-transform:rotate(43deg);
    -webkit-transform:rotate(43deg);
    -o-transform:rotate(43deg);
}
     
.powershell-bottom-slash {
    position: absolute;
    content:'';
    width:160px;
    height:30px;
    background: white;
    border-radius: 20px;
    border-top:0px solid white;
    border-bottom:0px solid white;
    margin-top: 160px;
    margin-left: 37px;
    -moz-transform:rotate(-40deg);
    -webkit-transform:rotate(-40deg);
    -o-transform:rotate(-40deg);
}
     
.powershell-underscore {
    position: absolute;
    content:'';
    width:100px;
    height:30px;
    height:30px;
    background: white;
    border-radius: 20px;
    border-top:0px solid white;
    border-bottom:0px solid white;
    margin-top: 210px;
    margin-left: 140px;
}
     
.white-glow {
    box-shadow:0px 0px 30px 10px rgba(255, 255, 255, 0.3);
}
     
.blue-glow {
    box-shadow:0px 0px 30px 15px rgba(100, 162, 216, 0.5);
}
 
.powershell-shade {
    position: absolute;
    content:'';
    width: 1500px;
    height: 1500px;
    margin-top: 95px;
    margin-left: -450px;
    background:rgba(38, 116, 182,0.7);
    -moz-border-radius: 1000px / 1000px;
    -webkit-border-radius: 1000px / 1000px;
    border-radius: 1000px / 1000px;
    box-shadow:0px 0px 100px 10px rgba(38, 116, 182, 0.7);
}

HTML

<div class="powershell-div">
<span class="powershell-outer-border">
        <span class="powershell-inner-border">
            <span class="powershell-shade"></span>
            <span class="powershell-top-slash blue-glow"></span>
            <span class="powershell-bottom-slash blue-glow"></span>
            <span class="powershell-underscore blue-glow"></span>
            <span class="powershell-top-slash white-glow "></span>
            <span class="powershell-bottom-slash white-glow "></span>
            <span class="powershell-underscore white-glow "></span>
        </span>
    </span>
</div>

Final result

There are still details that can be improved but its fairly close to the original. I have put them here side by side for comparison. (the first logo will only look good if you are using a browser with support for this)

Made with CSS3

Original image

The unfortunate thing is that this is not very useful at the moment. To be able to use this on a website all browsers need to have support for it, and that’s not currently the case. Chrome and Edge supports it, but not IE 11 for example. When more and more people go from IE to Edge we might not have this problem anymore. It’s only two more days until Windows 10 is released, so fingers crossed.

PowerShell logo made with CSS3