Bild per Klick vergrößern: JS & CSS

Bin gerade dabei, eine einfache Foto-Gallery vom Kopf heraus zu schreiben.
In diesem Fall sind es verlinkte Images, die mittels hover, den border-radius langsam mit einer transition ändern und zusätzlich noch Farbe wechseln.

Momentan öffnen sich die Bilder im neuen Fenster (_blank), doch ich möchte nun versuchen mittels Javascript, die Bilder im Popup zu vergrößern, per onclick natürlich. Mal sehen, ob ich das hinkriege!

YES!!!!

Es hat geklappt!!! Wow, ich finds echt hammer 🙂

Buttons

Am Wochenende hatte ich ein paar Buttons angefertigt, die mittels Hovereffekt Farbe wechseln-, eine Überschrift sichtbar machen- und gleichzeitig nach oben springen sollen. Heute werde ich sie testen und gucken, ob man noch zusätzlich einen Gloweffekt anbringen kann. Ich bin schon gespannt darauf und hoffe natürlich, dass sie auch gut aussehen werden. Nur schade, dass mein geliebter ❤ Hovereffekt auf Smartphones und Co. nicht sichtbar ist, doch darauf sche*** ich jetzt mal, weil wichtig ist mir momentan mal die Desktopseite. Der Rest wird dann angepasst.

Menü mit Hover-Bilderwechsel

Gestern wollte ich mal schauen, ob es möglich ist eine Slideshow so abzuändern, dass man die Bilder mittels eines Menüs mit Hovereffekt aktivieren kann.
Ich hatte ganz übersehen, dass die Slideshow mit Javascript funktioniert, wodurch ich es dann sein gelassen habe. Es war zwar möglich „onklick“ einfach mit „onmouseover“ zu tauschen, aber die dots konnte ich nicht in ein Menü abwandeln.
Nichtsdestotrotz konnte ich einen Banner erstellen, der über das Menü die Bilder wechselt.
Hier mein Testbeispiel:

Schwer tue ich mich nun, die komplette Seite zu zentrieren und auch das Menü etwas mehr rechts vom Bild zu haben….aber ich werde mich weiter üben^^ Eigentlich wollte ich es rechts unter dem Bild haben, aber irgendwie will es noch nicht so wie ich mir das vorstelle^^ Doch ich bin froh, dass ich zumindest nahe an meiner Vorstellung dran bin 😀
Natürlich muss auch noch der leere Banner etwas an Farbe gewinnen. Er wird sich noch ändern, es war lediglich mal ein Test.

Inns_Web Dunkeldesign

Für Diejenigen (wie bspw. mich)schüchtern_smiley, die lieber dunkle Websites mögen, habe ich nun auch ein Dunkel Design erstellt. Denn ich fände es recht angenehm, wenn es auf jeder Seite so einen Button geben würde, der den Wechsel auf ein dunkles Design ermöglicht.

Inns_Web Dunkel Design

Nichtsdestotrotz möchte ich betonen, dass dies nur eine Testseite ist, die mir als Übung dient. Wie sie dann aussehen wird, entscheidet sich, sobald ich diesen Fachlehrgang besucht habe und Webdesigner bin.

Hier ein paar Bilder zum Dunkel Design:

Html/CSS: Banner mit Lichteffekt

In den letzten Tagen war ich lange am Rumprobieren. Eigentlich wollte ich ein Logo entwerfen, blieb aber schlussendlich beim Banner stehen. Beim Entwurf eines Logos tue ich mich echt schwer, weil sie eben eher schlicht gehalten werden müssen. Außerdem muss das Logo auch in kleinster Größe erkennbar sein… es ist nicht leicht. Naja, aber den Banner finde ich echt cool, wobei er noch nicht fertig ist. Er hat jedoch schon eine goile Eigenschaft, es geht das Licht an, sobald man mit der Maus darüberfährt 😀  Eine witzige Spielerei, die mir gestern auf Anhieb gelungen ist, ohne nachgoogeln zu müssen, mhmmm 🙂 ^^
Echt mega, ich liebe es..ich könnte von früh-morgens bis spätabends an dieser Seite herumexperimentieren, es ist mega cool. Ja, heute werde ich den Banner noch ausarbeiten und dann mit dem Logo beginnen.

hier mein Lichteffekt-Banner:

Inns_Web 

Man kanns natürlich auch noch steigern xD

wobei ich dieses Beispiel hier eher zum Spaß gemacht habe. Es ist ein einfacher Banner mit Hover-Effekt, also 2 Bilder die mittels Mouseover aktiviert werden 🙂

HTML/CSS: Menü funktioniert! =)

So, jetzt hab ich es endlich geschafft, dass mein Menü nicht zusammenbricht, sobald das Browserfenster verkleinert wird. Ich hätte noch gerne auf jedem Button ein Icon, doch bei längerem Linktext, wie bspw. „Impressum“ rutscht der Text immer unter den Button. Ich hab zwar herausgefunden, wie ich mein Icon positionieren kann, doch es haut irgendwie nicht hin, dass alle Icons mit Schrift einheitlich positioniert sind. Aus diesem Grund gibt es nur das Home-Icon 😀

hier der Link zur Seite:

Dams

– Der Banner muss noch ausgeschmückt werden, außerdem möchte ich noch ein weiteres Menü einsetzen, allerdings anders positioniert und dann müsste ich noch gucken ob es senkrecht oder ebenfalls horizontal erscheinen soll.
Der Name der Site (Dams) ist auf jeden Fall noch wandelbar, denn den Namen gibt es schon…es ist alles noch wandelbar und dient einfach nur dazu, ein Gefühl für html und CSS zu bekommen. Es gibt noch Vieles zu lernen, leider ist das Tutorial nun fertig, ich finde es schade, dass Macjo nicht weitere Tutorials hochgeladen hat, da er wirklich gut und verständlich erklären kann.
Es gibt sicherlich noch x weitere Youtuber, die ähnliche Tutorials anbieten, doch mir wäre es lieber gewesen weiterhin von ihm zu lernen.