Ajax Loader
×

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.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Full CSS3 Terminal window

    CSSDeck G+