Antworten auf deine Fragen:
Neues Thema erstellen

CSS Sprites und CSS3 transitions

patrick_l

Hat es drauf

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.

unbenannt71iu7.gif


und so soll es sein:

start_01wyj3m.gif


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.

css_spritest7jl5.png



Liebe Grüße, Patrick
 
Zuletzt bearbeitet:

patrick_l

Hat es drauf

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

undefined

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

Hat es drauf

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.
 

noltehans

Aktives Mitglied

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>
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben