Truco CSS para que parezca el terminal de linux

Si queremos escribir algo en nuestra página con la apariencia del terminal de linux, y que sea fácil de copiar, os voy a dejar un truquito CSS para darle esa apariencia y que solo seleccionen lo importante. Por ejemplo el siguiente comando

service nginx restart

que sirve para reiniciar el servidor nginx, al seleccionarlo, solo lo hace el comando, sin el usuario, maquina y directorio. Pues para conseguir este efecto, lo hacemos con el siguiente codigo css

.terminal::before { 
    content: "maik@rocks:~$ ";
}
.terminal{
    font-family: Ubuntu Mono;
    background-color: #000000;
    color: #15C701;
    padding-top:3px;
    padding-bottom: 3px;
    padding-left: 5px;
    padding-right: 10px;
}

y aplicandoselo en la clase de lo que quieras que se muestre como en un terminal.

Deja tu comentario!

Login para comentar