Wie man Facebook-Style-Benachrichtigungen mit CSS

August 20

Facebook verwendet ein paar verschiedene Arten von Benachrichtigungen, einschließlich Bars, die an der Unterseite der Seite halten. Dieser Trick ist nicht schwierig, auf Ihrer eigenen Website zu implementieren, obwohl es, zusätzliche Codierung über CSS (Cascading Style Sheets dauern wird), um den Text für die Benachrichtigungen selbst zu erstellen. Benötigt wird lediglich einige einfache HTML Feld, Styling von der Box selbst, dann auf einer einzelnen Zeile von CSS, um das Feld klebrig zu erstellen.

Anweisungen

1 Öffnen Sie die Webseite in Notepad oder einem Codeeditor und einen Bildlauf nach unten zu irgendwo über die Schließung "< / body >"-Tag, über jede "< >" Skripttags Sie dort finden. Erstellen Sie ein Div in Ihren HTML-Code und nennen sie die ID "Anmeldung." Dieses Div einer Überschrift und einem Absatz hinzufügen:

< Div Id = "Benachrichtigung" >Benachrichtigung der < h3 > < / h3 >< p > Text für die Benachrichtigung geht hier. </p >< / Div >

2 Öffnen Sie in Editor oder einem Codeeditor das Stylesheet für Ihre Website. Fügen Sie in einer neuen Zeile Selektoren für das div-Tag, ihre Überschrift und den Absatztext:

Benachrichtigen Sie {} }

h3 {Benachrichtigen }

Benachrichtigen Sie p {} }

3 Formatieren Sie zuerst das Benachrichtigung. Wenn Sie im Facebook-Stil anpassen möchten, verwenden Sie einen weißen Hintergrund mit einem leichten grauen Rahmen und ihm dunkel grauen Text. Legen Sie für das Feld sowie eine Breite:

Benachrichtigen Sie {} Hintergrund: weiß;Farbe: #555;Font-Family: Arial, sans-Serif;Schriftgröße: 12px;Border: 1px Solid #ccc;Width: 200px;}

4 Stil der Rubrik mit weißer Schrift auf blauem Hintergrund und fügen Sie einige Padding. Sie müssen die Ränder auch deaktivieren, indem sie auf 0 (null):

h3 {Benachrichtigen Hintergrund: #899ecb;Farbe: weiß;Schriftgröße: 12px;Border-Bottom: 1px solid #6d8bc9;Padding: 5px 20px;Margin: 0;}

5 Geben Sie einige Padding auf den Absatz in der Benachrichtigung:

Benachrichtigen Sie p {} Padding: 10px 20px;}

Da Sie bereits die Schriftarten für das gesamte Feld innerhalb der "#notify {}" Stilregel gestylt, müssen Sie nicht um sie auf diese Regel zu formatieren.

6 Gehen Sie zurück in die Stilregel "#notify {}", und fügen Sie einige Positionierung:

Position: absolute;unten: 0;rechts: 0;

Dieser Code wird das Benachrichtigung in der rechten unteren Ecke des Bildschirms Browser setzen. Wenn Sie die Seite aus in einem Browser testen und versuchen einen Bildlauf nach unten, wird das Feld nicht an dieser Ecke halten.

7 Eine CSS-Codezeile wird das Feld Ort festsetzen:

Lage: festgesetzt;

Ändern Sie die "Absolute" Sie verwendet für die Positionierung vor "fixiert". Jetzt wird das Feld an der unteren Ecke festhalten.

Tipps & Warnungen

  • Die Anleitung hier decken nur die Einrichtung das Feld Benachrichtigung in CSS und Animationen, aktualisieren oder liefern die Benachrichtigungen nicht abdecken. Versuchen Sie ein jQuery-Script für alle Animationen, die Sie wünschen und liefern einzelne Nachrichten an Benutzer durch ein Server-seitiges Script. PHP ist eine serverseitige Skriptsprache ein Beispiel.
  • "Position: feste" funktioniert nicht in Internet Explorer 6, aber es funktioniert in den Versionen 7 und oben.

SIE KÖNNEN AUCH GERNE