Safari 4 Welcome mit CSS-Animation

von meggs | 0 | 3641 Aufrufe

Anzeige Hier werben

Wie vor kurzem berichtet wurde, befindet sich in den neuesten Webkit Nightly Builds. Ebenso wurde gestern der Safari 4 in einer ersten Public Beta veröffentlicht.

In diese Beta ist die letzte Webkit-Entwicklung eingeflossen und wurde gleich von Apple selbst ausprobiert. So ist der Welcome-Screen, den man zu gesicht bekommt, wenn man den gerade frisch installierten Safari 4 startet, mit eben dieser CSS-Technik kreiert worden. Außerdem werden neueste HTML5-Elemente verwendet, wie AUDIO. Damit ist diese Seite die vielleicht fortschrittlichste Website im World Wide Web.

Aber seht selbst (nur Safari 4 Beta oder Webkit Nightly): Welcome

Bild zu Safari 4 Welcome mit CSS-Animation
Quellcode der Welcome-Seite  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Welcome to Safari 4 - Apple Inc.</title>
    <meta name="omni_page" content="Safari - Welcome Screen" />
    <meta name="Category" content="" />
    <meta name="Description" content="" />
    <meta name="Author" content="Apple Inc." />
    <script type="text/javascript" src="http://images.apple.com/de/safari/welcome/scripts/safari.js" charset="utf-8"></script>
    <link rel="stylesheet" href="http://images.apple.com/de/safari/welcome/styles/safari.css" type="text/css" />
    <noscript>
        <meta http-equiv="refresh" content="0;url=topsites://" />
    </noscript>
</head>
<body>
    <audio id="music" src="http://images.apple.com/euro/safari/welcome/media/audio.mp4"></audio>

    <div id="header">
        <h1>Welcome to Safari 4</h1>
    </div>

    <div id="apple">
        <div class="icon"></div>
        <div class="spots"></div>
        <div class="flare"></div>
        <div class="flareicon"></div>
    </div>

    <div id="safari">
        <div>
            <video id="compass" src="http://images.apple.com/euro/safari/welcome/media/compass.mov" width="256" height="256">
                <img src="http://images.apple.com/euro/safari/welcome/images/safari.jpg" width="200" height="200" alt="Safari 4" />
            </video>
        </div>
    </div>

    <img src="http://metrics.apple.com/b/ss/appleglobal,appleusappwelcome/1/H.17/0?pageName=safari%20-%20welcome%20screen%20%28us%29&amp;channel=www.us.welcomescreen&amp;c1=www.us.safari.welcomescreen" />
</body>
</html>
Über den Autor: meggs
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Profilseite betrachten