Das Bild als Kind-Element von #a wird zur Link-Quelle. Es kann mit CSS gestaltet werden.
Archive for the ‘Komponenten’ Category
Inhalt verlinken
Mit dem Anker-Tag #a können Verlinkungen auf andere Inhalte gesetzt werden. Link-Quelle kann Text, ein Bild oder auch andere Elemente sein. Ein Link hat vier Zustände und diese werden über die Pseudo-Klassen #:link, #:visited, #:hover und #:active angesprochen werden.
Head
In der Box #head werden Angaben über die Webseite gesammelt. Häufig genutzte Elemente sind: #title, #meta und #link. #head wird im Gegensatz zu #body im Browser nicht angezeigt, seine Informationen jedoch verarbeitet. #head könnte jedoch mit der Eigenschaft #display #block sichtbar gemacht werden. Was allerdings keinen großen Sinn macht.
Hintergrund-Bilder einpassen
Text und andere Inhalte können auf Hintergrundbildern liegen. Wir können mit ergänzenden Eigenschaften Größe und Position sowie andere Aspekte beeinflussen.
Typographie mit CSS
Schrift kann in allen wesentlichen Merkmalen gestaltet werden. Das Leseverhalten am Bildschirm ist etwas anders, aber wer Erfahrungswerte aus dem Print mitbringt findet zu allem ein Gegenstueck im CSS.
Boxen und ihre Bedeutung
Es gibt im HTML eine Auswahl von Boxen mit denen eine Webseite aufgebaut werden kann. Ihnen wird jeweils eine bestimmte Bedeutung (Semantik) zugeschrieben und dieses allgemeine semantische Konzept sollte bei der Auswahl berücksichtig werden.
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.
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.
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.
box-shadow
#box-shadow kann den meisten Elementen zugewiesen werden, da diese Boxen sind.
Retro-Look mit Google Webfonts
Der Webdienst „Fonts“ von Google bietet die Möglichkeit relativ leicht Schriften auf der eigenen Webseite einzubinden. https://fonts.google.com/
CSS für den Druck
Wenn Webseiten ausgedruckt werden gelten andere Anforderungen. Koordinatensystem ist dann ein Papier. Absolute Maßeinheiten wie CM, MM und bei Schriftgrößen PT sind darauf abgestimmt. Dunkle Hintergrundflächen vielleicht in Weiß umwandeln um Farbe zu sparen und es kann auch Hilfreich sein Links als Ergänzung noch einmal in voller URL ausführen. Dies kann mit einem für PRINT […]
Semantik bei Schrift
Allen schriftbezogenen Elementen wird jeweils eine bestimmte Bedeutung, d.h. Semantik, zugeschrieben und dieses allgemeine semantische Konzept soll bei der Auswahl der Elemente berücksichtig werden. Diese Elemente für Text sind ebenfalls Rechtecke. Die meisten sind per CSS-Standard #display: #BLOCK. Sie erzwingen eine neue Zeile und nehmen erst einmal 100% der Breite ein und sind so hoch […]
Video
#Video bringt eine ganze Reihe praktischer Attribute, z.B. #autostart oder #loop. Die Video-Dateien werden mit #source eingebunden. Das MPEG4 Format auf Basis des H.264 Standard ist mittlerweile generell in den Browsern unterstützt.
Farben und Verläufe zuweisen
Die Farbe der Fläche einer Box kann über #background-color oder #background bestimmt werden. Es gibt mehrere Möglichkeiten für die Bestimmung von Farbwerte. Verläufe können nur über #background zugewiesen werden. Die Webseite ccsmatic stellt ein schönes Tool für das Erstellen von Verläufen zur Verfügung. https://www.cssmatic.com/gradient-generator