CSS Sprites und CSS3 transitions

patrick_l · 30.03.2013

Hi allerseits,

ich habe eine Frage bezüglich CSS Sprites und "transitions". Mir geht es um die Animation mittels transition. Ich möchte beim Rollover gerne ein fade-in-out haben aber ohne "scrollen" der Grafik.

und so soll es sein:

Auch wenn ich die Antwort eigentlich schon weiß, trotzdem mal nachfrage ob man das nicht doch irgendwie zurecht frickeln kann, ohne das ich auf Sprites verzichten muss? Wollte halt nicht unbedingt die Navigation in Einzelteile schniebeln.

Edit:
Ich hatte dann jetzt die Idee, mein Sprite-Grafik aufzuteilen. Also den Normal und den Hover-Zustand aller Schaltflächen jeweils in einer eigenen Grafik. Aber leider hat es auch nicht funktioniert.

Meine Sprite-Grafik ist vom Aufbau her wie dieses Beispiel. Also vertikal und darunter der jeweilige Hover-Zustand. Wüsste jetzt gerne wie ich es am sinnvollstem umsetze.

Liebe Grüße, Patrick

patrick_l · 30.03.2013

AW: CSS Sprites und CSS3 transitions

Ich erlaube mit mal einen Doppelpost. Das die Animation jetzt so ist kann ich ja nachvollziehen. Nur suche jetzt nach einem eleganten Lösungweg für den gewünschten Hover-Status.

Ich wollte wie gesagt nicht auf Sprites verzichten. Hauptsächlich wegen der HTTP-Requests. Soll halt alles möglichst schlank bleiben.

cebito · 30.03.2013

AW: CSS Sprites und CSS3 transitions

Was ist, wenn du dem a das normale bg-Bild gibst und dem li das für den hover (per Positionierung aus dem Sprite heraus)? Dann veränderst du per transition die opacity von a...

patrick_l · 30.03.2013

AW: CSS Sprites und CSS3 transitions

Mmh soweit noch nicht gedacht. war die ganze Zeit mit dem a beschäftigt. Werde ich gleich mal ausprobieren. Weil nen leichten fade-in-out finde ich schon ganz fein. Wirkt nicht so langweilig und bringt etwas mehr Leben rein, ohne das es zu viel wird.

Frickel mal eben bei mir rum.

cebito · 30.03.2013

AW: CSS Sprites und CSS3 transitions

patrick_l schrieb:
Frickel mal eben bei mir rum.

Bitte keine Einzelheiten! :uhm:

noltehans · 31.03.2013

AW: CSS Sprites und CSS3 transitions

Hi patrick_l,

so müsste es gehen. (kein hover im IE8)

Code:

<!doctype html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Fade Sprite</title>
<style type="text/css">
#navi li, #navi a{
  height:44px;
  display:block;
}
.sprite {
    display: inline-block;
    position: relative;
    text-indent: -9999px;
    width: 119px;
    height: 44px;
    background: url(sprite.png) no-repeat;
}
.sprite:after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: url(sprite.png) no-repeat;
    background-position: 0 -44px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s;
}
.sprite:hover:after {
  background-position: 0px -44px;
  opacity: 1;
}
</style>
</head>
<body>
<ul id="navi">
<li >
<a class="sprite" href="#"></a> 
</li>   
</ul>
</body>
</html>

patrick_l · 31.03.2013

AW: CSS Sprites und CSS3 transitions

noltehans schrieb:
Hi patrick_l,

so müsste es gehen. (kein hover im IE8 )

Supäär

Ich danke dir. Bin gestern nicht mehr dazu gekommen zu schreiben. Was jetzt den IE angeht, nicht so wild. Entweder lasse ich es so oder passe es noch für den IE an.

Danke und frohe Ostern, Patrick

noltehans · 31.03.2013

AW: CSS Sprites und CSS3 transitions

Gern geschehen.

Dir auch frohe Ostern.