Schlagwörterarchiv: CSS-Tricks

CSS-Tricks: 5 verschiedene Hover-Effekte nur mit CSS3

Wie Sie nur mit CSS3 wunderschöne Animationen und Übergänge erstellen

5-interessante-css3-effekte

Mein heutiges kurzes Tutorial zeigt Ihnen, wie einfach und elegant Sie mit CSS3 interessante und schöne Hover-Effekte erstellen können. Wenn Sie mit der Maus über die 6 verschiedenen Grafiken fahren, erhalten Sie die weiter unten stehenden 5 Mouseover-Animationen, die Sie bei Bedarf auch völlig frei für Ihre Projekte verwenden können.

Der Originalartikel zum meinen Ausführungen stammt vom März 2014 und erschien auf der Webseite von Queness.com unter dem Titel Create Different Styles of Hover Effects with CSS3 Only. Dort finden Sie auch einen DEMO- und DOWNLOAD-Button, um die Effekte einzeln anzusehen bzw. das gesamte Beispiel herunterzuladen.

Link zur Demoseite: hier anklicken!!!
Link zum Download: hier anklicken!!!
Weiterlesen

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

Wie Sie ein Flyout-Menü mit CSS3 optisch toll aufpeppen können!

So verleihen Sie einem Menü mit CSS3 die richtige Würze

3 CSS3 Menüs mit tollen Hover-Effekten

In meinem heutigen Artikel möchte ich Ihnen zeigen, wie Sie Ihre CSS3-Menüs optisch ganz toll gestalten können. Dafür müssen Sie in jeden Menüpunkt eine Grafik oder ein Bild einbinden. Sobald Sie mit der Maus über den Link fahren, erscheint durch den Hover-Effekt Ihre Grafik und das CSS3-Menü entfaltet die volle Wirkung.

Den Originalartikel zu meinen Ausführungen finden Sie auf der Webseite von Tympanus.net/Codrops: How to spice up your menu with css3 Weiterlesen

CSS-Tricks: RGBA und die Durchsichtigkeit in CSS3

CSS3 und die „Durchsichtigkeit“: 3 Beispiele mit RGBA

CSS3 - RGBA und Durchsichtigkeit

Grafiken und farbige Ebenen übereinander zu lagern und die untere durch die obere durchscheinen zu lassen und dies schnell, unkompliziert ohne Hilfe von Bildbearbeitungsprogrammen und ressourcensparend durchzuführen. Welcher Webdesigner wünscht sich das nicht? Dies alles und noch viel mehr ist mit CSS3 möglich.

Ich möchte Ihnen heute zeigen, wie Sie mit der CSS3-Eigenschaft RGBA ganz einfach eine „Durchsichtigkeit“ von Ebenen herzaubern können. Bei RGBA handelt es sich um den RGB-Farbraum (Rot Grün Blau) mit einer zusätzlichen Information (Alpha, Wert der Durchsichtigkeit). Dieser Alpha-Wert drückt in Werten von 0.0 bis 1 die Transparenz aus. 0.0 = völlige Transparenz, 1 = keine Transparenz!

In Gegensatz zur CSS3-Eigenschaft opacity, welche als Kind-Element vererbt wird, gibt es dieses Problem mit der Vererbung bei RGBA nicht. Weiterlesen