Hur man skapar: Skapa utbrytande meddelande

Lär dig hur du använder CSS för att skapa utbrytande meddelanden (Callout Message).

Utbrytande meddelande

Utbrytande meddelanden finns vanligtvis vid sidan av sidan och används för att informera användaren om vissa särskilda ämnen: tips/tricks, rabatter, åtgärder som behöver vidtas med mera.

Prova själv

Skapa utbrytande meddelande

Steg 1 - Lägg till HTML:

<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>Något text...</p>
  </div>
</div>

Om du vill stänga av funktionen för att stänga utbrytande meddelanden, lägg till en <span> element och sätt en onclick egenskap, som betyder "dölj min föräldrelement när jag klickas", dvs. behållaren <div class="callout">.

Tips:Använd HTML-tecken "&:times;"Skapa bokstaven "x"."

Steg 2 - Lägg till CSS:

Ställ in stilar för utbrytande meddelandefönster och stängknapp:

/* Utbrytande meddelandefönster - fast vid sidan av sidan */
.callout {
  position: fast;
  nedre: 35px;
  höger: 20px;
  marginal-vänster: 20px;
  max-bredd: 300px;
{}
/* Utbrytande meddelandetitel */
.callout-header {
  marginal: 25px 15px;
  bakgrund: #555;
  font-size: 30px;
  färg: vit;
{}
/* Utbrytande meddelandekontainer/överskrift */
.callout-container {
  marginal: 15px;
  bakgrundsfärg: #ccc;
  färg: svart
{}
/* Stäng knappen */
.closebtn {
  position: absolut;
  överst: 5px;
  höger: 15px;
  färg: vit;
  font-size: 30px;
  pekare: pekare;
{}
/* Ändra färg när musen hålls över */
.closebtn:hover {
  färg: ljusgrå;
{}

Prova själv

Relaterade sidor

Tutorial:Hur skapa varningsmeddelande

Tutorial:Hur skapa anteckningar