Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

  • PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
  • Über 2200 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 500 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 1000 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
  • Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
  • Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.

Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.

Das Punktesystem

Einen winzigen Haken gibt es noch. Es gibt bei uns ein Punktesystem. Damit soll erreicht werden, dass Mitglieder sich aktiv in unserer Community beteiligen. Sobald du im Forum schreibst oder Tutorials kommentierst, bekommst du Punkte. Mit diesen Punkten kannst du wiederum Tutorials anschauen oder Downloads herunterladen. Mit der Registrierung bei PSD-Tutorials.de erhältst du ein Startguthaben von 100 Punkten, womit du schon ein gutes Stück weit kommst.

Jetzt kostenlos registrieren!

DVD-Werbung
Passend zum Inhalt empfehlen wir unsere:

Photoshop-Workshop-DVD - Webdesign

  • Webdesign mit Photoshop: alle erstellten Layouts mit Arbeitsdatei (PSD)!
  • Umsetzung erstellter Weblayouts in HTML/CSS
  • Tipps & Tricks zum Webdesign in Photoshop und zur Webentwicklung
Jetzt informieren Trailer ansehen

Kommentare

  • Alternative Portrait von mindraper

    mindraper

    06.04.2012 - 04:34

    So schön das ganze auch ist, solange der IE 10 nicht eine höhere Verbreitung hat als der IE 9, sind die ganzen CSS-Animations, -Transitions und -Transforms eine spannende Sache. Aber für den Gebrauch im Arbeitsalltag noch nicht einsetzbar. Da bleibt dann doch wieder nur JavaScript.

    M. E. nach ist das Ganze dann auch in letzter Konsequenz eine Frage des eigentlichen Sinn und Zwecks. Für eine simple Slideshow im privaten Rahmen kann man ja ohne Zweifel auf CSS3 umsatteln, sobald dann aber beispielsweise Änderungen in einer darunter befindlichen Textbox o. ä. bei einem Bildwechsel dazukommen, ist CSS auch schon wieder am Ende seiner Möglichkeiten und es führt kein Weg an JavaScript vorbei.

    Trotz dessen natürlich nice, dass es wenigsten in diesem Umfang schonmal auch auf breiter Front unterstützt wird. Und wer weiß? Vielleicht wird ja der IE 10 der beste Browser der Welt? *har har*

  • Alternative Portrait von Daniel_Knecht

    Daniel_Knecht

    01.02.2012 - 13:08

    Schade selbst im Firefox geht bei mir da nichts :(

    • Portrait von simonpicos

      simonpicos

      03.02.2012 - 13:26

      Erklär doch mal was genau nicht funktioniert, oder beschreibe dein Problem näher. Mache dazu am besten nen Thread im Forum auf, oder schick mir ne pm :)

    • Portrait von elyion_g2

      elyion_g2

      08.03.2012 - 13:52

      Kommt auf die Browser-Version an. Also ich nutze Google Chrome - der unterstützt wie von mir schon mehrmals erwähnt ALLE MODERNEN STANDARDS und nicht wie Firefox oder Internet Explorer nur paar wenige.

  • Portrait von Alukard_der_III

    Alukard_der_III

    01.02.2012 - 10:11

    Cooles Tutorial,

    gibt schon mal eine gute Vorschau was mit CSS alles so möglich ist.
    Außerdem hat man eine gute Vorlage selber mal ein bisschen was aus zu probieren.

    Ich würde mir für den zweiten Teil noch animationen mit Bildern wünschen alias GIF´s.

    Auch ein kleine Vorschau wie das ganze animiert aussieht wäre nicht schlecht.

    Aber sonst wirklich coole Sache!!!

    • Portrait von elyion_g2

      elyion_g2

      08.03.2012 - 13:54

      http://www.elyion.ch/infinite.html .. hier habt ihr eine vorschau... ich habe das was im zweiten Teil noch behandelt wird gleich auch mal eingebaut... ganz liebe grüsse aus der schweiz :)

  • Alternative Portrait von pTown

    pTown

    30.01.2012 - 15:31

    hätte man ggf ein wenig ausführlicher gestalten können...

    • Portrait von simonpicos

      simonpicos

      30.01.2012 - 17:14

      Ist ja erst der erste Teil. Das zweite Tutorial kommt in der nächsten Zweit und wird dann die tiefer gehenden Techniken behandeln. Zitat: "Im zweiten Teil werden wir uns damit beschäftigen, wie man Animationen beispielsweise in einer Endlosschleife laufen lassen, den Ablauf der Animation beeinflussen oder die Animation per Klick anhalten kann. Und das Ganze OHNE JavaScript!"

Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

Tutorial empfehlen

 

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)


Im ersten Teil dieses Zweiteilers werde ich grundlegende Dinge zu den Animationen erklären. Das Beispiel und zwei weitere findet ihr in den Arbeitsdateien.


Definierung von Animationen

Bevor man ein HTML-Element animieren kann, muss man zuerst definieren, was denn genau animiert werden soll. Das geschieht mit der @keyframes-Regel.

Möchte ich beispielsweise, dass die Breite eines div von 200px auf 300px erhöht wird, muss ich Folgendes schreiben:

@keyframes animation-test {
    from {width:200px;}
    to {width:300px;}
}

@-moz-keyframes animation-test {
    from {width:200px;}
    to {width:300px;}
}

@-webkit-keyframes animation-test {
    from {width:200px;}
    to {width:300px;}
}

Für Webkitbrowser und Firefox muss eine Extraversion mit entsprechendem Präfix angelegt werden.



 

Definierung von Animationen (erweitert)

Mit der @keyframes-Regel sind nicht nur einfache Animationen möglich, man kann auch mehrere (beliebig viele) Zwischenschritte in einer Animation festlegen. Diese definiert man in %-Schritten.

@keyframes animation-test {
    0% {width:200px;}
    25% {width:100px;}
    50% {width:300px;}
    75% {width:400px;}
    100% {width:300px;}
}

@-moz-keyframes animation-test {
    0% {width:200px;}
    25% {width:100px;}
    50% {width:300px;}
    75% {width:400px;}
    100% {width:300px;}
}

@-webkit-keyframes animation-test {
    0% {width:200px;}
    25% {width:100px;}
    50% {width:300px;}
    75% {width:400px;}
    100% {width:300px;}
}

 

Abrufen der Animation + Festlegen von Animationsdauer und -verzögerung

Um die Animation mit dem Namen animation-test für ein HTML-Element abzurufen, muss man Folgendes im Stylesheet für dieses Element definieren:

element {
    animation-name: animation-test;
    -moz-animation-name: animation-test;
    -webkit-animation-name: animation-test;
}

Auch hier muss für Webkit und Firefox der entsprechende Präfix verwendet werden.

Nun legt man noch eine Dauer für die Animation fest (kann in Sekunden (s) oder Millisekunden (ms) angegeben werden):

element {
    animation-name: animation-test;
    animation-duration: 5s;
    -moz-animation-name: animation-test;
    -moz-animation-duration: 5s;
    -webkit-animation-name: animation-test;
    -webkit-animation-duration: 5s;
}

Als Letztes lässt sich noch nach Wahl eine Verzögerung vor Beginn der Animation einrichten (wieder in s oder ms):

element {
    animation-name: animation-test;
    animation-duration: 5s;
    animation-delay: 2000ms;
    -moz-animation-name: animation-test;
    -moz-animation-duration: 5s;
    -moz-animation-delay: 2000ms;
    -webkit-animation-name: animation-test;
    -webkit-animation-duration: 5s;
    -webkit-animation-delay: 2000ms;
}

 

Vereinfachte Schreibweise

Um Platz zu sparen, lassen sich alle Animationseigenschaften auch in einer Zeile definieren:

element {
    animation: animation-test 5s 2000ms;
    -moz-animation: animation-test 5s 2000ms;
    -webkit-animation: animation-test 5s 2000ms;
}

Vorschau

Im zweiten Teil werden wir uns damit beschäftigen, wie man Animationen beispielsweise in einer Endlosschleife laufen lassen, den Ablauf der Animation beeinflussen oder die Animation per Klick anhalten kann. Und das Ganze OHNE JavaScript!
vBulletin 0.043 • ZF-App 0.424 • Total 0.466