Kacheln nur mit ganzen Bildern, das geht mit CSS3: Zwei neue Werte sind in CSS3 für background-repeat vorgesehen: space und round. Damit kann man verhindern, dass gekachelte Hintergrundbilder abgeschnitten werden. Und das funktioniert bereits im Chrome und im Internet Explorer ab Version 9. Aber von Anfang an.
Ausschneiden mit CSS3 – clip-path
Bilder im Web sind im Prinzip eckig … das ändert sich glücklicherweise mit dem CSS-Masking-Module.
IconFonts nutzen
Die Anforderungen an Icons heute sind hoch: Sie sollen zuerst einmal auch auf hochauflösenden Displays gut aussehen und außerdem natürlich auch sonst möglichst flexibel sein: Schön wäre doch, man könnte – ohne ein Bildbearbeitungsprogramm bemühen zu müssen – die Farbe oder Größe ändern oder auch Schatten definieren. All das geht, wenn man IconFonts einsetzt. IconFonts funktionieren wie die beliebten WebFonts, aber enthalten keine Schriftzeichen, sondern nur Icons. Wie man den FontAwesome nutzt, zeige ich in einem Video.
CSS3: Hintergrundbilder skalieren – so geht’s
Bei manchen CSS3-Eigenschaften kann man sich fragen, ob sie sinnvoll sind oder nicht. Das Skalieren von Hintergrundbildern über background-size ist aber eindeutig ungeheuer praktisch. Wie es geht und welche Optionen zur Verfügung stehen, zeige ich in einem kleinen Video.
Weiterlesen
CSS3-Profitricks für Hintergrundbilder, Icons & Farbverläufe
CSS3 bietet mehr Möglichkeiten für Hintergrundbilder: Man kann einem Element mehrere Hintergrundbilder zuweisen oder Hintergrundbilder skalieren. Außerdem lassen sich über Funktionen wie linear-gradient() oder radial-gradient() selbst Bilder – nämlich Farbverläufe – erzeugen. Wie das geht und wie man diese Optionen genau nutzt, zeige ich in meinem neuen Videotraining für video2brain CSS3-Profitricks.
Mit dabei außerdem eine Vorstellung des Grundprinzips des Parallax-Scrolling und drei verschiedene Möglichkeiten, Icons in CSS zu verwenden: die klassischen CSS-Sprites, Icon-Fonts und der Einsatz von SVG-Icons.
CSS3-Farbverläufe mit background-image oder background?
Soll man für CSS3-Farbverläufe die Eigenschaft background-image oder background verwenden? Es funktioniert prinzipiell beides:
.beispiel {
background-image: linear-gradient(red, yellow);
}
aber auch
.beispiel {
background: linear-gradient(red, yellow);
}
CSS-Quicktipp: Tabs in HTML
Im Textverarbeitungsprogramm Word erreicht man durch Tabs, dass einzelne Textteile untereinander stehen. Gerade hatte ich ein ähnliches Problem bei einer Webseite: Auf einer Webseite gab es die Texte „E-Mail: emailadresse@example.com“ und darunter „Telefon: 012-3456789“; wobei die Telefonnummer und die E-Mail-Adresse exakt untereinander stehen sollten. In Word ist das ein klassischer Fall für Tabs, in HTML gibts es allerdings so etwas wie Tabs nicht. Wie lässt sich trotzdem die gewünschte Darstellung erreichen? Wenn man mehrere solcher Zuordnungen hat, dann ist das ein klarer Fall für eine Tabelle – aber nur für zwei Zeilen schien mir das zu aufwändig. Weiterlesen
Präfixe in CSS3 – die wichtigsten Basics
CSS3-Code zu schreiben, heißt in vielen Fällen auch, den Code zu doppeln mit Angaben wie -webkit- oder -ms- oder -moz-. Was es genau damit auf sich hat und wie man diese Präfixe richtig verwendet – oder sich auch dabei helfen lässt – zeige ich in meinem Video „Präfixe bei CSS3-Eigenschaften“.
Hintergrundbilder mit halbtransparenten Farben überlagern
Letztens habe ich eine Möglichkeit gesucht, Hintergrundbilder mit einer Farbe zu überlagern. Eigentlich dachte ich, das müsste ganz einfach gehen – aber von Anfang an.
CSS3-Animationen debuggen
Letztens habe ich eine Möglichkeit gesucht, CSS3-Animationen im Browser zu debuggen – und bin in den gängigen Entwicklertools nicht so recht fündig geworden. Um so erfreulicher fand ich es, als ich jetzt im Firefox Nightly die neuen Möglichkeiten entdeckt habe (ausprobiert habe ich es im Firefox Nightly 34.0a1).