zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Wie Schatten-Farbe automatisch wechseln?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.11.2015, 13:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.11.2015
Beiträge: 22
Handle3000 befindet sich auf einem aufstrebenden Ast
Standard Wie Schatten-Farbe automatisch wechseln?

Hallo,
Wie kann ich die Schattenfarbe automatisch alle paar Sekunden ändern lassen? Also von Rot zu Blau zu Grün etc. Am besten mit weichen Übergängen.
Ich habe mal gelesen, dass es mit purem CSS auch realisierbar ist, weiß aber leider nicht wie.
#Bild-Schatten stellt hierbei den Schatten für #Bild dar.

Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>

<style>

#Bild {
	width:400px;
	height: 200px;
	border: 1px solid green;
	background: lightyellow;
	margin: auto;}

#Bild-Schatten {
	width:400px;
	height: 200px;
	box-shadow: 1px 1px 10px 5px red;
	margin: auto;}

body {
background: pink;}

</style>

</head>

<body>
<div id="Bild-Schatten"><div id="Bild"></div></div>
</body>
</html>

Geändert von Handle3000 (19.11.2015 um 14:01 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.11.2015, 14:55
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Deine Stichworte sind CSS Animationen und Keyframes.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.11.2015, 14:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.11.2015
Beiträge: 22
Handle3000 befindet sich auf einem aufstrebenden Ast
Standard

So weit bin ich auch schon gekommen. Das ganze funktioniert allerdings nur für einen vorgegebenen Background, aber nicht für den Box-Shadow.
Mit Zitat antworten
  #4 (permalink)  
Alt 19.11.2015, 15:07
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Animationen sollten auch mit box-shadow funktionieren. Vielleicht hattest du diverse Browser-Prefixes vergessen?
Mit Zitat antworten
  #5 (permalink)  
Alt 19.11.2015, 15:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.11.2015
Beiträge: 22
Handle3000 befindet sich auf einem aufstrebenden Ast
Standard

Hab es hinbekommen. Die Übergänge muss ich noch etwas weicher gestalten, allerdings zur Orientierung für Andere vielleicht ganz hilfreich, deswegen poste ich den Code hier rein:

Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>

<style>

#Bild {
	width:400px;
	height: 200px;
	border: 1px solid green;
	background: lightyellow;
	margin: auto;
}

#Bild-Schatten {
	 width: 400px;
    height: 200px;
    margin:auto;
  box-shadow: 1px 1px 20px 3px black;
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
	  -webkit-box-shadow: 1px 1px 20px 3px lightyellow;
    -moz-box-shadow: 1px 1px 20px 3px lightyellow;
    box-shadow: 1px 1px 20px 3px lightyellow;
  }
  50% {
	   -webkit-box-shadow: 1px 1px 20px 3px orangered;
      -moz-box-shadow: 1px 1px 20px 3px orangered;
      box-shadow: 1px 1px 20px 3px orangered;
  }
  100% {
	  -webkit-box-shadow: 1px 1px 20px 3px yellow;
      -moz-box-shadow: 1px 1px 20px 3px yellow;
      box-shadow: 1px 1px 20px 3px yellow;"magenta"]  }
}

body {background: pink;}

</style>

</head>

<body>
<div id="Bild-Schatten">
<div id="Bild"> </div>
</div>
</body>
</html>
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hintergrund Farbe wechseln mit Javascript Frage einfachder Javascript & Ajax 4 15.02.2009 13:31
Schatten für Bilder Flunder CSS 7 11.02.2009 21:30
Schaltflächen - Farbe wechseln! timbo CSS 4 03.01.2007 15:57
Mehrere Content-<div>s mit Schatten drum herum Deever CSS 2 06.12.2006 16:40
http://csskueche.xhtmlforum.de/index.php?css=2 -Terry- terrikay http://csskueche.xhtmlforum.de/ 8 19.05.2005 14:03


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:46 Uhr.