@charak
terziffer

Manches braucht mehr als 140 Zeichen …

Auf dieser Website ist Platz für das, wofür mein Twitterprofil @charakterziffer nicht ausreicht. Mein Blog ist als Plus zu meinen Tweets gedacht, eben „@cz+“. // Die letzten drei Artikel:

Muster aus CSS-Farbverläufen

Vor fünf Monaten habe ich das Aussehen meines Blogs überarbeitet. Statt eines großflächigen Hintergrundbilds verwende ich seitdem einen grünen Randstreifen mit kristallinem Muster (nur sichtbar, wenn das Browserfenster breit genug ist). Ich brauche dafür keine Bilddatei mehr, sondern erzeuge das Muster durch Code. Es besteht aus mehreren, übereinander gelegten Farbverläufen.

Ein Farbverlauf in CSS

Mit der Auszeichnungssprache CSS kann man die HTML-Elemente einer Website gestalten. Für einen einfachen Verlauf mit drei Farben sorgt der folgende Code:

background-image: linear-gradient(90deg, #fff 5%, #e32 30%, #ccc 80%);

Erklärung: Ein ausgewähltes Element bekommt als Hintergrundbild (background-image) einen linearen Farbverlauf (linear-gradient). Dieser soll aber nicht standardmäßig von unten nach oben laufen, sondern von links nach rechts, also um 90° verdreht (90deg).

Für die ersten 5% unseres Verlaufs wählen wir die Farbe Weiß (mit verkürzter Hexadezimalschreibweise ist das #fff 5%). Das Weiß geht dann über in Rot (bei 30% des Verlaufs: #e32 30%). Ab da verblasst das Rot zu Hellgrau, was bei 80% des Farbverlaufs erreicht ist (#ccc 80%). Diese letzte Farbe behält der Verlauf bis 100%, also bis ganz nach rechts:

Beispiel 1: Farbverlauf von links nach rechts, von Weiß über Rot bis zu Grau.

Musterhafte Wiederholung

Seit 2012/2013 unterstützen moderne Browser auch CSS-Farbverläufe, die sich wiederholen. Der folgende Verlauf umfasst nur etwa ein Viertel der Bildbreite und geht von violett über rosa nach grün. Danach beginnt er wieder bei violett und wiederholt sich über die gesamte Fläche.

Beispiel 2: Ein Farbverlauf von violett über rosa nach grün, der sich danach dreimal wiederholt

Für das CSS benötigen wir nun einen repeating-linear-gradient, einen sich wiederholenden linearen Verlauf. Den Winkel habe ich mit 100deg leicht schräg gewählt. Der Code:

background-image: repeating-linear-gradient(100deg, #839, #fdb 10%, #3a1 25%);

Farbbeginn ist violett (#839, ohne Prozentangabe), bei 10% liegt ein gelbliches Rosa (#fdb 10%) und bis 25% ändert sich das zu grün (#3a1 25%). Die letzte Angabe legt auch fest, wie breit der Verlauf insgesamt ist, bevor er sich wiederholt.

In diesem Beispiel ist zwischen grün und violett eine harte Kante; man sieht, wo der Verlauf neu anfängt. Würde man bei der ersten und letzten Angabe dieselbe Farbe festlegen, bekäme man zwischen den Wiederholungen einen weichen Übergang.

Farbe in Schichten

Der Trick meines grünen Randstreifens besteht darin, Teile des Farbverlaufs transparent zu lassen, dafür aber mehrere Verläufe mit unterschiedlichen Winkeln übereinander zu legen. Hier ein Beispiel mit drei Verläufen:

Beispiel 3: Drei Farbverläufe mit unterschiedlichen Winkeln, teilweise transparent

Der oberste Verlauf geht von transparent nach #deb (hellgrün) und ist 30% breit. Darunter liegt ein Farbverlauf von transparent nach #e32 (rot) und zurück nach transparent – dadurch entsteht keine harte Kante zwischen Ende und Anfang des Verlaufs.

Ganz zuunterst und zu einem großen Teil verdeckt ist der Farbverlauf aus Beispiel 2, hier mit den Farben #fff (weiß) und #839 (violett). Der gesamte Code, ergänzt um Winkel und Prozentangaben sieht so aus:

background-image:
repeating-linear-gradient(160deg, transparent, #deb 30%),
repeating-linear-gradient(40deg, transparent, #e32 20%, transparent 23%),
repeating-linear-gradient(100deg, #fff, #839 25%);

Kombiniere!

Nun haben wir alle Zutaten für den Randstreifen zusammen. Es kommt nur noch auf die richtige Zusammenstellung und Farbgebung an. Man nehme den Verlauf aus Beispiel eins, aber mit den Farben Weiß, Hellgrün und Grün. Darüber lege man die drei Verläufe aus Beispiel 3, aber in transparent-weiß statt farbig:

Beispiel 4: Über einem weiß-grünen Farbverlauf liegen drei transparente-weiße Verläufe, die sich wiederholen.

Der Code dazu ist folgender:

background-image:
repeating-linear-gradient(160deg, transparent, #fff 30%),
repeating-linear-gradient(40deg, transparent, #fff 20%, transparent 23%),
repeating-linear-gradient(100deg, transparent, #fff 25%),
linear-gradient(90deg, #fff 5%, #deb 30%, #3a1 80%);

Für meinen Blog habe ich die Maße und Winkel der Farbverläufe angepasst, das Weiß halbtransparent gemacht (mit der HSLA-Farbangabe hsla(0,0%,100%, 0.3) statt #fff) und die Abstände des weiß-grünen Hintergrunds teilweise fest und teilweise abhängig von der Fensterbreite gesetzt. Deshalb verschwindet der Randstreifen scheinbar, wenn das Browserfenster schmaler wird (tatsächlich sieht man die weißen Verläufe auf weißem Hintergrund nicht mehr).

Erst der Anfang

Das Mozilla Developer Network bietet einen ausführlichen, deutschsprachigen Artikel über CSS-Farbverläufe, auch über radiale Verläufe. Wie unterschiedlich CSS-Muster sein können, zeigt Lea Verou in ihrer CSS3-Muster-Galerie. Hier kann man selbst im Code herumprobieren, zum Beispiel bei den einfacheren diagonalen Streifen.

---
Artikel kommentieren …

Ein gefalteter Stier

Origami-Figuren sind meistens kantig und abstrakt, dabei dennoch gut zu erkennen. Das fasziniert mich am Papierfalten, diese Reduktion auf das Wesentliche. Im folgenden zeige ich eine Anleitung für einen eher einfachen Stier (mit fortgeschrittener Gegenbruchfalte). Auf meiner Quelle für dieses Modell wird als Autor George Rohads genannt.

Übrigens: Wem die ersten vier Schritte hier zu schnell gehen, sollte sich meine vorherige Faltanleitung für einen Karpfen ansehen. Dort führen die Schritte 1 bis 7 auf einem anderen Weg zum gleichen Ergebnis. Und falls es selbst nach mehreren Versuchen nicht klappt mit dem Stier, dann ist eine schöne Papierschachtel bestimmt ein guter Trost. Los geht’s:

1. Man benötigt ein quadratisches Papier, zum Beispiel mit einer Seitenlänge von 15 cm. Die Diagonalen vorfalten. Dann zwei benachbarte Kanten zur entsprechenden Diagonalen falten, damit die Drachenform in Schritt 2 entsteht.

2. Wieder auffalten.

3. Auch die beiden anderen Kanten zur Diagonale falten und wieder entfalten.

4. Nun alle vier Papierkanten an den eben entstandenen Faltlinien zur Diagonale bringen. Die entstehenden Zacken flach zusammenfalten und nach unten legen, so dass die Form wie in Schritt 5 entsteht.

5. Die Form in der Mitte entlang der Diagonale falten, dabei den unteren Teil nach hinten umschlagen, damit die beiden Zacken außen bleiben.

6. Die äußeren Spitzen mit einer Gegenbruchfalte nach oben bringen. Dazu an den gekennzeichneten Linien zunächst gut vorfalten (siehe 6b) und wieder entfalten. Dann die Spitzen oben öffnen und die mittlere Kante umkehren und nach innen holen. Das Ergebnis für die linke Spitze ist im Schritt 6c zu sehen. Mit der rechten Spitze ebenso verfahren.

7. Die rechte Spitze mit einer Gegenbruchfalte wieder nach unten holen. Dabei an der gestrichelten Linie im Bild orientieren, das Ergebnis ist im nächsten Bild zu sehen.
Außerdem die großen Zacken in der Mitte der Figur nach unten falten (jeweils auf Vorder- und Rückseite der Figur).

8. Auch die linke Spitze wieder mit einer Gegenbruchfalte nach unten bringen.

9. Und schon wieder eine Gegenbruchfalte: Die linke Spitze erneut nach oben bringen, so dass ein schöner Stierkopf mit Horn entsteht.

10. Den Kopf an der gestrichelten Linie öffnen (also obere Papierschicht nach oben umfalten, untere nach unten). Das Horn des Stiers dabei nach vorne falten. Es ergibt sich der Nasenrücken, wie bei Schritt 11 zu sehen.

11. & 12. Schließlich die kleine Ecke unterhalb des Horns ein wenig herausfalten, so dass ein Ohr entsteht. Auf der Rückseite wiederholen.

Ich hoffe, euer „Stierkampf“ führt zu einem guten Ergebnis. Wenn am Ende etwas Erfreuliches herauskommt, kann Origami auch eine sehr entspannende, meditative Tätigkeit sein. Viel Vergnügen beim Nachfalten!

---
Artikel kommentieren …

Typosafari durch Regensburg

Anfang des Jahres veröffentlichte der Sender arte eine Dokureihe über Typografie im urbanen Raum. In dieser achtteiligen Typo-Safari präsentieren ortsansässige Schriftgestalter typografische Auffälligkeiten ihrer Städte. Ich fand die Serie sehr inspirierend und habe mir vorgenommen, für mein Blog eine Fototour durch meine Stadt Regensburg zu machen.

Eine typische Schrift?

Was bei arte so einfach aussieht, ist in Wahrheit ziemlich kompliziert: Gibt es ein ganz eigenes typografisches Phänomen für Regensburg? Eine so typische Art der Beschriftung, dass man daran die Stadt erkennen kann? Es ist ja nicht so wie bei Amman, Bath, Tilburg oder einigen anderen Städten, für die ganz eigene Schriften gestaltet wurden.

Bei der modernen Regensburger Beschilderung hat sich kein einheitliches Konzept durchgesetzt. Die kontrastarmen Wegweiser zu Sehenswürdigkeiten sind mit der Rotis Sans ein Kind ihrer Zeit, auf die Regeln in öffentlichen Parks weist Times New Roman hin (im Foto mit einem Aufkleber des bekanntesten heimischen Fußballvereins) und die Haltestellen des Busverkehrs sind seit ca. 2011 in der FF Transit beschriftet (vorher: Helvetica).

Die offiziellen Schriften der Stadtverwaltung sind Hermes FB (nur im Logo) und ThesisSans. Man findet sie zum Beispiel bei Schildern der städtischen Wohnungsbaugesellschaft, auf Plakaten städtischer Veranstaltungen oder an Gebäuden von Ämtern (hier leider durch die Allerweltsschrift Arial ersetzt; ich glaube, das Corporate Design Manual erlaubt das im Ausnahmefall sogar, kann das Manual aber nirgendwo finden).

Tausendfach vorhanden

Ein wenig einheitlicher und deutlich präsenter sind die Hausnummernschilder. In Regensburg sind sie dunkelblau mit weißer Schrift (der Straßenname in Fraktur, Ziffern in Antiqua). Ein Pfeil zeigt an, in welche Richtung die Hausnummern aufsteigen. Außerdem stehen auf sehr vielen Schildern in der Altstadt noch die ursprünglichen Litera-Hausnummern.

Seit dem 12. Jahrhundert war die Regensburger Altstadt in acht sogenannte Wachten untergliedert, quasi Zuständigkeitsbereiche von Militär/Polizei. Jede Wacht wurde mit einem Großbuchstaben bezeichnet – von A für die Westnerwacht bis H für die Ostnerwacht, dazu kamen später J für den „Felddistrikt“ (= an die Altstadt grenzender, innerer Westen) und K für Kumpfmühl. Innerhalb einer Wacht waren die Häuser durchnummeriert. Die mittlere Hausnummer oben im Bild enthält übrigens einen „Übersetzungsfehler“: Offensichtlich war vom Vorgängerschild das Fraktur-A (siehe rechtes Schild) als U missverstanden worden.

Typen der Vergangenheit

Aber wie besonders sind solche Hausnummerntäfelchen wirklich? Gibt es die nicht genauso in mindestens fünfzig anderen Städten? Vielleicht sollte man lieber ein Stück weiter in die Vergangenheit reisen und findet dort einzigartige Schriftzeugnisse? Eine damals sehr bedeutende Inschrift definierte die alten Stadtmaße Fuß („statschuch“), Elle („statöln“) und Klafter, die für alle Bürger galten (Bild unten links). Die Maße stehen am alten Rathaus, wo sich auch der Reichstagssaal befindet, in dem zwischen 1663 und 1806 Sprichwörter entstanden sind wie „etwas am grünen/runden Tisch besprechen“ oder „etwas auf die lange Bank schieben“.

Ein regelmäßiges Phänomen in Regensburg sind auch die Donau-Hochwasser. Davon zeugen Wasserstandsmarkierungen an der Historischen Wurstkuchl (Bild unten mittig). Sie liegt am Donauufer neben dem Salzstadl, ganz in der Nähe der Steinernen Brücke. Bis 1146 war hier das Baubüro für die Steinerne Brücke, danach versorgte sie als Garküche unter anderem Steinmetze und Hafenarbeiter. Heute bekommt man dort Bratwürste auf Sauerkraut (natürlich mit süßem Senf) und Kartoffelsuppe.

Rund 300 Jahre alt sind viele Grabinschriften an der Klosterkirche St. Emmeram (Bild oben rechts). Die Kirche gehört zum Regensburger Schloss der Familie Thurn und Taxis, die das Postwesen in Europa aufgebaut hat. Sehr viel kann ich zu den Inschriften nicht erzählen, außer dass sie mir recht gut gefallen.

Schauwert: hoch

Wie interessant oder „sehenswert“ ein Schriftzug ist, kann schließlich auch ein gültiges Kriterium sein, nach dem man die Typografie einer Stadt auswählt. Die Meinungen düften hier zwar sehr auseinander gehen, denn objektiv ist diese Eigenschaft ja kaum … Wer allerdings immer nur mit objektivem Maßstab misst, übersieht vielleicht viele schöne, lustige, seltsame und kunstvolle Eigenheiten.

Oben links: Schusterladen (Weiße-Hahnen-Gasse); darunter: Übung eines Steinmetzlehrlings am Dom (ca. 1975); oben mittig: Buchstabenkugel des Metallbildhauers Peter Schwenk am Verlagsgebäude der Mittelbayerischen Zeitung; oben rechts: Ausschnitt aus dem Wappenschild an der Spitalbrauerei.
Links mittig: Kanaldeckel bei der Dombauhütte (sonst haben die Regensburger Kanaldeckel keine stadtspezifische Gestaltung); mittig: erhabene Hausanschrift in der Lindnergasse; links darunter: Ziffern am Walhalla-Bockerl (Lokomotive der ehemaligen Zugstrecke Regensburg–Walhalla).
Unten rechts: „Zum goldenen M“ am McDonald’s-Restaurants am Arnulfsplatz; unten mittig: Graffiti an einem Tor am Königshof; unten rechts: Stelen am Portal der Schottenkirche

Alles von Hand

Mit etwas Glück entdeckt man in der Stadt auch einige Arbeiten des Kalligrafen Johann Maierhofer, der sein Atelier in der Dänzergasse hat. Vor einigen Jahren hatte er beispielsweise viele Schaufenster in der Altstadt mit kurzen Versen beschriftet.

Ebenfalls handgemachte Schriftkunst findet man im sympathischen Laden Blinkfüer in der Oberen Bachgasse. Die Besitzerin Susanne Kauth arbeitet dort ganz ohne digitale Hilfsmittel und bedruckt im aufwendigen Handsatz verschiedene Materialien – größtenteils mit historischen Holz- und Bleilettern.

Und bei euch? Welche Schriften gibt es in eurem Wohnort zu entdecken? Wenn ihr die Augen offen haltet, findet ihr vielleicht eine schöne Ladenfassade, Gravuren in Mauern oder ungewöhnliche Beschilderungen. Ganz systematisch halten zum Beispiel die Betreiber des Blogs Berlin Typography ihre Entdeckungen fest.

Zum Herunterladen habe ich übrigens alle 24 verwendeten Bilder dieses Blogartikels in eine zip-Datei gepackt (unbearbeitet, in Originalgröße, rund 40 MB).

---
Artikel kommentieren …

Alle Artikel im Archiv lesen …

Sonstiges

Warum „Charakterziffer“?

Das Wort kombiniert Persönlichkeit (Charakter) mit Sachlichem (Ziffer). Zusammengesetzt ergibt sich ein Synonym für Mediävalziffer, eine Zahlenvariante mit Ober- und Unterlängen.

Schriftarten dieses Blogs

Wenn dein Browser eingebettete Schriften (WOFF/WOFF2) unterstützt, dann liest du die Fließtexte hier in der Source Sans Pro von Paul D. Hunt, erschienen 2012 bei Adobe.

Die Überschriften sind aus der czSlab gesetzt, die ich für dieses Blog gestaltet habe. Sie orientiert sich an Yanones viel ausgefeilterer Antithesis von 2014.


Impressum

Anbieterkennzeichnung nach TMG §5:

Gerhard Großmann · Geibelplatz 10 · 93051 Regensburg
E-Mail: postfach2b [ät] web.​de, SMS: 0178/1961914

Rechtliche Hinweise

§1 Die Verwendung meiner Kontaktdaten zur gewerblichen Werbung ist ausdrücklich nicht erwünscht; ich widerspreche hiermit jeder kommerziellen Verwendung und Weitergabe meiner Daten. // Private Fanpost ist allerdings sehr willkommen!

§2 Dieses Blog verlinkt auf Websites Dritter („externe Links“). Zum Zeitpunkt der erstmaligen Verlinkung waren dort keine Rechtsverstöße ersichtlich. Da ich keinen Einfluss auf fremde Websites habe, kann ich für deren Inhalte und Gestaltung keine Haftung übernehmen. Sollte ich von Rechtsverstößen erfahren, entferne ich die Verlinkung unverzüglich. Eine ständige Kontrolle der externen Links ist ohne konkrete Hinweise aber nicht zumutbar.

Website zuletzt erstellt: 2017-09-23T02:53:48+02:00