devatrox

Ich bin ja ein großer Fan von CSS3. So sieht mein Header-Schriftzug jetzt aus (nur für Webkit-Browser):
h1 a {
-webkit-animation-name: colorChange;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 7s;
}
@-webkit-keyframes colorChange {
0% { color:#911; }
33% { color:#1a1; }
66% { color:#09e; }
100% { color:#911; }
}
Klein, aber fein.
Weiß jemand wie man Animationen für den :hover quasi pausieren kann und dafür eine feste Farbe nehmen? …

... weiterlesen »

Wen es interessiert und wer sich nicht durch mein Stylesheet wurschteln will, meine Buttons hier im Blog sehen so aus:
input[type=submit] {
width:auto;
text-shadow:0 1px 0 #fff;
padding:.2em .7em;
border:1px solid #ddd;
border-bottom-color:#ccc;
border-top-color:#eee;
border-radius:1em/2em;
-moz-border-radius:1em/2em;
-webkit-border-radius:1em 2em;
background:#fff;
background:-moz-linear-gradient(top,#fff,#ddd);
background:-webkit-gradient(linear, 0 top, 0 bottom, from(#fff), to(#ddd));
box-shadow:0 1px 3px rgba(0,0,0,.1);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.1);
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.1);
}
input[type=submit]:hover, input[type=submit]:focus {
cursor:default;
color:#911;
box-shadow:0 1px 3px rgba(0,0,0,.2);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.2);
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);
}
input[type=submit]:active {
box-shadow:0 …

... weiterlesen »

Da experimentiert man so vor sich hin und bemerkt plötzlich, dass bei der Nutzung von text-shadow die Schrift auch unter Windows, wie von Zauberhand so schön geglättet aussieht, wie auf dem Mac. „Hm“, dachte ich mir, „aber was wenn man keinen Schatten will, aber trotzdem den Effekt?“. Nichts leichter als das! Einfach den Schatten mit …

... weiterlesen »