Full CSS3 Terminal window
Here, I wanted to recreate the OSX terminal window so I decided to take a big part of this code from which I removed some elements, and implemented others. Firstly, you can see that, the last line of the terminal window shows the cursor form where the typing starts '
|', which is animated with
:before pseudo class on the lines so that each line begins with "User:~ You$" and ends with a period. I also used
:last-child selector to style the current line defferently. Take a look at the code just below to understand how it works. You can see a different version of this creation which JS to make the window draggable here.