Stavo guardando la documentazione di jrnl quando mi sono chiesto “Ma quale sarà un modo pigro di fare un finto terminale in HTML e CSS?”.

Partiamo dal risultato. Dopo un mezzo pomeriggio di smanettaggio sono arrivato a questo:

fake Terminal

L’HTML è veramente semplice ed essenziale:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<html>
  <head>
    <link rel="stylesheet" href="shterminal.css" />
  </head>

  <body>

  <div class="shterm">
    <div id="winbuttons">
      <span>○</span>
      <span>○</span>
      <span>◉</span>
    </div>

    <div class="shcode">
      <pre class="caret"><code>echo "Hello World"</code></pre>
      <pre><code>Hello World</code></pre>
      <pre class="caret"><code>echo "tacocat spelled backwards is tacocat"</code></pre>
      <pre><code>tacocat spelled backwards is tacocat</code></pre>
    </div>
  </div>

  </body>
</html>

La parte divertente è nel CSS. Allo scopo di evitare di fare troppi div, per definire la decorazione della finestra ho usato lo pseudo elemento ::before. Prendo la definizione da una fonte autorevolissima, l’MDN:

In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default. (::before - MDN)

Uno pseudo elemento è una keyword che ci consente di definire lo stile di una specifica parte di un particolare elemento.

Ecco come ho definito lo stile della decorazione della finta finestra di terminale:

div.shterm::before {
  content: 'Terminal';
  font-size: 16px;
  text-align: center;
  display: block;
  border: 1px solid #ddd;
  border-bottom: 1px solid #222;
  box-shadow: 0px 5px 8px -7px #000;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  background: -moz-linear-gradient(bottom, #eee 0%, #bbb 100%);
  background: -webkit-linear-gradient(bottom, #eee 0%, #bbb 100%);
  background: linear-gradient(to bottom, #eee 0%, #bbb 100%);
}

Spesso si usa ::before in tandem con la direttiva content. Ad esempio qui simulo il prompt così:

div.shcode pre.caret::before {
  content: '[user@machine ~]$ ';
  font-weight:bold;
}

A questo link il gist completo.

A pigrizia non saprei, ma a semplicità direi che ci siamo, dai.