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 3.000 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 1.900 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 2.200 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.
  • Registriere dich bei uns und du erhältst die Selection-DVD mit über 24 Stunden Video-Trainings zu Photoshop, InDesign uvm. als Download gratis (sofern Newsletter aktiviert). 

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.

Jetzt kostenlos registrieren!

DVD-Werbung
Passend zum Inhalt empfehlen wir:

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 Melly_maus

    Melly_maus

    18.03.2012 - 10:23

    Erweckt die Webseite zum Leben. Passt im Winter sehr gut. Vielen Dank!

  • Portrait von Bruhsman

    Bruhsman

    13.01.2012 - 13:22

    Mit der Homepage klappt es ja schon ganz gut. Da ich Flash weder besitze noch beherrsche gibt es keine Animationen etc. Dieses Tutorial kommt da genau richtig um etwas Leben ins Layout zu bringen. Danke!

  • Alternative Portrait von Niobe

    Niobe

    08.01.2012 - 11:25

    mmh, mir gefällt das, wobei hier Regen statt Schnee fällt. Was ich nicht verstehe, wie wird das script in ein bestehendes styles sheet eingebunden. CSS Kentnisse fehlen mir gänzlich.

    • Portrait von cebito

      cebito

      08.01.2012 - 11:51

      Indem du Schritt 5 auf den Body(Css) anwendest. Wenn du Probleme mit der Umsetzung von Tutorials hast, ist es besser damit ins Forum zu gehen, da bekommst du mehr und schnellere Hilfe.

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

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


Ohne große Vorrede - los geht's.


Schritt 1

Zunächst brauchen wir ein paar Hintergrundbilder für den Schnee. Ich habe mal 3 gemacht (500x500,400x400 und 300x300) - es können auch mehr sein - und noch eins, damit der Schnee nicht einfach so unten aus dem Browser fällt ;) Ihr könnt da ganz nach Belieben mit Pinselformen, -größen und -deckkraft spielen.

Bilder


Die speichert ihr ohne Hintergrund als transparente PNG ab.


 

Schritt 2

Wir erstellen das HTML-Gerüst:

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<meta name="description" content="description">

<title>Let it snow</title>

<link rel="stylesheet" media="screen" href="style.css">

</head>
<body>
    <h2>Let it snow</h2>
</body>
</html>



 

Schritt 3

Grundlegendes CSS und Einbinden der Hintergründe sowie einer passenden Schrift für h2.

@font-face {
  font-family: 'Spirax';
  font-style: normal;
  font-weight: 400;
  src: local('Spirax-Regular'), url('http://themes.googleusercontent.com/static/fonts/spirax/v1/wiA6NnIvV_zF9oTZ_yafzA.woff') format('woff');
}
*{margin:0;padding:0;
}
html,body{height:100%;}

body{
    text-align:center;vertical-align:middle;
    background-color: #6b92b9;
    background: url('snow.png'), url('snow2.png'), url('snow3.png'), url('snow4.png')repeat-x left bottom;
}
h2{
    display:inline-block;
    vertical-align:middle;
    text-align: center;
    color: #263A4E;
    font:150px 'Spirax', cursive;
    text-shadow:-2px -2px 4px #fff,2px 2px 4px #fff,2px -2px 4px #fff,-2px 2px 4px #fff;
    opacity:.5;
}
body:before{
    content:'';
    display:inline-block;
    vertical-align:middle;
    text-align: center;
    height:100%;
}



 

Schritt 4

Wir legen die Animationsschritte mit der @keyframe-Regel fest und geben ihr den Namen snow.

@-moz-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px, bottom; background-color:#263A4E;}
    100% {background-position: 500px 500px, 400px 400px, 300px 300px, bottom; background-color:#263A4E;}
}

@-webkit-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px, bottom; background-color:#263A4E;}
    100% {background-position: 500px 500px, 400px 400px, 300px 300px, bottom; background-color:#263A4E;}
}

@keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px, bottom; background-color:#263A4E;}
    100% {background-position: 500px 500px, 400px 400px, 300px 300px, bottom; background-color:#263A4E;}
}



Schritt 5

Wir rufen für den Body die Animation ab und legen Dauer, Animationsart und Wiederholung fest. Dafür ergänzen wir für den Body folgende Regeln:

    -webkit-animation: snow 20s linear infinite;
    -moz-animation: snow 20s linear infinite;
    animation: snow 20s linear infinite;


Das war's schon; dann lasst's mal kräftig schneien ...

Das komplette Beispiel inkl. Bildern könnt ihr als Arbeitsdatei herunterladen.
vBulletin 0.045 • ZF-App 0.524 • Total 0.569