CSS - Statusmeldung nach 5 Sekunden ausblenden

Eine Statusmeldung

<style>

/* Statusmeldung nach 5 Sekunden ausblenden */

.success {
 
background-color#e3ffe3;
 
bordersolid 2px #00b700;
 
text-aligncenter;
 
color#000000;
 
padding10px;
 
width250px;
 
animationstatus 5s ease forwards;
}

@
keyframes status {
 
0% {
  
opacity1;
  
pointer-eventsall;
 }
 
90% {
  
opacity1;
  
pointer-eventsall;
 }
 
100% {
  
opacity0;
  
pointer-eventsnone;
 }
}
</
style>

<
div class="success">Eine Statusmeldung</div>

Statusmeldung je nach Nachricht ausblenden (mit JavaScript)


<style>

/* Statusmeldung je nach Nachricht ausblenden */

.success {
 
background-color#e3ffe3;
 
bordersolid 2px #00b700;
 
text-aligncenter;
 
color#000000;
 
padding10px;
 
width250px;
 
animationstatus 5s ease forwards;
}

.
error {
 
background-color#ffd5d5;
 
bordersolid 2px #ff4d4d;
 
color#000000;
 
padding10px;
 
width250px;
 
animationstatus 10s ease forwards;
}

@
keyframes status {
 
0% {
  
opacity1;
  
pointer-eventsall;
 }
 
90% {
  
opacity1;
  
pointer-eventsall;
 }
 
100% {
  
opacity0;
  
pointer-eventsnone;
 }
}
</
style>

<
div id="message"></div>

<
script>
let message document.querySelector('#message');

if (
"Inhalt" == "Inhalt") {
 
message.textContent = `Die Inhalte sind gleich.`;
 
message.classList.add("success");
}
else {
 
message.textContent = `Die Inhalte sind ungleich!`;
 
message.classList.add("error");
}
</
script>

Pop-up nach 10 Sekunden ausblenden


<style>

/* Pop-up nach 10 Sekunden ausblenden */

div#popup {
 
font-familyVerdanaArialSans-Serif;
 
font-size1rem;
 
color#000000;
 
background-color#FFD700;
 
bordersolid 2px #000000;
 
text-aligncenter;
 
padding5px;
 
width250px/* Breite */
 
height270px/* Höhe */
 
positionabsolute;
 
left100px/* Position von Links */
 
top90px/* Position von Oben */
 
z-index1000;
 
box-shadow0px 0px 7px 6px #BBBBBB;
 
animationpopUp 10s ease forwards;
}

@
keyframes popUp {
 
0% {
  
opacity1;
  
pointer-eventsall;
 }
 
90% {
  
opacity1;
  
pointer-eventsall;
 }
 
100% {
  
opacity0;
  
pointer-eventsnone;
 }
}
</
style>

<
p>Test!</p>

<
div id="popup">
 
Text und oder Bild
</div>

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<object> Objekt

CSS - Eingabefelder und Buttons formatieren

PHP - Counter für Seitenaufrufe

JavaScript - Checkbox auf "unbestimmt" setzen

MySQL - Zeige Einträge von heute an

100% Text
Eine Seite sollte nicht nur mit 100% Text gefüllt sein. Lockern Sie die Seite auf zum Beispiel mit verschieden großen Absätzen, farbigen Überschriften, Bildern und Hyperlinks. Vom großen Vorteil ist, wenn der Text nicht über die ganze Browserseite geht. Mit Tabellen können Sie die Textbreite leicht begrenzen => bessere Lesbarkeit und Übersicht.