Wie passe ich mein Layout für verschiedene Ausgabegeräte mit @MEDIA an?
Archive for November, 2016
Hintergrundbild mit Fokuspunkt
Das Motiv der Hintergrundbilder hat in der Regel einen individuellen Schwerpunkt. Setzt man die Prozentwerte von #BACKGROUND-POSITION auf den individuellen Fokuspunkt, ist dieser auch bei extremen Verhältnissen sichtbar. Die Prozentwerte von dem individuellen Fokuspunkt kann man leicht mit z. B. Adobe Photoshop ermitteln.
Multi-Column
Das Multi-column-Layout-Modul ist eine der Neuerungen des CSS3-Standards mehrspaltige Layouts darstellen, ohne dass HTML-Elemente für den Aufbau der einzelnen Spalten notwendig sind.
number & range
Number bestimmte die Eingabe von Zahlen. Bei Range erfolgt Eingabe mit einem Slider. Dies ist bei mobilen Geräten oft praktisch.
fieldset und legend
Größere Gruppen von Eingabemöglichkeit können mit <fieldset> zusammengefasst werden. Das <fieldset> wird mit <legend> beschriftet.
select mit option
Innerhalb des <select> werden die Auswahlmöglichkeiten mit <option> getaggt. Mehrere <option> können mit <optgroup> markiert werden. Das Attribut value kann bestimmt die tatsächliche Information die übertragen wird.
radio und checkbox
<input> mit type=radio erlauben nur eine Auswahl. Checkboxen können in beliebiger Form selektiert werden.
float und clear
#floatsollte nur in Verbindung mit #CLEAR eingesetzt werden. In dem Beispiel kann sehr gut das Kollabieren des Eltern-Elements gezeigt werden, wenn #CLEAR nicht den #FLOAT beendet. Einfach die Eigenschaft #CLEAR im Footer entfernen: Sofort bricht die Höhe des Eltern-Elements zusammen.
Hintergrundbild
Text und andere Inhalte können auf Hintergrundbildern liegen. Wir können mit ergänzenden Eigenschaften Größe und Position sowie andere Aspekte von diesem Hintergrundbild beeinflussen.
grid
Den großen Mehrwert bietet #grid bei komplexeren und responsiven Beispielen. Das gezeigte Beispiel könnte man ja sehr leicht ohne #grid bauen.
left and translateX
Elemente mit #position #absolute oder #fixed können mit #left 50% und #translateX( -50% ) horizontal zentriert.
margin und text-align
Um zu zentrieren gibt es für jede Situation mindestens eine CSS-Methode.
clearfix
Anstatt für jeden #float ein passendes Element für den #clear zu suchen, können wir uns mit der CLEARFIX Methode die Arbeit deutlich erleichtern.
Margin
Hinweis: Der automatische Aussenabstand (margin) zentriert einzelne Block Elemente horizontal. Ein zeitloser Klassiker im Webdesign.
Display
Die Funktion der Werte #block und #inline sowie #none sind die wesentliche Grundlage und die häufigste Anwendung von #display. Da diese Werte per Standard vergeben werden, übersieht der Laie die Existenz der Eigenschaft #display häufig. Elemente mit #block beginnen eine neue Zeile und Elemente mit #inline können innerhalb von Text stehen.
Display: NONE vs. Opacity
Elemente mit #display: #none und alle Kinder-Elemente sind in der Anzeige des Browsers nicht da. Wird, z.B. mit #:hover, #none in einen anderen Wert geändert können Animationen abgespielt werden. Transparente Elemente hingegen nehmen ihren Platz ein.
box-shadow
#box-shadow kann den meisten Elementen zugewiesen werden, da diese Boxen sind.