See the Pen Pure CSS Code Editor by Ren Aysha (@rrenula) on CodePen

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 .code-editor:before.

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 can make this editable; however, I need to play with JavaScript Selection and Range in order to ensure that the syntax get highlighted as you type. This will take some time as it is a pain in the butt.

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!