I’m fascinated with the current trend of flat design. Not only are companies using flat web design when they update their websites, they are also creating flat icons for their company logos. These icons are simple, flawless, and sharp.
At any rate, my favorite code editor is Brackets, and they also use flat design for their website, their company logo, and the code editor itself. I became curious about recreating their company logo with just CSS.
Unsurprisingly, it is possible to recreate this icon with just CSS. After a little research and a lot of tinkering, I think I’ve come up with a suitable solution.
margin: 0 0 0 -5px;
border: 16px solid #FFF;
box-shadow: inset 0px 0px 0 25px #343433;
Once you break it down, it’s not all that complicated. The blue section around the outside is a border, the white inside is the background color of the div, and the dark grey brackets are an inset box shadow. The box shadow has a vertical white line positioned over the top of it to break up the box shadow and make it look like brackets. That’s essentially it.
I initially saw this demo on CSSDeck, which I modified to reflect the new flat design.
I’m always fascinated at how creative some designers are, and how well they have a handle on CSS. Even after coming up with this demo, I still know that I’m a long ways away from being a CSS master. Thanks for reading!