Do it yourself: CSS für Profil und Blog
19.05.2013 um 09:32
Ich fasse nochmal zusammen:
3 Punkte:
Erstens. Soundeffekt bei Hover brauchts dazu Java?
Punkt 2. kommt das div.tabnav a immer zuerst in diesem graublau und fadet dann anstatt von anfang an schwarz zu sein, was ist da falsch?
Und Drittens. die Umrandung der textarea bei Chrome ist die so golden, das hätte ich gerne weg. Ich hab versucht .selected border none aber nützt nichts.
<style>
.page_selector a, a.pl.pl_selected {color:#666;}
.attitel {visibility:hidden;margin-left:-100px;}
.attitel:after{content:"Im Spiegel schwarzen Labyrinth - Spiegelschriften - Nachricht an dich selbst - Zum Karussell der Ewigkeit";visibility:visible;}
a.attitel {font-family: Calibri; font-size: 13pt;color:#666;}
textarea, .content, .message {background-color:#000;color:#666;}
#reklame {display:none!important;}
.selected {border:none;}
.sufu {
background-color:#000;
border-color: #fff;
font-size: 11px;
color:#333;
height: 25px;
padding-left: 0px;
padding-top: 0px;
width: 100px;
border-radius: 3px;
}
body {
margin left:10%;
padding-top:10px;
background-color:#000000;
color:#666;
font-size:15px;
font-family:Calibri,Verdana,Arial,sans-serif;
}
textarea {
font-family:Tahoma;
font-size:16px;
}
input {
font-family:Tahoma;
font-size:16px;
margin:0;
}
select {
margin:0;
}
#moreMenu {
background-color: rgba(00,00,00,0.85) !important;
box-shadow: 2px 2px 10px #000 !important;
-webkit-border-bottom-left-radius: 5px !important;
-webkit-border-bottom-right-radius: 5px !important;
-moz-border-radius: 0 0 5px 5px !important;
}
#moreMenu a {
background: transparent !important;
}
div.finfo, div.paginator.fh, div.topnav {display:none!important;}
div, threads, td, tr, tbody {background-color:black;}
div.header, .postbox1, .postbox2 {background-image:url('http://static.allmystery.de/upics/9e9a30_schwarz.png');
background-color:black;
background-size:100% 100%;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right bottom;
}
img.heart {display:none!important;}
.mcell_status {display: none;background-color:#000000!important;border:1px;color:#333333;}
.infoleiste, .fl, .mcell, .mcell2, .mcell_inhalt, .mcell_inhalt2 {background-color:#000000!important;border:1px;color:#333333!important;}
a, #mstatus_content, .mstatus {font-size:16px;color:#666666;text-align:justify;}
body
{
background-image:url('http://static.allmystery.de/upics/9e9a30_schwarz.png');
background-color:black;
background-size:100% 100%;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right bottom;
}
.blog-entry, .blog-entries {background-color:#000000;border:none;color:#000000;font-family:none;font-size:16px;color:#666666;text-align:justify;}
.lost, .found { visibility: visible;}
img, a.voteup, div.tabnav a {
background-color:#000;
-moz-transition: all 3s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 3s ease-in-out;
-ms-transition: all 3s ease-in-out;
transition: all 1s ease-in-out;
}
img:hover, a.voteup:hover, div.tabnav a:hover {
background-color:#000000;
-moz-transition: all 3s ease-in-out;
-moz-transform: scale(-1, 1) rotate(2deg) skew(0deg) translate(5px);
-webkit-transition: all 1s ease-in-out;
-webkit-transform: rotate(2deg) scaleY(1) scaleX(-1) skew(0deg) translate(5px);
-o-transition: all 3s ease-in-out;
-o-transform: scale(-1, 1) rotate(2deg) skew(0deg) translate(5px);
-ms-transition: all 3s ease-in-out;
-ms-transform: scale(-1, 1) rotate(2deg) skew(0deg) translate(5px);
transition: all 1s ease-in-out;
transform: scale(-1, 1) rotate(2deg) skew(0deg) translate(5px);
}
img, div.tabnav a {
color:#666;
-moz-transition: all 3s ease-in-out;
-webkit-transition: all 3s ease-in-out;
-o-transition: all 3s ease-in-out;
-ms-transition: all 3s ease-in-out;
transition: all 3s ease-in-out;
}
img:hover, div.tabnav a:hover {
color:#fff;
-moz-transition: all 3s ease-in-out;
-moz-transform: rotate(-175deg) scaleY(-1) scaleX(-1) skew(0deg) translate(5px);
-webkit-transition: all 3s ease-in-out !important;
-webkit-transform: rotate(-175deg) scaleY(-1) scaleX(1) skew(0deg) translate(5px) !important;
-o-transition: all 3s ease-in-out;
-o-transform: scale(-1, -1) rotate(-175deg) skew(0deg) translate(5px);
-ms-transition: all 3s ease-in-out;
-ms-transform: scale(-1, -1) rotate(-175deg) skew(0deg) translate(5px);
transition: all 3s ease-in-out;
transform: rotate(-175deg) scaleY(-1) scaleX(-1) scaleZ(-1) skew(0deg) translate(5px);
}
.postbox1:hover {
-moz-transition: all 3s ease-in-out;
-moz-transform: rotate(-175deg) scaleY(-1) scaleX(-1) skew(0deg) translate(5px);
-webkit-transition: all 3s ease-in-out !important;
-webkit-transform: rotate(-0deg) scaleY(1) scaleX(1) skew(0deg) translate(5px) !important;
-o-transition: all 3s ease-in-out;
-o-transform: scale(-1, -1) rotate(-175deg) skew(0deg) translate(5px);
-ms-transition: all 3s ease-in-out;
-ms-transform: scale(-1, -1) rotate(-175deg) skew(0deg) translate(5px);
transition: all 3s ease-in-out;
transform: rotate(-175deg) scaleY(-1) scaleX(-1) scaleZ(-1) skew(0deg) translate(5px);
}
.postbox2:hover {
-moz-transition: all 3s ease-in-out;
-moz-transform: rotate(-0deg) scaleY(1) scaleX(-1) skew(0deg) translate(-5px);
-webkit-transition: all 3s ease-in-out;
-webkit-transform: rotate(-0deg) scaleY(1) scaleX(1) skew(0deg) translate(-5px);
-o-transition: all 3s ease-in-out;
-o-transform: scale(-1, -1) rotate(-175deg) skew(0deg) translate(5px);
-ms-transition: all 3s ease-in-out;
-ms-transform: scale(-1, -1) rotate(-175deg) skew(0deg) translate(5px);
transition: all 3s ease-in-out;
transform: rotate(-175deg) scaleY(-1) scaleX(-1) scaleZ(-1) skew(0deg) translate(5px);
}
.a, .postbox1 {
position: relative;
-webkit-animation-name: bounce;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-moz-animation-name: bounce;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
}
@-webkit-keyframes bounce {
from { top: 0px; color: #666;}
to { top: 0px; color: #666;}
}
@-moz-keyframes bounce {
from { top: 0px; color: #071aab;}
to { top: 0px; color: #fff;}
}
.postbox2 {
position: relative;
-webkit-animation-name: bounce;
-webkit-animation-duration: 8s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-moz-animation-name: bounce;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
}
@-webkit-keyframes bounce {
from { top: 0px; color: #666;}
to { top: 0px; color: #666;}
}
@-moz-keyframes bounce {
from { top: 0px; color: #071aab;}
to { top: 0px; color: #fff;}
}
</style>
