Kategorien-Archive: CSS

CSS-Tricks: Nummerierung von Überschriften und Untertiteln

Wie Sie mit CSS-Zählern Haupt- und Untertitel automatisch nummerieren

css-counter-headings

Angenommen, Sie haben in einem HTML-Dokument eine Reihe von Überschriften mit Haupt- und Unterpositionen und möchten diese manuell oder über ein Skript durchnummerieren.

In diesem Fall können Sie ganz einfach einen sogenannten CSS-Zähler einbauen und damit eine optische Verbesserung Ihres Beitrages erreichen. Ein Zähler lässt sich an vielen Stellen einer Website verwenden und bietet einige nützliche Funktionen.

Tutorial zum Thema CSS Counter ansehen: Hongkiat.com/css-automatic-numbering

Weiterlesen

CSS3-Tricks: Mit CSS-Shapes Text um runde Objekte fließen lassen

Wie Sie mit CSS-Shapes ganz einfach Texte um runde Grafiken anordnen können

with-without-shape-outside

Mit CSS-Shapes ist es den Webdesignern heute schon möglich, ohne viel Aufwand Texte um Objekte fließen zu lassen. Die CSS-Shapes (CSS-Formen) haben die 3 Eigenschaften [shape-outside], [shape -margin] und [shape-image-threshold]. Mit diesen können Sie einen Text in CSS3 ganz leicht und elegant um eine runde Grafik fließen lassen – wie in einem Satzprogramm!

Ich zeige Ihnen heute an einem kleinen Beispiel, wie CSS-Shapes funktionieren und wie Sie sie einsetzen können. Ein ausführliches Tutorial zum Thema finden Sie auf der Webseite von Tympanus.net/Codrops.

Weiterlesen

8 einfache Schatteneffekte mit CSS3 und box-shadow

8 coole und interessante CSS3 Schatten verschönern Ihre Webseite

8 CSS3 Shatten

Mit Schatteneffekten und CSS3 kann man einzelne Elemente auf einer Website ganz toll und einfach aufpeppen. Mit der CSS3-Anweisung box-shadow ist fast jede erdenkliche Form von Schatten möglich, wenn man nur weiß, wie. Die Formatierung verschiedener Schatten ist damit wirklich viel einfacher geworden.

Die Erstellung von Schlagschatten bis hin zu feinen und diffusen Schattenwürfen sind für Webdesigner mit CSS3 und box-shadow super realistisch nachzubauen – und das ohne ein Grafikprogramm bemühen zu müssen. Weiterlesen

3 einfache und coole CSS3 Hover-Effekte für Grafiken

Wie Sie mit CSS3 interessante Mouse-Over-Effekte für Grafiken erstellen

3 cool CSS3 image hover effects

Bei den heutigen modernen Webseiten und Browsern gibt es zahlreiche Techniken, die verwendet werden können, um interessante Interaktionen zu erstellen. Die einfachste und eleganteste sind in der Regel CSS und insbesondere die Ergänzungen, die mit CSS3 kamen.

Heute möchte ich Ihnen zeigen, wie Sie mit dem Einsatz von Hover (:hover) und Übergängen (transitions) richtig schöne und coole CSS3-Effekte zum Ein- und Ausblenden von Bildern und Bildunterschriften erstellen können.

Weiterlesen