Kategorien-Archive: HTML

7 coole Menüs mit CSS3 Übergängen (Transitions) und Textschatten

Interessante CSS3-Experimente mit Text-Shadow und Transitions

BlurMenu_Style5

Es gibt so viele tolle Experimente und Dinge, die Sie mit den Eigenschaften und Möglichkeiten, die CSS3 Ihnen bietet, erstellen können. Heute möchte ich Ihnen zeigen, wie Sie mit Hilfe von Textschatten (Text-Shadow) und mit Transitions (Übergängen) mit sogenannten Unschärfe-Effekten in 7 verschiedenen CSS3-Menüs experimentieren können.

Die Grundidee, welche dahintersteckt, ist eigentlich ganz einfach. Wenn Sie mit der Maus über einen einzelnen Menüpunkt fahren, kommt dabei die CSS-Eigenschaft [hover] zum Einsatz. Dieses einzelne Menüelement erscheint dabei scharf, die restlichen Menüpunkte bleiben im Hintergrund und erscheinen als verwischt oder unscharf.

Den Originalartikel von der Webseite Tympanus.net/Codrops finden Sie hier: Blur Menu with CSS3 Transitions

Wichtig für Browserverwendung und Mobilversionen!

Die folgenden 7 tollen CSS3-Menüs mit Hover-Effekten und Verwendung von Tranistions und Textschatten funktionieren nur in den gängigsten und modernsten Browsern. In den Mobilversionen (Smartphone, Tablets) werden die Mouse-Over-Effekte teilweise fehlerhaft bis gar nicht dargestellt.

Weiterlesen

HTML Editor Phase 5 ist ein toller und kostenloser Web-Editor

Phase 5 Editor: Kostenloses Programm zum Erstellen von HTML-Dokumenten

HTML Editor Phase 5

Wenn Sie Webseiten erstellen und entwickeln möchten, brauchen Sie einen entsprechenden HTML-Editor. Wichtig sind dabei eine gute Einfärbung der Syntax – auch Syntax-Highlighting genannt – und eine brauchbare Code-Vervollständigung. Eine Software zur professionellen Gestaltung von Internet-Seiten muss aber nicht teuer sein!

Das für den Privatgebrauch und Schulen kostenlose Programm HTML Editor Phase 5 bietet Ihnen dafür alles, was das Webdesignerherz begehrt. 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