Do it yourself: CSS für Profil und Blog

Header mit runden Ecken in bunt und mit Farbe.


.header {
border: 2px solid #003300;
border-radius:10px;
animation-name:switchcolor;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;

-moz-animation-name:switchcolor;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;

-webkit-animation-name:switchcolor;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;

-o-animation-name:switchcolor;
-o-animation-duration:5s;
-o-animation-timing-function:linear;
-o-animation-delay:2s;
-o-animation-iteration-count:infinite;
-o-animation-direction:alternate;
-o-animation-play-state:running;

-ms-animation-name:switchcolor;
-ms-animation-duration:5s;
-ms-animation-timing-function:linear;
-ms-animation-delay:2s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:alternate;
-ms-animation-play-state:running;

}

@-moz-keyframes switchcolor
{
0% {border:1px solid #009900;box-shadow:0px 0px 60px #66ff33, 0px 0px 50px #ffffff;}
50% {border:1px solid #66ff33;box-shadow:0px 0px 60px #66ff33,0px 0px 50px #000000;}
100% {border:1px solid #009900;box-shadow:0px 0px 60px #66ff33,0px 0px 50px #ffffff;}
}
@-webkit-keyframes switchcolor
{
0% {border:1px solid #009900;box-shadow:0px 0px 60px #66ff33, 0px 0px 50px #ffffff;}
50% {border:1px solid #66ff33;box-shadow:0px 0px 60px #66ff33,0px 0px 50px #000000;}
100% {border:1px solid #009900;box-shadow:0px 0px 60px #66ff33,0px 0px 50px #ffffff;}
}
@-o-keyframes switchcolor
{
0% {border:1px solid #009900;box-shadow:0px 0px 60px #66ff33, 0px 0px 50px #ffffff;}
50% {border:1px solid #66ff33;box-shadow:0px 0px 60px #66ff33,0px 0px 50px #000000;}
100% {border:1px solid #009900;box-shadow:0px 0px 60px #66ff33,0px 0px 50px #ffffff;}
}
@-ms-keyframes switchcolor
{
0% {border:1px solid #009900;box-shadow:0px 0px 60px #66ff33, 0px 0px 50px #ffffff;}
50% {border:1px solid #66ff33;box-shadow:0px 0px 60px #66ff33,0px 0px 50px #000000;}
100% {border:1px solid #009900;box-shadow:0px 0px 60px #66ff33,0px 0px 50px #ffffff;}
}
@keyframes switchcolor
{
0% {border:1px solid #009900;box-shadow:0px 0px 60px #66ff33, 0px 0px 50px #ffffff;}
50% {border:1px solid #66ff33;box-shadow:0px 0px 60px #66ff33,0px 0px 50px #000000;}
100% {border:1px solid #009900;box-shadow:0px 0px 60px #66ff33,0px 0px 50px #ffffff;}
}

Vielen dank werd ich gleich Probieren!

Kannst du mir jetzt auch noch sagen wie ich den Player weg bekomme?

object, iframe {visibility: hidden;}

Kein Problem. Gern geschehen.

@----
Ist es eigentlich möglich, dass man 2 Hover-Effekte auf ein Element bauen kann?

Oha, damit kann ich irgendwie nichts anfangen gerade. :D
Hier ist das, um was es geht:

.profile_info:hover {text-shadow: 200px 0px 0px #FF0088;
-webkit-transition-duration: 1.5s;
-moz-transition-duration: 1.5s;}

und für .profile_info würde ich halt gerne noch einen anderen Effekt haben, aber ich check das in dem Link nicht. :|

@Ciela

warum baust du den effekt nicht direkt in den jetzigen hover ein?

@Prof.nixblick
Wie meinst du das?

Edit; Ah, ich glaub ich weiß wie es gemeint war :D
Ich versuche es.

.profile_info:hover {
text-shadow: 200px 0px 0px #FF0088;
-webkit-transition-duration: 1.5s;
-moz-transition-duration: 1.5s;
-ms-transition-duration: 1.5s;
-o-transition-duration: 1.5s;
transition-duration: 1.5s;
effect2:effect;
effect3:effect;
}

---- schrieb:effect2:effect;
effect3:effect;

Funktioniert irgendwie nicht.

Was soll den rein?

@Ciela

Ciela schrieb:Funktioniert irgendwie nicht.

Warum wohl?

@Prof.nixblick
Ich weiß nicht was du meinst, aber ich habe den ganzen Code eingefügt, nicht nur das Stück, was ich zitiert habe, falls du das meinst.

@----
Also es ist ja so, dass .profile_info nach rechts hovert und ich hab gedacht, das könnte man ja so machen, dass es nach beiden Seiten geht.

@Ciela

Wird trotzdem nicht funzen. Wie meinst Du das, "nach beiden Seiten"? Gleichzeitig oder erst Links dann Rechts?

Gleichzeitig.

@Ciela

Schau mal hier http://www.css3maker.com/css3-transform.html

Ich weiß ja nicht, ob ich nur zu blöd dazu bin, aber ich krieg es einfach nicht hin.

@Prof.nixblick
Ich hab den Effekt doch schon. Ich bekomm es nur nicht hin, 2 Effekte auf ein Element zu setzen. :{