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 🙂

Javascript: onmouseover – Banner wechselt Hintergrundfarbe

Heute hab ich ein bisschen mit dem Javascript-Befehl „onmouseover“ herumprobiert. Mit jenem Befehl kann man beim Darüberfahren mit der Maus, diverse Änderungen vornehmen, ähnlich wie mit dem Hovereffekt. In meinem Fall hab ich ein Blockelement (div) mit einer ID erstellt und innerhalb dieses Blockelements ein weiteres Div mit einem transparenten background-image eingefügt. Den Onmouseover-Befehl fügte ich dann in einem Inlineelement (span) im Hauptmenü ein, von wo aus der entsprechende Effekt dann startet 🙂 Der Banner wechselt Farbe, indem man über die Themen bzw. Punkte im Hauptmenü fährt.

Hier ein kleiner Einblick:

Das Submenü ist zwar noch ein bisschen schief, aber darum ging es mir zunächst mal nicht, ich wollte lediglich mal gucken, ob der Farbwechsel auch mit onmouseover funktioniert und es hat geklappt 🙂



Javascript: onclick Menu – Banner wechselt Farbe!

So, nun hab ich ein bisschen geübt und konnte ein ScaleY-Menu erstellen, durch den sich bei onclick die Farbe des Banners ändert 🙂
Das ist cool, denn somit könnte man nicht nur die Farbe-, sondern auch das Bild per Mausklick ändern…muss nur noch gucken wie der Befehl lautet 😀
Hammer!



Wochenende

Dieses Wochenende war ich recht fleißig, ich habe viel geübt und mir das YScale-Menü im Groben und Ganzen eingeprägt, ich kann es vom Kopf heraus niederschreiben. Ein paar Fragen dazu hab ich noch, weil es mir nicht so ganz gelingt es der Vorlage entsprechend identisch nachzubauen, insofern ich sie nicht kopiere^^
Doch ich bin zufrieden, mehr Zeit hatte ich leider nicht. Aber ich werde die nächste Zeit immer daran arbeiten, denn ansonsten vergesse ich wieder alles und demnächst hab ich ja ein paar Tage frei, die ich diesbezüglich gut nutzen werde 🙂

Donnerstag – :-)

Heute hab ich mir, bezüglich meines Projektes, ein Feedback vom Profi geholt und ich bin echt froh darüber, dass es passt und nur zwei, drei kleine Dinge abgeändert werden sollten. Ich hatte bspw. dem <nav> Hintergrund eine andere Farbe zugeteilt, als dem Menü selbst, was irgendwie störend auf das Responsive-Design wirken könnte. Mein <hr> Image sollte ich auslaufen lassen und unter die Hauptüberschrift einen Slogan oder eine Kurzbeschreibung setzen. Ach ja… und das Menü in die Mitte, statt rechtsseitig setzen – auch immer in Bezug auf Responsive-Design-.
Demnächst werde ich mich auf jeden Fall dransetzen, doch zunächst möchte ich es hinbekommen, alles vom Kopf heraus zu schreiben, denn nur so werde ich auch jeden Schritt – den ich vornehme – verstehen und mir diesen gleichzeitig auch einprägen können. Das ist mir sehr wichtig!
Bis Dienstag sollte das sitzen, ich drücke mir mal die Daumen xD
Öhm…ES MUSS!




Wochenende

Am Wochenende möchte ich an meiner Projektseite arbeiten und diese – erneut – komplett umbauen. Ich weiß nicht warum das so ist, aber ich schaffe es nicht ein Projekt zu beenden…ich fange immer wieder von vorn an, doch diesmal sollte es der schlussendliche Entwurf sein. Dasselbe gilt auch für meine Bilder, ich könnte keines meiner Bilder nennen, welches wirklich beendet ist…ich übermale sie immer wieder…bzw. bessere sie aus.
– Ich lerne laufend Neues hinzu, weswegen ich stetig an meiner Seite arbeiten- bzw. diese umbauen muss. Ideen habe ich sehr viele und verliere mich häufig an den Effekten, die ich einbauen möchte. Das Menu – welches ich für meine Seite verwendet habe – finde ich recht cool und bin im Grunde genommen auch ziemlich zufrieden damit, was die Optik, sowie auch den Mouseover-Effekt betrifft. Doch da es sich bei jener Navi um eine Javascript-Navi handelt, möchte ich sie komplett ändern und etwas Ähnliches mit einer simplen – aber schönen – CSS-Variante versuchen, da ich diese nun auch kenne. Bei der Optik, bzw. den Farben bin ich mir noch unsicher…ich möchte sie jedoch eher dunkel halten oder eine Hell- und Dunkel-Möglichkeit anbieten, denn wenn ich der Mittelpunkt dieser Seite sein soll, dann muss sie auch farblich auf mich abgestimmt sein.
– All dies, was ich in den letzten Unterrichtsstunden gelernt habe, öffnet so verdammt viele Experimentiermöglichkeiten, dass ich es kaum abwarten kann, daran zu arbeiten. Es gibt so viele, wirklich simple Befehle, die man locker in X unterschiedliche Fabrikationen umfunktionieren kann.
Nehmen wir meinen Sternenhimmel her, der lediglich aus Zeichen (Text) und Texteffekt besteht. Beim Ufo hingegen, handelt es sich um ein transparentes png, welches ebenfalls mit kleinen Animationen versehen wurde. Was ich sagen will ist, dass man mit einfachen, kurzen Befehlen sehr viel erreichen kann und je einfacher eine Seite aufgebaut ist, umso besser ist es. Deswegen möchte ich meine Projektseite neu beginnen, weil ich sie einfach aber effektreich gestalten- und auch komplett selbst aufbauen möchte, ohne groß zu kopieren.
Jo, leider ist es schon spät, deswegen werde ich mich, wohl oder übel, hinlegen müssen. Ich freue mich jedoch auf morgen 🙂

GEWONNEN! 1. PLATZ!! =)

Mein Sternenhimmel hat gewonnen =)

Ich bin äußerst glücklich darüber, dass unser Trainer meinen Himmel als Gewinneranimation ausgesucht hat, denn das wollte ich natürlich auch erreichen 🙂


😀 nö, es war nicht die Belohnung, die mich anspornte, an diesem Himmel zu arbeiten, es ging mir mehr darum zu erreichen, dass er gefällt …es war eine schöne Aufgabe 🙂

…wobei ich die beiden 2. auch super fand und wirklich gerne an dieser Animation gearbeitet habe. Es hat echt Spaß gemacht, es ist mein, eigens programmierter, kleiner Sternenhimmel – mit Ufo -…abgesehen vom kleinen Flugzeug, welches am untersten Rand des Himmels vorbei schwebt und den beiden – wunderschönen – Sternschnuppen, die den Mond überkreuzen, die ich in einen X-förmigen Verlauf umfunktionierte.
Es war wieder ein informativer und schöner Kursabend!

Ich hoffe, dass ich demnächst endlich mit meinen Projekten loslegen kann, denn ich freue mich- und warte schon lange darauf, endlich wieder Zeit dafür zu haben.

HTML/CSS – Sternenhimmel

Mein schimmernder Sternenhimmel ist fertig. Ich bin zufrieden damit, obwohl ich einige Sterne mehr auf dem Himmel haben wollte, doch im Groben und Ganzen gefällt es mir. Ich kann ja noch weiter daran arbeiten 😉

xD

Das waren noch Zeiten…xD als die Stars die Bühne im Pyjama bzw. Nachthemd betraten 😀

Javascript

Bin gerade wieder dabei mit Javascript anzufangen. Ich hatte ja schon mal damit begonnen, aber dadurch, dass ich über einen längeren Zeitraum hinweg aufgehört hatte zu lernen, muss ich nun wieder von vorn beginnen, weil ich mittlerweile alles vergessen habe 😀 … wobei das nicht schlimm ist, weil ich damals nur Übungen zu den Variablen und Arrays gemacht hatte:

Javascript Zusammenfassung

Ich war nicht weit gekommen, daher ist dies nicht wirklich schlimm^^
Doch da wir im März mit Javascript beginnen, möchte ich zumindest ein bisschen etwas davon können. Mal schauen wie weit ich komme^^

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.

Marathon xD

Ich hab einen programmier-Webdesign-Marathon hinter mir 😀
DO: 23:00 Uhr – 04:00 Uhr
FR: 20:00 Uhr – 04:00 Uhr
SA: 10:00 Uhr – 05:00 Uhr
SO: 12:00 Uhr – 07:00 Uhr

…es macht (leicht) süchtig! xD 0.o

Lol, das war wieder was, doch ich bin mit dem Ergebnis zufrieden, irgendwie brauchte ich ewig für die Optik, ich konnte mich nicht entscheiden. Am Ende hatte ich den Menü-hover-Banner entfernt und ein cooles, animiertes Menü eingefügt. Der Banner hingegen verfügt nun über einen Hovereffekt, bei dem das 2. Bild über dem 1. Bild langsam eingeblendet wird. Es sieht cool aus, die Arbeit hat sich gelohnt 🙂

Die 2. Seite konnte ich nicht ganz fertigstellen, doch ich habe buttons und einen Entwurf angefertigt, sodass ich gegebenenfalls heute gleich loslegen könnte. Ich freue mich schon! 🙂

Yeah!

Hahaaaaaaaa, wie geil!

Mit den heutigen Übungen im Kurs konnte ich endlich verstehen wo mein Fehler im html lag. Ich hatte ja in all meinen Seiten immer das Problem, dass mir häufig CSS-Befehle nicht angenommen wurden und irgendwie war niemanden so klar wo das Problem lag.
Da ich heute wieder leicht am Ausrasten- und nahe dran war den PC anzuschreien, rief ich unseren Trainer zurate. Auch er war anfangs ratlos, doch nach ein paar Minuten hatte er die Lösung. Das Problem lag an diesem Befehl im Kopfbereich:

<link href="style.css" rel="stylesheet" type="text/css">

Der schlussendlich so lauten musste:

<link href="style.css" rel="stylesheet">

Boa ey, jetzt kann ich echt all meine Seiten umschreiben, ABER ich hab endlich verstanden was ich ändern muss!
…noch 3 Tage und ich hab Urlaub :D…da gehts dann ab! Gehege bauen und htmllllllllllln ;-P =)

UND ….EIN NEUER PC MUSS HER!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

und…gameguruuuuun!!!