Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » CSS » Kontrollierter Rückfall von CSS3-Eigenschaften – Übergänge (2)

Kontrollierter Rückfall von CSS3-Eigenschaften – Übergänge (2)

Auch wenn die neuen Browser-Versionen nach und nach CSS3 unterstützen - es sind noch immer genügend ältere Browser im Einsatz, die CSS3 nicht beherrschen. Wenn Sie neben Ihren Kunden auch sich selbst glücklich machen und CSS3 trotz der Rücksichtnahme auf IE & Co. einsetzen wollen, nutzen Sie diese Tipps, um CSS3-Eigenschaften in älteren Browsern möglichst passend auf andere Art zu ersetzen.

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 3 Minuten
  • von Gastautor
  • 29. April 2010
Bookmarke mich
Share on pocket

Jon Raasch

Auch wenn die neuen Browser-Versionen nach und nach CSS3 unterstützen – es sind noch immer genügend ältere Browser im Einsatz, die CSS3 nicht beherrschen. Wenn Sie neben Ihren Kunden auch sich selbst glücklich machen und CSS3 trotz der Rücksichtnahme auf IE & Co. einsetzen wollen, nutzen Sie diese Tipps, um CSS3-Eigenschaften in älteren Browsern möglichst passend auf andere Art zu ersetzen.

Graceful degradation – oder würdevoller Rückfall – nennt sich dieser Ansatz. In diesem zweiten Teil des Beitrags geht es um Übergänge. Teil 1 behandelte Farbverläufe, RGBa-Transparenz, abgerundete Ecken sowie Box- und Textschatten.

Die CSS3-Creme – Transitions

Übergänge gehören zu den nützlichsten Neuerungen in CSS3. Zudem fallen sie in älteren Browsern recht unproblematisch und von selbst zurück. Verwenden wir Übergänge also gleich einmal, um unsere Schaltfläche zu animieren:

.button {
    width: 200px;
    height: 50px;
    -webkit-transition-property: width, height; /* Chrome + Safari - properties to animate */
    -webkit-transition-duration: .5s; /* Chrome + Safari - animation duration */
    -webkit-transition-timing-function: linear; /* Chrome + Safari - animation easing */
    -moz-transition-property: width, height; /* future-proofing for Firefox 3.7 */
    -moz-transition-duration: .5s;
    -moz-transition-timing-function: linear;
    -o-transition-property: width, height; /* for Opera 10.5 */
    -o-transition-duration: .5s;
    -o-transition-timing-function: linear;
}

.button:hover {
    width: 300px;
    height: 75px;
}

Diese Animation funktioniert in Chrome, Safari und Opera, nicht jedoch in IE oder Firefox. In nicht-kompatiblen Browsern fallen die Übergänge jedoch von selbst auf einen einfachen Hover-Status zurück.

Um die Animation auch in IE und Firefox darzustellen, benötigen wir allerdings mehr als schlichtes CSS. Dafür nehmen wir jQuery, was wiederum eine Abfrage erfordert, ob der genutzte Browser Übergänge unterstützt oder nicht.

<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
// make sure to execute this on page load
$(function() {
    // determine if the browser supports transition
    var thisStyle = document.body.style,
    supportsTransition = thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.OTransition !== undefined || thisStyle.transition !== undefined;
}
</script>

Mit diesem Code prüfen wir das Dokumenttyp-Objekt, um zu sehen, ob Transition unterstützt, beziehungsweise in irgendeinem der Browser-Präfixe genannt wird. Wir hätten natürlich auch das Browser-Objekt von jQuery nutzen können. Das ist jedoch nicht empfehlenswert. Statt dieser Browser-Schnüffelei sollten Sie das Problem der Browser-Abfrage per Feature Detection lösen.

Als Nächstes lassen Sie uns der Schaltfläche, die den animierten Übergang auslöst, ein Hover-Ereignis zufügen:

// make sure to execute this on page load
$(function() {
    // determine if the browser supports transition
    var thisStyle = document.body.style,
    supportsTransition = thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.OTransition !== undefined || thisStyle.transition !== undefined;

    // assign jQuery transition if the browser doesn't support transition
    if ( ! supportsTransition ) {
        var defaultCSS = {
            width: 200,
            height: 50
        },
        hoverCSS = {
            width: 300,
            height: 75
        };

        // loop through each button
        $('.button').each(function() {
            var $thisButton = $(this);

            $thisButton.hover(function() {
                // execute this on mouseover
                $thisButton.css(defaultCSS)
                    .animate(hoverCSS, 500, 'linear' );
            }, function() {
                // execute this on mouseout
                $thisButton.animate(defaultCSS, 500, 'linear' );
            });
        });
    }
});

Hier weisen wir den CSS-Hover- und Normalzustand mithilfe der jQuery animate() API zu. Damit das Ganze der CSS3-Transition entspricht, haben wir die Animationsdauer auf 500 Millisekunden beziehungsweise .5s gesetzt und die Methode „linear“ für einen sanften Übergang gewählt.

Hinweis: Bei Mouseover wenden wir zuerst den CSS-Default-Zustand über die Query css() API zu. Erst danach rufen wir animate() über die CSS-Hover-Eigenschaft ab. Sinn und Zweck: Damit überschreiben wir die zugewiesene :hover-Pseudo-Klasse in unserem CSS-Code.

Damit funktioniert unser CSS-Übergang in allen gängigen Browsern. Dieses Skript können Sie abwandeln, um Übergänge mit jeder beliebigen CSS-Eigenschaft zu erstellen, die von jQuery.animate() unterstützt wird.

Diese Technik ist auf alle CSS-Attribute mit numerischen Angaben wie zum Beispiel Schriftgröße anwendbar. Zudem erweitert jQuery UI die animate()-Funktion, um nicht-numerische Attribute wie die Farbe zu unterstützen.

Ein paar Worte zum Schluss

Wenn auch nicht ganz perfekt, werden CSS3-Eigenschaften nun doch von allen modernen Browsern außer IE unterstützt.

Die Filter des IE nebst .htc-Hacks füllen die meisten dieser Lücken. Allerdings bringen diese Methoden jeweils diverse Nachteile mit sich. Im Allgemeinen sind sie ziemlich eigenwillig und problembehaftet, wenn es darum geht, mehrere Filter miteinander zu verbinden.

Letztendlich sind Hacks für nichtkompatible CSS3-Browser immer etwas suboptimal. Das sollte dennoch nie den Ausschlag dafür geben, Websites in modernen Browsern mit ausgefeilteren Eigenschaften und Funktionen auszustatten.

Einfach gesagt: Websites müssen nicht in jedem Browser exakt gleich aussehen.

(mm), ™

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Gastautor

Gastautor

Agenturpartner

marketer UX

Düsseldorf

Der Informations­designer

Kaufbeuren

Niels Neumann Online Marketing

Limburgerhof

ARIT Services GmbH

Laatzen

Optimerch GmbH

Dortmund

Alle Agenturpartner

Jobs

Senior SEO Manager

München

Frontend Development & Project Management

Remote

Elektroinstallateur – Rechenzentrum

Karlsruhe

Sprachtalente

Volkach oder Würzburg

Web Development & Project Management

Remote

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Alles zu CSS Background-Image (großer Leitfaden mit Codebeispielen)

Mit CSS Background-Image (deutsch: CSS-Hintergrundbild) kann man einem Element ein Hintergrundbild, Hintergrundvideo, eine Hintergrundfarbe oder einen Farbverlauf zuweisen.

 →   

Diese CSS-Selektoren sollten Sie kennen

Im CSS gibt es jede Menge interessanter Selektoren, die versierten Frontend-Entwicklern zwar grundsätzlich bekannt sind, die dennoch oftmals nur sparsam zum Einsatz kommen.

 →   

41 CSS-Buttons mit Hover-Effekt und den dazugehörigen Code-Schnippets

Für schön anzusehende CSS-Buttons benötigt es schon lange keine Grafiken mehr — sie lassen sich formen aus der Schönheit des geschriebenen Codes. Doch die Erstellung kann ganz schön knifflig werden, wenn du an eine umfassende Browser-Kompatibilität denkst. Wie gut, dass es fertige Code-Schnipsel und zahlreiche Beispiele dafür gibt. Und noch besser, dass wir heute die besten Beispiele auch gleich in diesem Beitrag präsentieren.

 →   

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.