Der Webdienst „Fonts“ von Google bietet die Möglichkeit relativ leicht Schriften auf der eigenen Webseite einzubinden. https://fonts.google.com/
Archive for November, 2016
#id und .class
Wie erwische ich im CSS die richtigen Elemente möglichst simpel?
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 […]
Selektoren Kombination
Text noch nicht vorhanden
flex
Mit dem relativ jungen Bündel an Eigenschaften rund um #display: #flex lassen sich Zentrierungen und weitere Stylings einfach vornehmen. Horizontal und Vertikal geht damit.
Layout mit Float und Clear
#float funktioniert besser in Layouts mit festen Vorgaben für die Höhe. Dies beinhaltet auch Vorgaben für maximale Längen von Text. Wichtig: Wo #float genutzt wird muss in der Regel auch #clear erfolgen. Das wird hier über #after bei der #class „clearfix“ realisiert.
positions
Ein überlappen ist möglich und Abstände zum Bezugspunkt #relative können exakt eingestellt werden.
z-index
Die Sichtbarkeit der Elemente im Stapel wird mit über die Z-Achse für Elemente mit #relative, #absolute und #fixed eingestellt.
Display Table
Alle tabellenbezogenen Elemente haben einen eigenen Wert für #display und das erklärt ihr Verhalten. Die voreingestellten Werte für #display setzen die Elemente der Tabelle an die vorgesehene Position. So wandert #tfoot nach unten.
display: none und Animation
Wird der Wert bei Display: NONE geändert können damit auch Animationen gestartet werden. In Kombination mit :hover werden über dieses Prinzip häufig Submenus in Navigationen erstellt.
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.
linear und ease
Das Tempo des Abspielens einer #animation oder #transition kann beeinflusst werden.
flex
Die beiden Module #flex und #grid ergänzen sich. Für das Layout auf Micro-Ebene, z.B. eine Navigation oder Galerie, bietet #flex viele praktische Möglichkeiten.
Text im CSS gestalten
Text noch nicht vorhanden.
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
Kontur
Kein Text vorhanden.
Transform auf Text
Text mit CSS gestalten