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 @keyframes
& animation
.
I used :after
and :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.