Archiv

IconFonts nutzen

CSS3-Profitricks: Hintergründe, Icons und Farbverläufe

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.

Weiterlesen

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

Videotraining CSS3-Profitricks für Hintergrundbilder, Icons und 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 bei LinkedIn Learning 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.

Weiterlesen

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);
}

Weiterlesen

Präfixe in CSS3 – die wichtigsten Basics

CSS3-Präfixe

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“.

 

Weiterlesen

CSS3-Animationen debuggen

Firefox Nightly

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).

Weiterlesen

CSS3-Media Queries für Einsteiger

Die wichtigste Komponente des Responsive Webdesign sind die CSS3-Media Queries. Damit kann man je nach Größe des Viewports dem Browser andere CSS-Angaben servieren. Einen Einstieg in Aufbau und Funktionsweise von Media Queries bietet das folgende Video aus meinem Videotraining Responsive Webdesign – das große Training von video2brain.

Weiterlesen

CSS3-Blendmodi für Bildüberlagerungen – und Alternativen

Bildüberlagerung

Im Artikel von Opera zu den Blendmodi gibt es schöne Beispiele für die CSS3-Blendmodi: Bilder werden über Blendmodi verfremdet und beim Hovern sieht man das Bild im Normalzustand. (http://dev.opera.com/articles/getting-to-know-css-blend-modes/demo_blendmodes_tile.html). Ich habe den Effekt einmal nachgebaut und dann überlegt, wie sich ähnliche Effekte ohne CSS3-Blendmodi (mix-blend-mode funktioniert derzeit nur im Chrome/Opera mit dem Flag, im Safari ab 7.1 oder in Firefox ab Version 32) erreichen lassen. Das Ziel ist dabei immer, Bilder mit einer Farbebene zu überlagern, ohne dass die Bilder von Haus aus so verändert werden. Weiterlesen