CSS

Heute hatten wir ein simples Menü mit Hovereffekt erstellt, worüber ich mich sehr gefreut hatte. 
In meinem Banner-hover-Menü gab es den Befehl display: inline-block, den ich irgendwie falsch assoziiert hatte. Ich dachte dieser Befehl hätte was mit einem Dropdown-Fenster zu tun, weswegen ich es in eigens erstellten, einzeiligen Menüs nie verwendet hätte. Display: inline-block, ist jedoch kein Dropdown, sondern – wie der Name schon sagt – einfach nur ein Inline-Block, an dem sich der entsprechende Hovereffekt automatisch anpasst. 
Ich bin so froh, dass ich mich für diesen Lehrgang entschieden hab, weil man kann sich natürlich vieles selbst beibringen, doch auch Vieles falsch verstehen und somit diverse Fehler in den Code einbauen, ohne zu verstehen warum. Aus diesem Grund ist es mir echt wichtig alles genau erklärt zu bekommen. Es kommt öfter mal vor, dass ich Erklärungen nicht auf Anhieb verstehe, doch wenn ich sie dann Zuhause oder auch im Kurs ausprobiere, dann check ich es. 
In meinem Urlaub werde ich zwar sehr viel am Meerigehege herumbauen, doch in der Nacht – habe ich mir vorgenommen – werde ich meine, für den Kurs erstellten Seiten, ganau anschauen und von Grund auf neu aufbauen. Denn ich habe einige Fehler gemacht, die zwar nicht schlimm- aber unnötig sind. Das sind nunmal Fehler die aus der Unwissenheit enstehen, die ich durch den Kurs endlich lerne zu verstehen. 

Simpler Image Hover Effekt

Ich bin gerade dabei unseren momentanen Banner zu animieren, da der alte Image-Hover-Glow-Effekt ziemlich gut ankam. Es gibt verschiedene Hovereffekte, die recht gut aussehen und sehr einfach einzubauen sind, doch einen Hover-Glow-Effekt auf einer Bilddatei konnte ich nicht ausfindig machen. Effekte, die es ermöglichen einen Bilderrahmen zum Leuchten zu bringen gibt es, doch keinen, der ein ganzes Bild mit diesem Effekt ausstattet.
Ziemlich cool finde ich den  Grayscale Effect von w3schools, den ich momentan über unseren Banner gezogen habe.

hier ein Beispiel:

grayscale_effekt

oder hier der Link um den Effekt auszuprobieren (einfach mit der Maus über den Banner fahren):

Inns_Web Grayscaleeffekt

(der Link wird wahrscheinlich nicht lange mit diesem Effekt funktionieren, da ich irgendwann meinen Glow-Effekt einfügen werde)

Und hier mein Image-Glow-Effekt:

Image_Glow

Image_Glow_fenster

Link (einfach mit der Maus über den Banner fahren):

Inns_Web Image-Gloweffekt

 

Bitte die Slideshow Gallery nicht beachten, sie war/ist ein Test…die komplette Seite dient zu Testzwecken.

Der Image-Hover-Gloweffekt ist im Grunde genommen ganz simpel, hierfür muss man lediglich 2 gleiche Bilder erstellen (eines mit- und eines ohne Gloweffekt). Das erste Bild (ohne Gloweffekt) wird als Hauptimage verwendet und bei Mouseover wird das Bild mit dem Gloweffekt aktiviert. Es ist ein simpler Hover-Befehl, der im CSS und natürlich auch im html festgelegt wird.
Damit das Ganze einen Übergang hat und sich der Effekt langsam ein- und ausschaltet, hab ich eine Transition von 0.7s mit eingefügt. Mit Google Chrome funktioniert alles perfekt, Firefox ignoriert die Transition und braucht ein paar Anläufe auch beim Hovereffekt im Menü und den Internet Explorer brauche ich gar nicht zu erwähnen, der hat generell ein Problem bange_smiley…wobei im Groben und Ganzen die wichtigsten Dinge sichtbar sind und glücklicherweise auch die Farben richtig dargestellt werden.
Bin mega froh, dass alles genau so funktioniert, wie ich mir das vorgestellt habe, zumindest mit Chrome!! party_smiley

– Demnächst werde ich an einem Dunkel-Design arbeiten, damit auch jene die lieber dunkelfarbige Seiten mögen, auch ihre Freude an Inns_Web haben können grins_smiley