de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Microtip - CSS Tooltip Library mit nativen Eingabehilfen

Sie können GitHub schnell durchsuchen, um Dutzende von benutzerdefinierten Tooltip-Bibliotheken zu finden. Und es scheint, als würden jeden Monat neue ins Netz gehen.

Microtip ist eine einzigartige Ressource, da es auf reinen CSS-Tooltips läuft, benutzerdefinierte Ästhetik bietet und Quellcode verwendet, der für alle Benutzer vollständig zugänglich ist.

Wenn Sie nie viel über Barrierefreiheit nachgedacht haben, könnte Microtip Ihre Meinung ändern. Es ist die perfekte Mischung aus sauberem Design und Funktionalität für alle Geräte, alle Browser und für Benutzer mit erheblichen Beeinträchtigungen .

Auf der Startseite finden Sie einen Download-Link zur Microtip-Bibliothek sowie eine Reihe von Code-Demos.

Sie können dieses Setup über einen Paketmanager, einen direkten Download oder direkt von einem CDN abrufen. Es kommt mit einer CSS-Datei und das ist alles, was Sie brauchen.

Sobald Sie Microtip Ihrer Seite hinzugefügt haben, können Sie Tooltips zu Seitenelementen hinzufügen. Diese sind vollständig konform mit dem WAI, so dass sie den modernen Zugänglichkeitsstandards perfekt entsprechen.

Hier ist ein Beispiel-Tooltip-Code, der an ein Schaltflächenelement mit einer benutzerdefinierten Position angehängt ist:

Nicht viel Code richtig?

Diese Bibliothek ist superleicht mit insgesamt 1 KB minimiert. Das ist einfach verrückt, wenn man bedenkt, wie viel man mit diesen Tooltips erreicht.

Benutzerdefinierte CSS-Eigenschaften können über HTML-Attribute übergeben werden, um die Schriftgröße, den Übergangsstil, die Beschleunigung und viele andere Einstellungen zu definieren.

Sie können das CSS auch direkt überschreiben, um Tooltipps mit verschiedenen Farben oder Schriftarten zu vergrößern .

Weitere Informationen finden Sie im Abschnitt zur Anpassung auf der Hauptseite. Alles läuft durch HTML und CSS, so dass Sie kein Skriptwissen benötigen, um dies zum Laufen zu bringen.

Microtip ist super einfach einzurichten und anzupassen, wenn Sie also zumindest das grundlegende Frontend-Coding kennen, werden Sie damit zurechtkommen.

Werfen Sie einen Blick auf das GitHub Repo für mehr Setup-Informationen und eine Kopie des Stylesheets.

Wenn Sie Fragen oder Vorschläge für neue Funktionen haben, können Sie auch eine Zeile an den Ersteller auf Twitter @_ighosh senden.

Holen Sie sich Ihre persönliche Cloud mit PClouds

Holen Sie sich Ihre persönliche Cloud mit PClouds

Cloud-Speicher ist unbestreitbar ein sehr wichtiger Teil unseres täglichen Lebens geworden . Jetzt, wo wir über mehrere Geräte verbunden sind, wird der Zugriff auf unsere Dateien überall und überall schnell zu einer Notwendigkeit statt zu einem Luxus.Die Cloud birgt jedoch ihre eigenen Risiken: Sie sind auf einen Server eines Drittanbieters angewiesen, und gerade jetzt besteht immer das Risiko, dass die Vertraulichkeit und Sicherheit Ihrer Daten gefährdet ist . Wenn

(Tech- und Design-Tipps)

Das Gesicht des Webdesigns ändern: Eine Fallstudie von 25 Jahren

Das Gesicht des Webdesigns ändern: Eine Fallstudie von 25 Jahren

Das World Wide Web feierte am 11. März 2014 seinen 25. Geburtstag und im Laufe seiner Entwicklung hat sich auch das Webdesign rasant weiterentwickelt. Wir müssen uns nicht mehr mit endlos klobigen Texten und Bildern mit niedriger Auflösung abfinden. Die heutigen informativen, innovativen und einfach zu navigierenden Websites sind so alltäglich, dass Sie wahrscheinlich vergessen haben, wie Websites in den 1990er Jahren aussahen.Wer

(Tech- und Design-Tipps)