#ease-in beginnt langsam beginnt und endet schnell. #ease-out verhält sich genau anders herum. #ease-out ist sollte häufig getestet werden. Der Benutzer hat sofort ein Feedback, da es sehr schnell beginnt und kann die Bewegung gut einordnen aufgrund es langsamen Finish. Bei #ease-in ist mitunter der langsame Start das Problem. Der Nutzende erwartet ein Ergebnise, die […]
Author Archive for herr_seeliger
float ohne clear
Wenn man relativ kleine Bilder hat und viel Text hat, dann kann auf #clear verzichtet werden. Der Text übt nämlich beim Float eine Höheninformtion im Float-Kontext aus.
vertical-align in der Tabelle
In den Zellen einer Tabelle, das sind #td und #th, kann #vertical-align angewendet werden.
Vertikal zentrieren ohne flex
Für besondere Situationen im Webdesign kann dieser Effekt sinnvoll sein.
Bild einfügen
Das #img zeigt Bilder im Browser an. Es gibt vier gängige Datei-Formate für Bilder im Web. Für Fotos ist JPEG empfohlen. SVG ist der einzige Dateityp für Vektoren und bei Freistellungen ist PNG empfohlen. Einfache Animationen kann GIF. Mit #src wird auf die Bid-Datei verwiesen.
Bild mit Bildunterschrift
#figure und #figcaption ergänzen das #img. Das #img sollte außerdem über noch über #alt beschrieben werden.
CSS Filter
Mit der CSS Eigenschaft #filter können eine ganze Reihe von Effekten beliebigen Elementen zugewiesen und auch animiert werden. Es können mehrere Filter gleichzeitig zugewiesen werden.
Drehende Zahnräder
SVG können als Vektoren z.B. in Adobe Illustrator erzeugt und dort gespeichert worden. Dem so erzeugten #SVG können #class, #id oder #filter zugewiesen werden.
Zellen wertbasiert färben
Die Inhalte der Tablle aus den Zellen mit der #class arithmetisches-mittel werden dynamisch ausgelesen und in Zahlen konvertiert. Eine #class ist jeweils einem bestimmten Wertebereich zugeordnet und gestaltet die Zelle der Tabelle wenn die Bedingung zutrifft.
textarea
Die Feineinstellungen erfolgen über die Attribute rows, maxlength und wrap.
Formular
Die meisten Möglichkeiten für die Eingabe sind Typen des <input>-Elements. Weitere wichtige Bestandteile ist das <label> Element und der <button>. Außerdem gibt es <textarea> oder <select>. <form> und seine Kinder erfassen nur die Daten. Für die Verarbeitung kommen andere Sprachen, z.B. PHP oder Javascript, zum Einsatz.
text und passwort
<input> mit type=“text“ und type=“passwort“ übergeben beide jeweils Text und sind Einzeilig. Ändert man type=“passwort“ in type=“text“ werden die Punkte sogar in Buchstaben konvertiert. Type=“passwort“ verfügt über keinerlei Sicherheitsvorkehrungen. Dies muss über weitere Techniken wie z.B. hash & salt erzeugt werden.
Border bei Tabellen
Wir können die üblichen Border-Eigenschaften verwenden. Allerdings hat die table Eigenschaft border-collapse einen wesentlichen Einfluss darauf ob die border durchgezogen oder unterbrochen sind.
Farben bei Tabellen
Keywords, HexRGB, RGB, RGBA, HSL und HSLA können genutzt werden.
Box Eigenschaften der Tabelle
Padding, border sowie width und height können genutzt werden. Die Eigenschaft border-spacing dient als eine Art Ersatz für margin.
Aufbau einer Tabelle
Die Tabelle gliedert sich in #thead, #tbody und #tfoot. Eine #tr bildet eine Zeile. In einer Zeile sind die Informationen in der #td abgelegt. Nur im #thead können anstelle von #td #th verwendet werden. Eine #td kann über mehrere Zellen laufen, wenn sie #colspan verfügt. #rowspan lässt die Zelle über mehrere Zeilen laufen. Bemerkenswert ist […]
Gestaltung von Tabellen
Man kann sich mit Hilfe von Pseudoklassen die Gestaltung der Tabelle enorm erleichtern. Z.B. wird im gezeigten Beispiel mit #:nth-child jede ungerade (odd) oder gerade (even) Spalte anders gefärbt. Leere #td werden mit #:empty gefärbt.
Interne Sprungmarken
Wenn das Attribut #href auf eine ID verweist wird bei Klick auf den Link auf das Element mit der entsprechenden ID gesprungen. Hier wird der Sprung mit dem Script abgefangen und stattdessen sanft gescrollt.