Einfache Warningbox mit CSS erstellen
Zur Zeit bastele ich eifrig an einem Update für meine Suchfunktion und es gibt da so Kleinigkeiten, mit denen man sich endlos spielen könnte. So zum Beispiel mit der Gestaltung einer einfachen Textbox, die eine Warnung oder einen Hinweis anzeigen soll.
Kennt ihr Replit?
Mir ist das relativ neu und scheint mir ganz interessant zu sein. Man kann damit Quellcode nicht nur teilen sondern auch ausführen lassen. Ganz schön umfangreich, mit KI Unterstützung, was immer man davon halten mag. Ich hab dazu eher gemischte Gefühle.
Wie auch immer, für diesen Beitrag ganz praktisch, das Ergebnis meiner Bemühungen könnt ihr euch unter replit.com/@m3Snippets/WarningBox mit Klick auf run ansehen.
Auch der Quellcode ist verfügbar, nach Klick auf <> kommt ihr in die entsprechende Ansicht:
Sieht einfach aus oder? Das hat man doch in ein paar Minuten! Na ja, fertige Snippets gibt es genug, aber ich wollte doch lieber meine eigenen Boxen basteln um damit die etwas eingerosteten Kenntnisse auffrischen.
Icons von svgrepo.com
Die erste Hürde, wer hätte das gedacht, wo ist ein "schönes" Warndreieck zu finden?
Mein Tipp, unter svgrepo.com gibt es mehr als 500.000 frei verfügbare SVG Vectors und Icons und die Seite ist sehr gut gemacht, wie ich finde. Für dieses hier habe ich mich schließlich entschieden.
Ein Klick auf COPY SVG genügt, und schon hat man den zugehörigen SVG-Code in der Zwischenablage. Es gibt verschiedene Möglichkeiten, diesen SVG-Code in einer Webseite anzuzeigen. Eine davon ist, den Code in einer Datei mit der Endung .svg zu speichern. So habe ich es gemacht, in meinem Beispiel ist das die Datei warning_white.svg die mittels CSS eingebunden wird:
.MsgError::before {
margin-left: -34px;
margin-top: 3px;
content: url('/images/warning_white.svg');
}
Wieso margin-left: -34px;? Die Box hat einen 26px breiten roten Rand plus 10px padding-left, mit einer negativen margin-left von -34px wird die Grafik in den roten Rand positioniert. Ach ja, die Größe des Icons wurde durch Änderung in des SVG-Codes auf 24px eingestellt: <svg width="24px" height="24px" ... </svg>.
Weiter geht's...
Jetzt aber genug vom Quellcode, wer Tipps oder Fragen dazu hat, in den Kommentaren dürfte noch ein Plätzchen frei sein :-)
Ja, vielleicht lässt sich so eine Box noch eleganter zaubern, ich bin damit aber vorerst zufrieden. Irgendwann, es sind noch einige andere Punkte auf der ToDo-Liste, soll das Update ja auch online gehen.
Bis dann...
Ich hab dich nicht vergessen... :-)
Toller Tipp mit replit und vor allem dem svgrepo.
Ich wusste immer nicht, woher ich sinnvolle und zusammenpassende Icons herbekommen soll. Und um alle selbst zu erstellen, fehlt mir nun wirklich die Zeit.
Zum Schluss habe ich die von bootstrap genommen, da ich deren Framework für die Gestaltung nutze, aber ganz glücklich bin ich damit nicht.
Mittlerweile gibt es ja eine unüberschaubare Menge an Tools und Seiten. Insofern sind so ein paar Tipps nicht verkehrt, um die Spreu vom Weizen trennen zu können.
Haha, ich dachte mir schon, dass auf diesen Beitrag wenig bis gar keine Resonanz kommt - hier geht's halt nicht um Titten ;-)
Um so mehr freut es mich, dass du vorbeischaust. Und wenn dir das svgrepo - vielleicht irgendwann einmal - nützlich ist, wunderbar.
Wer ist das schon? :-)
Bringt halt einiges mit, was man nicht braucht, aber so du bist du zumindest auf dem aktuellen Stand, mir gefällt deine Seite jedenfalls gut. Da muss ich noch etwas aufholen ;-)
Da sagst du was! Aus dem Grund habe ich mir, als experimentierfreudiger Anwender, die Browsererweiterung Proton Pass installiert. Damit kann ich mich testweise auf einer Seite anmelden, ohne meine E-Mail zu hinterlassen. In der kostenlos Version sind immerhin 10 Aliases möglich und nen Acc bei proton.me braucht man halt, darüber läuft dann alles. Die Erweiterung habe ich aber nur aktiv, wenn ich das Ding brauche. Obwohl ich denke, das Teil ist ok, hab ich darin keine wichtigen Zugänge gespeichert.
Wenn man genau hinschaut - nein, ich habe hier keine versteckt - wird man entdecken, dass auf dem Steem Hot eine ganz andere Bedeutung hat. ;-)
Da fällt mir ein, dass ich auch noch den nfsw-check (ich weiß nie, wie diese Abkürzung genau heißt) noch einbauen wollte... in DU spielt das ja zum Glück keine große Rolle.
Sowas gibt's!? Das nervt mich ja total, dass man sich immer und überall gleich anmelden muss, um das mal auszuprobieren. Siehste, haste mir mal wieder einen guten Praxistipp gegeben! :-))
Ja, ist ganz praktisch. Hatte erst vor Kurzem eine Anmeldung die mich dann täglich mit News erfreut haben, den Acc konnte man nicht mehr löschen, News abmelden - Fehlanzeige. So war das ein Klick und fertig. Wer weiß, wo die meine Mail noch weiter verteilt hätten.
Bisher gab es nur eine Seite, welche die generierte Mail nicht wollte. Also 100% funktioniert es nicht, wenn jemand die Domain auf seiner Blacklist hat, hat man halt Pech gehabt. War aber bisher, wie schon gesagt, nur einmal der Fall.
Und proton.me ist auch nicht verkehrt, so als Gimmick kann man an jede beliebige Mail verschlüsselte Nachrichten senden.
Du merkst, ich hege eine leichte Begeisterung für das Teil ;-) Ach ja, warum ich keine wichtigen Zugänge darin speichere - soweit ich das verstanden habe, werden die Daten bei proton gespeichert, sind zwar verschlüsselt, aber man weiß ja nie.
Congratulations, you have enabled UVF by @boylikegirl.club
Common UVF commands:
1.uvf_info
Reply any post use "!uvf_info"
Display your UVF information