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...
