Ich habe mal eine kleine digitale Visitenkarte mit dem Programm "Codepen" soweit erstellt. Mit dem Programm komme ich recht gut klar. Ich habe mich jetzt an Wolfgangs Rat gehalten und etwas abgeändert. Ich habe die Namen der CSS-TAG's verändert. Ein Problem habe ich, wenn ich das "body" auskommentiere, dann geht nichts mehr. Wenn ich den kompletten "body - Code" entferne geht auch nix mehr. Ich habe den "body - Code" drin gelassen. Habe es auf dem 2. Testforum getestet, geht dort fehlerfrei, ist keine Veränderung am Xobor-Forum-Style festzustellen. Ich musste auch am Link von "stylesheet" "text/css" auch den CSS-TAG's verändern.
Hier eine kurze Einleitung, wenn man die "Digitale Visitenkarte" haben möchte und bearbeiten möchte:
Eingaben werden im HTML Code eingegeben.
Der Name der auf der Vorderseite erscheinen soll muss in Zeile 6 eingegeben werden. Ein kleiner Tipp und ein guter Rat, der Name darf nicht zu lang sein, sonst sieht es grauenhaft aus. Habe ich schon getestet.
Ab Zeile 13 beginnt die Rückseite der "Digitale Visitenkarte".
In Zeile 14 kommt der Name rein.
In Zeile 15 kommt die Beschreibung rein, die etwas länger sein kann, weil dafür mehr Platz vorhanden ist.
Zeile 16 und 17 ist der Kontakt.
In Zeile 16 kann man die Telefonnummer eintragen. Ich habe da nur 123-456789 eingetragen. Aufpassen bei der Eingabe, bitte einfach die "123-456789" markieren und mit eurer Nummer ersetzen. Wenn ihr die UC Hex.: Die numerische Unicode-Notation (Hexadezimal) "☎" davor löscht, ist das Telefonsymbol weg.
In Zeile 17 kann man die Email-Adresse angeben. Ich habe es so angegeben: "mailto:kontakt@website.de">kontakt@website.de. Rot markiert ist eure Email-Adresse, und Blau markierte ist euer Name oder ein Phantasy-Namen. Das blaue verschleiert eure Email-Adresse, da sieht man später nur das, was man Blau markiert ist.
Wer noch Veränderungen mit den Augen haben möchte, dass man sie auf der Vorderseite stärker sieht, kann man sie im CSS Code bearbeiten.
Man geht wie folgend vor, man geht in den CSS Code, dann zur Zeile 88, ändert den hinten Eintrag ".03);". Man kann es bis zur Zahl 50 ändern. Ich habe es auf "08" gestellt, ist angenehmer für die Augen. Kann man unten über den Link, im Testforum sehen. Man kann es auch stärker stellen, ist Geschmackssache, ich mag es eher decent, also schlicht.
Hallo Daishi, interessante Visitenkarte, schöner Effekt! Die Visitenkarte dreht sich horizontal beim Mouseover und man kann dann die Rückseite der Visitenkarte lesen, funktioniert super!
Was mir aufgefallen ist:
Die Lesbarkeit der Visitenkarte ist nicht gut, die Schrift und der Email-Link ist zu dunkel!
Das Skript ist für den Effekt ziemlich groß, greift auf eine externe CSS, auf eine externe Schrift und auf ein externes JavaScript zu!
Der "body", das Sternchen (*) und "a" verändern im großen Maße das Forum-Layout!
Das folgenden Skript ist minimiert und greift auf keine externen Dateien und Skripte zu! Die Schriften auf der Visitenkarte sind deutlicher zu sehen, wie alles, Geschmackssache!
Vorderseite der Visitenkarte
Rückseite der Visitenkarte
Funktioniert in allen Templates & Mobil
Was habe ich geändert:
Ich habe den Body-Eintrag auf den ersten Div-Container gelegt und angepasst!
Durch die externe CSS und das JavaScript wurden die Augen erzeugt. Habe sie durch Grafiken ersetzt!
Habe die externe Schriftart herausgenommen und "lucida handwriting" genutzt!
Musste "grid-area" ändern, damit die Visitenkarte auch im V6 richtig angezeigt wird
Habe "var(--...);" herausgenommen und die Werte direkt eingetragen!
Wichtig! Die Größe der Visitenkarte kann beliebig in Zeile 5+6 bestimmt werden!
Die Helligkeit der Augen lässt sich jetzt in Zeile 51 verändern (1-10)
Die Schriftarten lassen sich in Zeile 33, 71, 80 + 88
Mouseover-Farbe für die Email-Adresse kann in Zeile 95 angepasst werden!
</div> <div class="card4-back"> <div>Christian Loreth</div> <position>Hausmeister Service und Dienstleistungen aller Art - Fürs Haus, für Hof und Garten</position> <contact>☎ 123-456789<br> ✉ <a href="mailto:kontakt@website.de">kontakt@website.de</a></contact> </div> </div>
Hallo Daishi, ich möchte hier Deine bemerkenswerte Visitenkarte präsentieren, die ich etwas abgewandelt habe!
Wie groß darf eine Visitenkarte sein, kann sie als Signatur genutzt werden?
Möchte man die Visitenkarte unter den Beiträgen oder als Signatur nutzen, muss sie groß ausfallen, damit man sie lesen kann, wie in Beitrag # 2! Ist sie zu groß, kann sie allerdings stören, ist zu auffällig und nimmt viel Platz ein. Ist sie zu klein, kann man nur wenig Informationen weitergeben!
Mit der folgenden Lösung ist beides möglich!
Die Vorderseite der Visitenkarte wird klein angezeigt. Mit einem Mouseover wird die Visitenkarte gedreht und man sieht die große, informative Rückseite! Interessante Visitenkarte, schöner Effekt! Wird ein Foren-Code erstellt, kann die neue Visitenkarte leicht unter Beiträgen oder als Signatur eingetragen werden!
Neuer Foren-Code (Gut einsetzbar als Signatur unter Beiträgen):
[Signatur1]
Vorderseite der Visitenkarte
Rückseite beim Mouseover
Funktioniert in allen Templates & Mobil
Das komplette HTML Skript
Neuer Foren-Code
CSS
• Zur Übersicht oder zum Einbau in eine HTML-Seite. • Zum Testen 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 und weitere Angaben in den Zeilen 119, 128, 129, 132 - 134 können beliebig ausgetauscht werden!