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.

<iframe> Eingebettetes Framefenster

CSS - Link farbig unterstreichen

PHP - Dateigröße und letzte Aktualisierung ausgeben

JavaScript - Zahlenwerte überprüfen und korrigieren

MySQL - Datensatz mit den meisten Zeichen ermitteln

Werbung in Signaturen
Sie sind in Communities, Foren und sonstigen Gemeinschaften aktiv? Da gibt es oft eine Möglichkeit, eine Signatur zu erstellen, wo man etwas hinschreibt, was unter jedem Beitrag zu sehen ist, wie eine Briefsignatur. Darin können sie wunderbar Werbung für Ihre Homepage machen. Oder in Ihren Emails die Sie versenden.