Gewusst wie: Callout-Nachricht
Erfahren Sie, wie Sie Callout-Nachrichten mit CSS erstellen.
Aufbieten, ausrufen, zurufen
Eine Callout-Nachricht wird oft am Ende einer Seite positioniert, um den Benutzer über etwas Besonderes zu informieren: Tipps/Tricks, Rabatte, erforderliche Maßnahmen, Sonstiges.
Callout erstellen
Schritt 1) HTML hinzufügen:
Beispiel
<div class="callout">
<div class="callout-header">Callout
Header</div>
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<div class="callout-container">
<p>Some text...</p>
</div>
</div>
Wenn Sie die Callout-Nachricht schließen möchten, fügen Sie ein <span>-Element mit einem onclick
Attribut hinzu, das besagt: „Wenn Sie auf mich klicken, verstecke mein übergeordnetes Element“ – das ist der Container <div> (class="alert").
Tipp: Verwenden Sie die HTML-Entität „ ×
“, um den Buchstaben „x“ zu erstellen.
Schritt 2) CSS hinzufügen:
Gestalten Sie das Callout-Feld und die Schließen-Schaltfläche:
Beispiel
/* Callout box
- fixed position at the bottom of the page */
.callout {
position: fixed;
bottom: 35px;
right: 20px;
margin-left: 20px;
max-width: 300px;
}
/* Callout header */
.callout-header {
padding: 25px
15px;
background: #555;
font-size: 30px;
color: white;
}
/* Callout container/body */
.callout-container
{
padding: 15px;
background-color:
#ccc;
color: black
}
/* Close button */
.closebtn {
position:
absolute;
top: 5px;
right: 15px;
color: white;
font-size: 30px;
cursor: pointer;
}
/* Change color on
mouse-over */
.closebtn:hover {
color: lightgrey;
}
Tipp: Sehen Sie sich auch Warnmeldungen an .
Tipp: Sehen Sie sich auch Notizen an .