Webdesign - Schräge Texteinblendung bei den Codezeilen

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Wie erstellt man die schräge Texteinblendung?

13Jun2018

Schräge Texteinblendung werden bei den Codeschnipsel benutzt


Bevor wir uns dieser Aufgabe stellen, möchte ich aber aufschreiben wie denn überhaupt Quellcode sinnvollerweise dargestellt werden kann.

Darstellung von Quellcode

Um den Quellcode bei Programmausdrucke richtig und übersichtlich darzustellen, sollte jeder Buchstabe oder jede Zahl die gleiche Breite beanspruchen. Dafür bietet der HTML (HyperText Markup Language)-Standard das "<pre>-Element" an. Dieses Element leitet einen Textabschnitt mit vorformatiertem Text ein. "Vorformatiert" bedeutet, dass der Text vom Browser exakt in der gleichen Weise dargestellt wird, wie er innerhalb des sich öffnenden und schließenden "<pre>-Elements" steht. Auch Leerzeichen, Tabulatoren, Zeilenumbrüche, Zeilen und Spalten werden korrekt wiedergegeben.

<pre class="code_html">
    <span lang="en">beautiful</span>
</pre>

Das "<code>-Element" zeichnet wiederum einen Text mit der Bedeutung "Quelltext" aus und ist dafür gedacht, Computercode innerhalb eines Textes dazustellen.
Das sieht im Text für die Übersetzung von <span lang="en">beautiful</span> so aus.

<code> <span lang="en">beautiful</span> </code>

Nun erklären wir wie das restliche Design (schräger Text, Schatten und Hintergrund) erstellt wird.

Zuerst werden wir die Box für die Codezeilen erstellen. Als Hintergrund nehmen wir dafür eine Papierstruktur mit einem 1 Pixel breiten, goldenen Rand, der an den Ecken noch mit einem kleinen Radius versehen ist. Außerdem wird noch ein nach innen fallender Schlagschatten notiert.

.code,
.code_css,
.code_html,
.code_java,
.code_htaccess {
    position: relative;
    padding: 4em 3em 2em;
    background: url(/bilder/code.jpg) repeat;
    border: 2px ridge;
    border-color: #000 #fff #fff #000;
    border-radius: 10px;
    box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, .5);
    color: #000;
    line-height: 1.3em;
    min-height: 3em;
    margin: 2em 0;
    overflow: auto;
}

Damit ist die Box für die Codezeilen fertig. Für die zusätzliche Texteinblendung machen wir uns nun das Pseudoelement ":after" zu Nutze. Mit diesem Pseudoelement wird ein beliebiger Inhalt, der mit content angegeben wird, über dem in HTML (HyperText Markup Language) geschriebenen Inhalt eingefügt.

Dieser zusätzliche Text, im folgenden Beispiel HTML (HyperText Markup Language), soll oben links im Rahmen der Code-Zeilen eingeblendet und um -45 Grad gedreht werden. Hierfür notieren wir zuerst in HTML (HyperText Markup Language):

<pre class="code_html">
    beliebiger Text
</pre>

Als Hintergrund haben wir einen blauen Farbverlauf ausgesucht und der Text bekommt noch einen Schlagschatten nach außen. Für diese Designeinstellung wird im CSS (Cascading Style Sheet) folgendes notiert:

.code_css:after,
.code_html:after,
.code_java:after,
.code_htaccess:after {
    position: absolute;
    top: 24px;
    left: -32px;
    width: 9em;
    height: 1.4em;
    color: #fff;
    font: bold .9em/1.3 serif;
    text-align: center;
    box-shadow: 0 2px 4px #444;
    transform: rotate(-45deg);
}

.code_css:after {
    content: 'CSS';
    background: linear-gradient(#6c6cff,#202050);
}

Als Hintergrund bei den Codezeilen für HTML (HyperText Markup Language), JavaScripts oder .htaccess (hypertext access - Hypertext-Zugriff) haben wir unterschiedliche Farbverläufe gewählt.

.code_html:after {
    content: 'HTML';
    background: linear-gradient(#1616e2,#000059);
}
.code_java:after {
    content: 'JavaScript';
    background: linear-gradient(#9a9aff,#44446e);
}
.code_htaccess:after {
    content: '.htaccess';
    background: linear-gradient(#a0a0dc,#4c4c69);
}

Fertig!

Zum Seitenanfang springen Λ