Bild mit Hover-Text erstellen

Manchmal kann es sinnvoll sein, ein Bild bspw. mit einem Hover-Text zu versehen. So kann man bspw. den Namen des Autors über seinem Profilbild schweben lassen. Auch in einer Galerie ist dabei ein solcher Effekt zumeist sehr nett anzusehen. Mit CSS ist dabei sehr einfach möglich, ein Bild mit Hover-Text zu erstellen.

Weiterlesen …Bild mit Hover-Text erstellen

Hyperlinks mit linearem Farbverlauf

Du suchst nach weiteren, individuellen Gestaltungsmöglichkeiten für deine Website? Dabei kannst du bspw. Hyperlinks mit linearem Farbverlauf erstellen. Einen solchen Effekt sieht man nicht häufig und könnte – je nach Design deiner Website – für einen netten Zusatzeffekt sorgen.

In diesem Artikel zeige ich dir dabei, wie du deine Hyperlinks mit einem linearen Farbverlauf hinterlegen kannst.

Weiterlesen …Hyperlinks mit linearem Farbverlauf

Animierter Fortschrittsbalken mit CSS

Es gibt durchaus Situationen bei denen es sinnvoll ist, den aktuellen Fortschritt obenrein grafisch darzustellen. Dazu nutzt man häufig einen Fortschrittsbalken. Einleuchtend ist die Anzeige eines Fortschrittsbalkens bspw. bei der Installation eines Programms oder einer App. Hier dürfte dabei jeder schon mal einen solchen Balken gesehen haben.

Aber auch beim Ausfüllen langer Formulare oder während eines Bestellvorgangs kann der aktuelle Fortschritt grafisch dargestellt werden. Hierzu gibt es mit CSS auch eine einfache Möglichkeit, dies zu tun.

Wie genau du mit CSS einen animierten Fortschrittsbalken in deine Website einfügen kannst, zeige ich dir dabei in diesem Artikel.

Weiterlesen …Animierter Fortschrittsbalken mit CSS

Unschärfe-Effekt mit CSS erzeugen

Mit CSS ist es möglich, einen Effekt zu erzeugen, der Text verschwommen darstellen lässt. Mit etwas Kreativität lässt sich dadurch ein netter Unschärfe-Effekt auf der eigenen Website erzeugen. Häufig stößt man bei diesem Effekt auch auf den englischen Begriff „blur“.

In diesem Artikel zeige ich dir, wie du dabei einen Blur-Effekt auf deiner Website selbst erzeugen kannst.

Weiterlesen …Unschärfe-Effekt mit CSS erzeugen

Überschriften mit CSS ansprechend gestalten

Mit Hilfe von CSS lassen sich ansprechende Überschriften gestalten und zwar ganz ohne zusätzliche Grafiken. In nachstehendem Beispiel möchte ich diesen Effekt daher anhand eines Falt-Effektes vorstellen. Die verwendete Technik dahinter sind dabei die CSS Shapes, die hier praktikabel umgesetzt werden.

Weiterlesen …Überschriften mit CSS ansprechend gestalten

Sich drehende Blätter als Menü

Mit CSS sind diverse und zudem witzige Effekte möglich. Du kannst bspw. ein Menü erzeugen, das aus Blättern besteht die sich um die eigene Achse drehen. Der Effekt startet, wenn du mit der Maus darüber fährst. Für den Einsatz auf professionellen Websites ist das jedoch sicher nicht gedacht. Als Designbeispiel oder auf privaten Websites kann dieser Effekt aber durchaus witzig sein.

im Folgenden zeige ich dir, wie du einen solchen Effekt auch auf deiner Website einbauen kannst.

Weiterlesen …Sich drehende Blätter als Menü

Leuchtende Rahmen für Formularfelder

Mittels CSS ist es überdies möglich, leuchtende Rahmen um Formularfelder herum zu erstellen. Die Rahmen leuchten dabei nur dann, sobald die Felder aktiv sind. Somit kann man den Seitenbesuchern eine visuelle Unterstützung bieten.

Mit dem folgenden Snippet kannst du schließlich den leuchtenden Rahmen erstellen.

Weiterlesen …Leuchtende Rahmen für Formularfelder

Senkrechte Trennlinien mit CSS erstellen

Mit dem HTML Tag <hr> lassen sich spielend leicht horizontale Trennlinien erstellen. Dies ist dazu auch schon sehr lange in HTML möglich. Aber du kannst auch ohne viel Aufwand senkrechte Trennlinien erstellen. Obwohl man das auch in reinem HTML machen kann, zeige ich dir hier die Variante via CSS. Jedenfalls setzen nicht alle Browser die HTML Variante gleich um. Weiterhin ist darüber hinaus HTML nicht länger für die Gestaltung von Elementen vorgesehen.

Weiterlesen …Senkrechte Trennlinien mit CSS erstellen