Hallo, Wolfgang, ich habe mal für dich eine dezente Hover Karte gemacht.
Ich hoffe, dass sie dir gefällt. Ich habe versucht sie so schlicht und einfach, nicht so übertrieben zu gestalten.
Ich dachte, sie passt gut zu deinem Forum Design.
Nur schade, dass ich es nicht im Xobor-Forum zum Laufen bekomme. Habe es getestet im Testforum, style normal. Nur ist alles Blau und leuchtet so wie der Rand in der Animation.
Habe schon an den CSS Tags herumgemacht, aber es wurde nur noch schlimmer.
Ich hoffe sehr, dass es dir gefällt. Es war einfach nur eine Idee und eine Inspiration. Ich dachte mir, als ich hier im Forum nachschaute, dass niemand so eine Hover Karte hat. Wollte Dir damit eine Freude machen.
Hallo, Wolfgang ich hoffe ich nerve nicht. Mein bestelltes Netzteil ist gekommen und das habe ich jetzt eingebaut, habe extra einen mit 1000W geholt, jetzt schnurrt mein Rechner wie ein Kätzchen. Ich musste mir ein größeres Netzteil hohlen, da meine 3D-Grafikkarte alleine schon 850W braucht. So jetzt kann ich wieder flüssig arbeiten.
Ich habe jetzt nochmal ein dunkleres Design gemacht, wo innen drin ein Hover-Effekt ist. Ich habe mir jetzt dafür extra ein Tool-Tipp geschrieben, aber bekomme das nicht rein, da zerschieße ich alles. Ich habe irgendwo im Internet gesehen, dass unter einem Bild about stand, wenn man da drübergefahren ist, war es so wie ein Tooltip. Ich wollte das jetzt mal probieren und das selber machen.
Nur ist das Problem, dass das Tool-Tipp zu groß ist. Ich weiß jetzt nicht wie ich das verbinden kann. Teste auf dem PC zwar herum, aber auf CodePen habe ich mein Original gelassen. Wenn ich das jetzt verhaue, muss ich alles nochmal neu schreiben.
Das dunkle Design ist auch etwas schlicht gestaltet und beim Überfahren macht es mittig ein Hover-Effekt. Das war alles eine Idee und Inspiration, dies wollte ich ja auch wenn es fertig ist, hier präsentieren und wer es dann haben möchte, kann es dann benutzen.
Ich schreibe und bastele ja daran weiter. Ich dachte mir, ich stelle es mal halbfertig hier rein, vielleicht hast du ja auch eine Idee wie man das bewerkstelligen kann. Es kann ja jeder seine Idee dazugeben.
Hier das dunkle Design mit dem inneren Hover-Effekt.
Und hier der Tool-Tipp, den ich geschrieben habe: Tool-Tipp!
Hier der HTML Code:
1 2 3 4 5
<div> <h3 class="tool" data-tip="Hier bekommt man immer hilfe und der admin ist sehr nett und Hilfsbereit!"> Treffpunkt für Hilfe, Tricks & Tipps! </h3> </div>
Ich hoffe, du verstehst, was ich meine mit dem "About". Wie gesagt, es war eine Idee und Inspiration, wie man sieht, ist es nicht gerade einfach, Fantasien, Ideen und Inspirationen in der Tat umzusetzen, aber ich versuche es.
Hier hast Du zwei Animationen platziert, eine interessante Randanimation und eine Animation für den Benutzer, hier der Admin! Supergut finde ich es hier, dass die Animation erst mit einem "Mouseover" startet! Ich habe auch einiges ausprobiert, um zu verstehen oder auch zu erahnen, wie die Animationen funktionieren! Ich frage mich, wie man auf so geniale Funktionen kommt. Die Anpassungen allein sind schon starker Tobak! Auf jeden Fall funktioniert Dein Skript im CodePen super!
Was ich geändert habe und was mir aufgefallen ist: Ich habe es hinbekommen, ... mit nur einem neuen Foren-Code!
1
[HoverCard_Wolfgang]
Als erstes habe ich die Body- und Sterncheneinträge herausgenommen und alle Classes umbenannt oder verlängert, damit sie im Forum keinen Schaden anrichten und das eigene Skript durch die Forum-CSS nicht gestört wird!
Da es zwei Animationen sind und beide relativ schnell eingestellt sind, habe ich mich entschieden, die Benutzeranimation zu verlangsamen! Dadurch kann man ganz in Ruhe beide Animationen bewundern!
Ich habe mit den Farben experimentiert und festgestellt, dass die Farben der Rand-Animation nicht zu dunkel gewählt werden darf, da sonst der Effekt kaum zu sehen ist! Habe die Farb-Namen in RGB-Farben umgesetzt, um besser die Farben anzupassen!
Habe der Avatar-Grafik noch eine Rand-Animation und eine Verlinkung zum Profil spendiert!
Damit die Hover Karte auch in allem Templates & Mobil funktioniert waren mehrere "!important" notwendig! Auch die Festlegung der Schriftart und Größe war wichtig!
Die Links haben noch Tooltipps bekommen!
Zu beachten! Etwas besonderes ist ein Umbruch im Forum-Link! Hier funktioniert nur der Tag <br />, komischerweise nicht <br> !
Neu! Die Hover Karte zum Ausprobieren, jetzt mehrfach hintereinander:
Mouseover Hover Karte, Avatar-Grafik und Forum-Link (Jeweilige Animation wird gestartet)
Mausklick Avatar-Grafik (führt zum Profil)
Mausklick Forum-Link (führt zur Startseite)
Installation für alle Templates & Mobil
Das komplette HTML Skript
Neuer Foren-Code
CSS
• Zum Testen und bearbeiten kann das komplette Skript für die Templates (v1-4) in die "Kopf- oder Fußzeile" oder fürs neue V6 & Mobil nach Eigenes Javascript kopiert werden! • Namen, Verlinkungen und weitere Angaben können in den Zeilen 99-107 angepasst werden!
<a title="Zur Startseite" class="hover_effekt" href="/" target="_blank">Der Forum Treffpunkt für <br />Hilfe, Tricks & Tipps!</a> </div> </div> </div>
Schließen
Der neue Foren-Code für die Hover Karte kann beliebig in Beiträgen platziert werden! Als Signatur ist sie wegen der vertikalen Ausrichtung nicht zu empfehlen!
Iconbar aufrufen.
"Neue Icons hinzufügen" anklicken.
Reiter Forencode anklicken.
Erweiterten Foren-Code ausblenden!
Werte eingetragen und speichern!
Neues Icon an die richtige Position verschieben!
Ersetze:
Man kann auch weitere Hover Karten für Moderatoren oder besondere Mitglieder mit z.B. [Meier], [Müller, [Schulze], u.s.w. erstellen!
1
[HoverCard_Wolfgang]
Mit:
Hier müssen alle DIV-Container und Tags in einer Reihe eingetragen werden! Die Namen, die Links und die Linkbeschreibungen muss der entsprechenden Hover Karte angepasst werden! Umbrüche im Forum-Link mit <br /> umsetzen!
So, ich habe weitergearbeitet und geschrieben. Ich finde, so sieht es schon gut aus. Hatte mal eine Pause gemacht und etwas gegessen und 1 Kanne Kaffee getrunken und dabei überlegt, wie ich das so hinbekomme.
Musste im Internet für das Bild extra schauen, wie ich die Bildgröße per CSS-Code ändern kann. Also nicht wundern, wenn es in der CSS so chaotisch und nicht ordentlich aussieht. Bin froh, so wie ich es haben wollte, ist es jetzt.
Ich habe meinen CSS-Codes für die Tool-Tipps hinbekommen, ich kam ganz schön ins schwitzen. Ich hatte es ein paar Mal zerschossen. Bin froh, dass ich es so weit hinbekommen habe, für mich passt es jetzt.
Den Tooltip Text habe ich so gelassen. Kann man ja ändern.
Ich hatte ganz schön zu tun, habe aber meine Idee und Inspiration und Fantasy hinbekommen und mit Mühe, Angst und schwitzen hinbekommen.
Ich danke dir @Wolfgang für deinem Rat, wenn ich es nicht sofort hinbekomme, eine Pause zu machen. Ich rauche eine Zigarette. trinke Kaffee und denke in Ruhe nochmal nach und denke an die oberste Regel, setze dich nicht so unter Druck.
Das hat mir geholfen, ich setze mich selber immer unter Druck, will es ja auch hinbekommen. Wie man sieht, helfen alle deine Ratschläge.
</div> <center><h3 class="tool" data-tip="Hier bekommt man immer hilfe und der admin ist sehr nett und Hilfsbereit!"> Treffpunkt für Hilfe, Tricks & Tipps! </h3></center>
Für das Xobor-Forum, wie immer bekomme ich es leider nicht hin. Habe schon ein schlechtes Gewissen, wegen Wolfgang, weil er meinetwegen so viel Arbeit hat.
Erst mal danke für das Lob aus Beitrag #2 und Beitrag #4. Ich finde das ich selbst nicht so gut bin, ich schaue immer im Internet nach wie und was man alles mit der CSS machen kann.
Wie ich schon erwähnt habe, ist CSS eine sehr mächtige Sprache, damit kann man echt sehr viel tun, allerdings findet man auf den deutschen Seiten von CSS arg wenig.
Ich schaue mehr auf den amerikanischen und mexikanischen Seiten mit CSS-Tipps und Anleitungen an. Da sind Aufgaben, die man selbst lösen muss. Ich finde sowas echt sehr gut, wenn ich etwas nicht weiß schaue ich nach.
Ich bin ja mit meinen Arbeiten soweit zufrieden und mit CodePen auch. Habe mich da sehr gut eingearbeitet, ich habe auch andere Programme ausprobiert, wo man HTML und CSS und Javascript schreiben kann, komme mit denen nicht klar. Dann hatte ich CodePen ausprobiert, einfach genial. Es zeigt alles live an, was man machst, einfach top. Bei den anderen Programmen musst du extra eine Webseite öffnen, um zu sehen wie es aussieht.
Was mich nur stört ist, dass ich es hier für das Xobor-Forum nicht hinbekomme. Ich habe es schon versucht, aber ich raffe das nicht.Ich gebe zu ich habe ja selber Lernschwierigkeiten, das kam ja, weil ich als 12-Jähriger einen Zeckenbiss hatte, der sich entzündete, ich sehr schwer krank wurde und eine sehr schwere Hirnhaut Entzündung hatte. Ich lag 2 Jahre im Krankenhaus, wie gesagt, ich habe ein Attest, habe kein Schulabschluss, kein Schulabgang, keine Lehre, kein Führerschein, weil ich die schriftlichen Sachen nicht schaffe.
Aber ich war handwerklich immer gut begabt. Viele sagten, dass es das nicht gibt, dass ich immer Arbeit hatte ohne Irgendwas. Ich habe immer gesagt, wer Arbeit will, bekommt auch Arbeit. Der Nachteil ist halt, man bekommt weniger Lohn. Aber ich sage mir, Hauptsache ein Dach über den Kopf, das reicht mir. Also so gesagt, ich arbeite mein Leben lang, dass es für die Miete, Strom und Nebenkosten reicht. Grob gesagt, ich gehe arbeiten nur für die Miete und Nebenkosten.
Und das mit den Skripten mache ich, weil es mir Spaß macht, es interessiert mich. Es macht auch Spaß etwas zu machen, wenn es fertig ist und funktioniert. Ich schaue mir manchmal Webseiten an oder hier im Forum und lasse mich von Wolfgang inspirieren. Er arbeitet so gut, ich sagte mir, das will ich auch, also brachte ich es mir selbst bei. Jetzt, dass ich so viel Lob bekomme, bin ich nicht gewohnt.Ich wollte jetzt nur mal so von meiner Seite aus sagen, wie ich das finde.
So ich denke, ich habe jetzt genug Information über mich preisgegeben, mit meinen Sprachfehlern, den Beschreibungen, mit der Grammatik, Erklärungen und Einschränkungen. Ehrlich gesagt habe ich wirklich ein schlechtes Gewissen, das Wolfgang meinetwegen so viel Arbeit hat, es umzuschreiben oder neu zu schreiben, dass es hier im Xobor - Forum geht.
So hier das Bild. Habe mal an meiner Hover-Karte herumgeschraubt. Ich finde es so weit passend für mich.
Ich dachte, die ein dunkles Design haben, können sich das von der CSS abschauen für die Rand-Effekte und mittig bei der Admin Effekte, die zwei Balken.
Ein riesengroßes Lob nochmal an dich @Wolfgang, für die tolle Arbeit, die du machst und dass alles so mit links einfach umsetzt. Mega Lob an dich.
Wie schon gesagt, ich freue mich über Deine Beiträge! So viele Idee und Vorschläge hat noch keiner in der Form abgeliefert!
Da bist Du der Spitzenreiter! Und hier nochmal ein extra Lob und den Pokal für den 1. Platz!
Trotzdem, eine kleine Bitte von mir.... Ich würde mich freuen, wenn Du Dich nicht verausgabst... Es sollte schon Spaß machen mit dem, was wir in unserer Freizeit tun, und es sollte nicht in Stress ausarten, denke ich!
Für Daishi, der CSS-Pokal
Nochmal daran erinnert:
Das Forum ist auch dazu da, um Hilfe, Ticks und Tipps zu bekommen und jeder ist mit seinen Ideen und Vorschlägen herzlich willkommen! Ich denke, dass viele von diesen Beiträgen auch andere User für ihre eigene Homepage nutzen können! Du brauchst also kein schlechtes Gewissen zu haben. Ich setze gerne Deine Ideen ins Forum-Design um, so wie ich es zeitlich hinbekomme! Wie Du schon gesehen hast, klicke ich dann den folgenden Button an: "Beitrag wurde gelesen, ist in Arbeit!" !
Da ist noch eine Hoverkarte 2 und die Tooltipps aus Beitrag #3 offen!
Ich habe für mich festgestellt, dass zu viele Animationen in einer Darstellung sehr unruhig wirken! Auf welche Animation soll man zuerst schauen? Die Schnelligkeit ist auch ein wichtiger Bestandteil, muss finde ich, gut geprüft und getestet werden! In der Hover Karte 2 sind Schrift und Hintergrund animiert und das in mehrfachen Stufen! Hier fangen die Animationen auch an zu "ruckeln"!
Installation für alle Templates & Mobil
Die Hover Karte zum Ausprobieren:
WolfgangAdministrator
Funktionen der Hover Karte testen:
Mouseover Hover Karte und Avatar-Grafik (Jeweilige Animation wird gestartet)
Mausklick Avatar-Grafik (führt zum Profil)
Was habe ich geändert, damit es im Forum läuft!
Der "Body-Eintrag" kann aus der CSS genommen werden, da der Hintergrund durch das Design des eigenen Forums bestimmt wird!
Habe mich auf die Hintergrund-Animation beschränkt, sie minimiert und die Text-Shadow-Animation herausgenommen!
Das Avatarbild wird durch ein Mouseover animiert und führt mit einem Klick zum Profil
Wird die Avatar-Grafik klein gehalten, kann sie gut als Signatur verwendet werden!
Der HTML Code mit CSS für die Hover Karte 2:
• Zum Testen und bearbeiten kann das komplette Skript für die Templates (v1-4) in die "Kopf- oder Fußzeile" oder fürs neue V6 & Mobil nach Eigenes Javascript kopiert werden! • Namen, Verlinkungen und weitere Angaben können in den Zeilen 47-51 angepasst werden!
Die Tooltipps: Zu den Tooltipps gibt es viele Skripte im Internet! Auch hier im Forum habe ich mich den Tooltipps gewidmet! Bevor man eine Version der Tooltipps installiert, sollte man sich Gedanken über die Funktionen machen!
Wie sollen die Tooltipps aussehen, klein oder groß und auffällig, eher eckig oder rund?
Sollen die Tooltipps HTML- oder BB-Codes umsetzen können?
Sollen die Tooltips sich mit der Mouse verschieben oder fest stehen?
Bitte mit der Maus drüberfahren!
Der Treffpunkt für Hilfe Tricks & Tipps
Der Treffpunkt für Hilfe!
Der Treffpunkt für Tipps
Hier eine kleine abgewandelte Variante von Daishi's Vorschlag:
Die Tooltipps werden von unten angezeigt!
Sie sind klein gehalten, mit abgerundeten Ecken!
Sie können der Einfachheit wegen keine HTML-Codes umsetzen!
Kein JavaScript erforderlich!
Das komplette HTML Skript
Neuer Foren-Code
CSS
Einbau in die Iconbar
Zum Testen und bearbeiten kann das komplette Skript für die Templates (v1-4) in die "Kopf- oder Fußzeile" oder fürs neue V6 & Mobil nach Eigenes Javascript kopiert werden!
Weitere Tooltipps müssen class="tool" enthalten und unter data-tip=" ... " wird der Tooltipp-Text eingetragen (siehe Zeile 39)!
Update: Hover Karte 1 fürs Forum - Mehrere Hover Karten nebeneinander!
Hallo Daishi, Du hast mich gefragt, wie man die Hover Karten in Beitrag #4 nebeneinander platzieren kann. Habe da etwas gefunden!
Wie geht es?
Es sind zwei Änderungen notwendig!
1. Änderung:
Das funktioniert gut mit "display: inline-block" für den äußeren DIV-Container ".hover_card"! Leider ist hier schon "display: grid" verbaut. Wenn man "display: grid" gegen "display: inline-block" austauscht, müssen die Werte in der Class ".hover_card::before" und die Zeit in .hover_card:hover::before korrigiert werden!
2. Änderung:
Vor und hinter den Hover Karten darf kein Umbruch-Tag wie <br> stehen, sonst wird "display: inline-block" unwirksam!
Somit ändert sich der neue Foren-Code (<br> Tag fällt weg!) und der CSS-Eintrag! Habe alles in Beitrag #4 aktualisiert!