Wird die Webseite auf dem Smartphone angezeigt, hat sich die Ansicht als Single Page etabliert. Dies wird erzielt, indem die Anzahl der Spalten auf 1 und die Anzahl der Zeilen automatisch vergeben wird.
Archive for Oktober, 2018
Grid Modell
Im CSS kann das zweidimensionale und auf einem Raster basierende Layout System mit #display #grid aktiviert werden. Es eignet sich hervorragend für das Layout auf der Macro-Ebene. Das Raster kann vielseitig mit flexiblen oder fixierten Bereichen bestimmt werden.
Flex Box Navigation
Das Eltern-Element hat #display: #flex. Direkte Kinder haben #flex-basis: 100%. Bei einem #:hover ändert die #flex-basis auf 120%.
Submenu
Eine häufig verbreitete Lösung für ein Submenu ist das generelle ausblenden dieses Elements und wenn das Eltern-Element Mauskontakt bekommt, dann wird der #display geändert.
Box in der Box
Für die flächenbezogene Gestaltung von Schriftboxen werden die gleichen Eigenschaften verwendet.
Horizontale Navigation
Links die sich in #nav befinden werden gemeinhin als Navigation bezeichnet. Bei einer horizontalen Navigation sollte mit #padding die Fläche optisch ausgeglichen werden. Die Gestaltung der Links muss die Pseudo-Klassen berücksichtigen.
SVG Alphakanal
Die Elemente im #mask dienen als Alphakanal. Die Farbe Schwarz ist völlig transparent und die Farbe Weiß ist völlig sichtbar. Graustufen liegen dazwischen, das ist wie bei der Ebenenmaske im Photoshop.
Karte für Radfahrer
OpenStreetMap bietet alternative Layouts für die Karten. https://www.openstreetmap.de
Open Street Map
Es gibt eine Reihe von Kartendiensten. OpenStreetMap ist ein freies Projekt mit dem Ziel eine kostenlose Weltkarte zu gründen. Kartenausschnitte können auf der Webseite gewählt und mit dem dort generierten HTML kostenlos über #iframe auf der eigenen Webseite eingebunden werden. https://www.openstreetmap.de
System Font Stack
Die Schriften Verdana und Arial sind im Web häufig anzutreffen. Allerdings laufen die neueren Systemschriften schöner. Der Vorteil ist: Die Systemschriften müssen nicht erst geladen werden. Allerdings sieht die Webseite auf jedem Gerät etwas anders aus. Hier benutzen wir diesen Satz an Schriften für den Mengentext.
CSS Spinner
Sollte auf der Webseite etwas geladen werden, z.B. per Ajax, ist es besser eine kleine Animation während des Ladens anzuzeigen. Die Animation gibt Feedback „das sich jetzt etwas tut“.
Rotation bei Schrift
Im Elemente können im 3D Raum mit #transform und #translate3d animiert verschoben werden.
min und max
Bei #type #number können die minimalen und maximalen Zahlen bestimmt werden.
pattern
Mit Hilfe von Regular Expressions kann die gewünschte Eingabe konkret definiert werden. Für das Styling kommen dann eine ganze Reihe von Pseudoklassen in Frage.