I found a really nice code editor design on Dribbble created by Roy Barber. I decided to try and re-create the design with pure CSS. I thought it will be a good exercise for me to start getting creative with CSS3 useful properties like pseudo-elements, pseudo-classes, nth-child selectors, transitions, etc.
I like it better on a full-page rather than the embedded one! So check out the pure CSS code editor in all its glory on CodePen!
The HTML is not too complicated as the whole magic lies in the CSS. In order to create the code editor’s top bar with the colored Mac buttons, you just need to use pseudo-elements, the :before & :after. The main styling of the code editor (background-color) is under the
.code-editor class while the top bar can be styled using the
The red, yellow, and green Mac button is also created using pseudo-elements and it uses the nth-child pseudo-class in order to style it individually; this is better than creating a new class for each of the button. The buttons are grouped under a span class called
.control. The class
span.control:before is needed in order to positioned the group together at the top bar.
span.control:nth-child(n):before is needed in order to set the BG color and also set a distance between each other.
Keep in mind that when you use pseudo-elements, the
content attribute is required. Therefore, either put an empty string or put some text in it.
As for the nice curve around the edges, you know the answer:
border-radius makes this as easy as pie!
I am aware of these CSS3 properties before but I have never use it in order to create shapes or draw something with it. I will certainly try it often now given how easy it is. You just need a little bit of imagination to get going!