So erstellen Sie CSS-benutzerdefinierte Callouts

Dies ist eine Fortsetzung des kürzlich veröffentlichten Beitrags "Erstellen Sie ausgefallene Callouts mit leichtem CSS", der von einem kürzlich durchgeführten Kalenderprojekt inspiriert wurde, das die Anforderung eines Callouts für Bilder und Ankerverknüpfungen enthielt, die den Inhalt mit Abständen formatieren würden, Einrückung, Ausrichtung, Schriftstil und Position. Dies führte mich dazu, einen einfachen, aber ausgefallenen Callout / Tooltip zu erstellen, um die Standardattribute alternativ (alt = "") oder title (title = "") für Bild- und Ankertags zu ersetzen. Das Überraschende an diesem und dem leichten Hinweis ist, dass es überall auf der Seite und in nahezu jedem Browser funktioniert!

Ein Hinweis zur Verwendung dieser Art von CSS-Funktionalität ist, dass sie das semantische Markup innerhalb des Codes einschränkt und auch die Barrierefreiheit, insbesondere für Bildschirmleser, vor Herausforderungen stellt. Seien Sie vorsichtig, wenn Sie diese Techniken in Ihrem Code anwenden, und testen Sie wie immer Ihre Änderungen, bevor Sie sie in Ihre Produktionsumgebung anwenden.

In diesem Tutorial werde ich das Erstellen von benutzerdefinierten Callouts basierend auf den inhaltlichen und schwerwiegenden Inhaltsstufen sowie einige für soziale Netzwerke überprüfen. Die benutzerdefinierten Beschriftungen verwenden auch mehrere Symbole für Bild-PNG-Dateitypen, einschließlich der Kategorien "Kritisch", "Hilfe", "Informationen" und "Warnung" sowie Symbole für soziale Medien wie Facebook und Twitter.

Browser-Akzeptanz

Die Demonstrationswebseite, die den Aufrufcode für dieses Lernprogramm verwendet, wurde in den folgenden Browsern mit großem Erfolg getestet. Die einzigen Ausnahmen sind mehrere CSS3-Eigenschaften in IE8:

  • Firefox 11.0
  • Google Chrome 23.0.1271.97 m
  • Internet Explorer 8 (Rahmenradius und Kastenschatten werden nicht unterstützt)
  • Opera 12.5
  • Safari 5.1.5

Der HTML-Code

Der HTML-Code ist den Beschriftungen im vorherigen Lernprogramm ziemlich ähnlich, mit der Ausnahme, dass der Tooltip-Teil entfernt und durch die benutzerdefinierten Symbolbilder ersetzt wurde. Das Beispiel-HTML-Code-Snippet für den Aufruf "Kritisch" wird unten angezeigt:

Kritisch

Dies ist ein Beispiel für eine kritische

 Dies ist der angepasste "Critical Call Out" 
 Platzieren Sie hier Ihre "Kritische" Nachricht! 
 kundenspezifischer Aufruf.

Der Grund-HTML-Code für jeden Aufruf beginnt mit dem Anker mit einer Klasse, die gleich "Ballon" ist, wobei die Struktur und das Design des Aufrufballons wie in der vorherigen Demonstration beibehalten werden. Das href = "#" ist ein Dummy-Link nur zu Demonstrationszwecken. Das Tag hat eine Klasse gleich "kritisch", die die Hintergrundfarbe und den Rand für den Aufrufballon festlegt, gefolgt vom Symbolbild "Kritisch". Der Textinhalt des Aufrufs folgt, und das Schließen ist im schließenden Ankertag enthalten . Der resultierende Aufruf wird in Abbildung A unten angezeigt, wie in Chrome Version 23.0.1271.97 m dargestellt.

Abbildung A.

Das Beispiel des sozialen Netzwerks "Facebook" ist unten in Abbildung B dargestellt, wie in Chrome Version 23.0.1271.97 m dargestellt.

Abbildung B.

Der verbleibende HTML-Code für jede Instanz in der Demonstration ersetzt die span-Klasse durch den jeweiligen benutzerdefinierten Aufrufstil, dh class = "help" für den Aufruf "Help" usw.

Die Symbolbilder

Wie oben erwähnt, wird jedes Callout-Bildsymbol unmittelbar nach dem öffnenden Tag aufgerufen. Die sechs Bilddateinamen in dieser Demonstration sind kritisch.png, facebook.png, help.png, information.png, twitter.png und warning.png . Sie sind in Abbildung C unten zusammen dargestellt.

Abbildung C.

Das CSS

Nachdem wir nun den HTML-Code haben, werfen wir einen Blick darauf, wie die Callouts erstellt und gestaltet werden, und ich werde mich auf die Highlights des Codes konzentrieren, die diese Funktionalität zum Erfolg führen.

Die Hauptfunktionen der Ballonstile wurden im vorherigen Teil überprüft. In diesem Segment werde ich daher die benutzerdefinierten Stile hervorheben. Jeder benutzerdefinierte Aufruf verfügt über eine eigene Hintergrundfarbe, die den jeweiligen Inhalt darstellt, und die Ränder sind mit ihren jeweiligen Farben auf 1 Pixel fest eingestellt. Die CSS-Codefragmente werden unten angezeigt. Beachten Sie, dass die Stile "Hilfe" und "Information" die gleichen Einstellungen für Hintergrundfarbe und Rahmen beibehalten:

 / ** Kundenspezifische Anrufe ** / 
 .normal { 
 Hintergrund: # fffAF0; 
 Rand: 1px fest #DCA; 
 }} 
 .kritisch { 
 Hintergrund: # e39595; 
 Rand: 1px fest # a40a0a; 
 }} 
 .Hilfe { 
 Hintergrund: # b3e2f2; 
 Rand: 1px fest # 133b95; 
 }} 
 .Information { 
 Hintergrund: # b3e2f2; 
 Rand: 1px fest # 133b95; 
 }} 
 .Warnung { 
 Hintergrund: # f6f6b9; 
 Rand: 1px fest # e0a50b; 
 }} 
 .Facebook { 
 Hintergrund: # b2bed6; 
 Rand: 1px durchgehend # 001857; 
 }} 
 .twitter { 
 Hintergrund: # a8e1f9; 
 Rand: 1px fest # 155875; 
 }} 

Für das Ballonbild wurde ein zusätzlicher Satz von Stilen hinzugefügt, der auf einen Rand von Null und Null gesetzt ist, mit einem Rand von -22 oben und -26 links, einem Abstand von 5, einer Textdekoration von keiner und einer Textkontur von keiner .

 .balloon img { 
 Grenze: keine; 
 }} 
 .ballon: hover img { 
 Rand: 0; 
 Rand: -22px 0 0 -26px; 
 float: left; 
 Polsterung: 5px; 
 Textdekoration: keine; 
 Textumriss: keine; 
 Grenze: keine; 
 }} 

Die Ballonbereichsstile wurden ein wenig geändert, um den Ballonaufruf zu erstellen, der unter dem Link mit dem folgenden CSS angezeigt wird:

 .ballon span { 
 Z-Index: 99; 
 Anzeige: keine; 
 Polsterung: 5px 5px; 
 Rand oben: 42px; 
 Rand links: -35px; 
 Position: absolut; 
 Mindestbreite: 316px; 
 Zeilenhöhe: 16px; 
 Randradius: 6px; 
 -Moz-Rand-Radius: 6px; 
 -Webkit-Rand-Radius: 6px; 
 -moz-box-shadow: 6 x 6 x 10 x #CCC; 
 -webkit-box-shadow: 6px 6px 10px #CCC; 
 Kastenschatten: 6px 6px 10px #CCC; 
 Schriftfamilie: Calibri, Tahoma, Genf, serifenlos; 
 Schriftgröße: .8em; 
 }} 

Einige der spezifischen CSS-Einstellungen müssen möglicherweise an Ihre eigene Anwendung angepasst werden. Zum größten Teil ist dies jedoch ein guter Anfang für einen einfachen, aber effektiven und stilisierten benutzerdefinierten Aufruf oder Tooltip. Denken Sie daran, dass einige der Funktionen in dieser Demonstration für einige Bildschirmleseprogramme möglicherweise nicht verfügbar sind oder für alternative Textverhalten nützlich sind, wenn für Ihre Websites bestimmte Anforderungen an Semantik, Benutzerfreundlichkeit und Barrierefreiheit gelten.

Die verbleibenden vier demonstrierten Ausrufballons sind in Abbildung D dargestellt, wie in Chrome Version 23.0.1271.97 m dargestellt:

Abbildung D.

Sie können die Datei index.html, styles.css und die zugehörigen Bilder hier herunterladen.

© Copyright 2021 | mobilegn.com