Mehr Spass mit CSS3 in Webkit und Safari

Anmerkung vorne weg: dieser Artikel enthält Demonstrationen von CSS-Techniken, die weder in allen Webbrowsern schon noch in RSS-Readern jemals funktionieren werden.

Am weitesten bei der Implementierung von CSS 3D Transformationen sind Webkit (der Browser), Safari4 und mobile Safari (iPhone OS 3). In meiner Chrome 5.0.322.2dev-Version auf dem Mac funktioniert es noch nicht, sehr wohl aber im iPhone-Simulator. In der folgenden Demo (die nur Nutzer der genannten Browser live sehen können, für die anderen gibt’s ein Video) wird eine einfache 3D Transformation gezeigt, basierend auf zwei Bildern, von denen eines um 180° auf der Y-Achse gedreht wurde, und dann werden auf „onclick“ beide Ebenen gedreht. Bitte nicht nachmachen: den onlick-Event habe ich zu Demozwecken inline definiert, sowas macht man nicht. Und so sieht das ganze aus:

httpvh://www.youtube.com/watch?v=M8i15iEFJaY
Jay und Bob
Jay und Bob

Nebenbei, die Bilder sind übrigens aus Clerks II, ein von mir dringend empfohlener Streifen über die soziale Lage in den USA. Hier jedoch zunächst als Beweis sozusagen der HTML-Code auf dem der Trick beruht:

[html]<div id="flip-container">
<div class="card" onclick="jQuery(this).toggleClass(‚flipped‘);">
<div class="front face">
<img src="img/00009-620×353.png" alt="Jay und Bob" />
</div>
<div class="back face">
<img src="img/00014-620×353.png" alt="Jay und Bob" />
</div>
</div>
</div>[/html]

Und hier das CSS mit allen Erklärungen in den Kommentaren.

[css]#flip-container {
display: none; /* unsichtbar, stattdessen ist .video zu sehen */
position: relative;
width: 620px;
height: 353px;
z-index: 1;
}

/*
* Hier die Magic, Teil 1:
* mit diesem CSS-Mediaquery wird auf die Fähigkeit
* geprüft, CSS 3D darstellen zu können
* siehe auch: http://reference.sitepoint.com/css/mediaqueries
*/
@media all and (-webkit-transform-3d) {

.video {display:none;} /* Video ausblenden */

#flip-container {
cursor: pointer;
display: block; /* ausgeblendeten Container einblenden */
-webkit-perspective: 800; /* unser Betrachtungsabstand zum Objekt, 200 wäre sehr nah, 1200 weit weg… */
}

.card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d; /* weitere Möglichkeit: "flat", aber dann wäre der schöne Effekt des Drehens weg */
-webkit-transition: -webkit-transform 1s; /* Dauer einer Drehung */
}

.face.back {
/*
* Magic Teil 2:
* Das zweite Bild wird an der Y-Achse um 180° gedreht und ist dann hinter dem ersten Bild.
*/
-webkit-transform: rotateY(180deg);
}

.face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* gibt an, welches der beiden Bilder zu sehen ist, hier: das HINTERE ist versteckt */
}

.card.flipped {
/*
* Der Magic dritter Teil:
* per onclick wird die Klasse .flipped an das Element gesetzt,
* die Transformation läuft ab, mit dem Zeitweit der Klasse .card, also 1s
*/
-webkit-transform: rotateY(180deg);
}

} /* Ende: @media */[/css]

Welcome back

httpvh://www.youtube.com/watch?v=Hjej2V_yh5k

Die machen da genau das, was ich mir seit Jahren wünsche, wenn ich abends mit dem Zug in den Lübecker Hauptbahnhof einfahre. Leute mit Schildern, die einen Willkommen heissen. Einfach schön. (Von meiner Frau per Mail).

CSS3 in Action

Jay & Bob

Jay and Silent Bob

Die Möglichkeiten, die uns CSS3 heute schon bietet, sind durchaus vielfältig. Klar, nicht alle Browser unterstützen das, aber so what? Das Bild von Jay und Silent Bob ist nur eine sehr übertriebene Demo. Mit den neuen Funktionalitäten wie border-image lassen sich auch sinnvolle DInge anstellen, z.B. Buttons. Ebenso sollte man direkt anfangen, gradients einzusetzen, Schriften und text-shadow. Hier der Code für die Demo oben:

[css]/* Schrift definieren */
@font-face {
font-family: ‚YanoneKaffeesatz-Bold‘;
src: url(‚fonts/YanoneKaffeesatz-Bold.eot‘);
src: local(‚YanoneKaffeesatz-Bold‘), local(‚Yanone Kaffeesatz Bold‘), url(‚YanoneKaffeesatz-Bold.otf‘) format(‚opentype‘);
}

.demo {
background: #fff;
/* Farbverlauf */
background-image: -webkit-gradient(linear, left top, left bottom,
from(#ff8000), to(#fff)
);
background-image: -moz-linear-gradient(-90deg,#ff8000,#fff);
/* border-image */
border: 137px solid #666;
-webkit-border-image: url(img/frame.png) 137 137 137 137 repeat repeat;
-moz-border-image: url(img/frame.png) 137 137 137 137 repeat repeat;
/* der normale stuff */
height: 480px;
margin-bottom: 40px;
position: relative;
width: 340px;
}

.demo p {
color: #fff;
font-family: YanoneKaffeesatz-Bold;
font-size: 80px;
margin-top: 20px;
text-align: center;
text-shadow: #000 0 0 20px;
-webkit-text-stroke: 1px #666; /* gibt’s derzeit nur in Webkit */
}[/css]

Falls Du oben nichts, oder nur ein Bild mit einem langweiligen grauen Rahmen sehen kannst: so sieht’s aus in Google Chrome (Demobild).

Filme

Meine Frau wurde gefragt, welche Filme der Top100 der erfolgreichsten Filme sie schon gesehen hat. Das wollte ich für mich auch mal wissen, und so präsentiere ich hier, zum allerersten und bestimmt auch zum letzten Mal, mit nur knapp fünf Jahren nach der Mode: ein Stöckchen (hust! hust!) bei Codecandies:

  1. Avatar – Aufbruch nach Pandora 2009 James Cameron
  2. Titanic 1997 James Cameron
  3. Der Herr der Ringe – Die Rückkehr des Königs 2003 Peter Jackson
  4. Pirates of the Caribbean – Fluch der Karibik 2 2006 Gore Verbinski
  5. The Dark Knight 2008 Christopher Nolan *
  6. Harry Potter und der Stein der Weisen 2001 Chris Columbus
  7. Pirates of the Caribbean – Am Ende der Welt 2007 Gore Verbinski
  8. Harry Potter und der Orden des Phönix 2007 David Yates
  9. Harry Potter und der Halbblutprinz 2009 David Yates
  10. Der Herr der Ringe – Die zwei Türme 2002 Peter Jackson
  11. Star Wars Episode 1 – Die dunkle Bedrohung 1999 George Lucas
  12. Shrek 2 – Der tollkühne Held kehrt zurück 2004
  13. Jurassic Park 1993 Steven Spielberg
  14. Harry Potter und der Feuerkelch 2005 Mike Newell
  15. Spider-Man 3 2007 Sam Raimi
  16. Ice Age 3 2009 Carlos Saldanha, Mike Thurmeier
  17. Harry Potter und die Kammer des Schreckens 2002 Chris Columbus
  18. Der Herr der Ringe – Die Gefährten 2001 Peter Jackson *
  19. Findet Nemo 2003 Andrew Stanton *
  20. Star Wars Episode 3 – Die Rache der Sith 2005 George Lucas
  21. Transformers – Die Rache 2009 Michael Bay
  22. Spider-Man 2002 Sam Raimi
  23. Independence Day 1996 Roland Emmerich
  24. Shrek der Dritte 2007 Chris Miller
  25. Krieg der Sterne 1977 George Lucas *
  26. Harry Potter und der Gefangene von Askaban 2004 Alfonso Cuaron
  27. E.T. – Der Außerirdische 1982 Steven Spielberg
  28. Der König der Löwen 1994 Roger Allers, Rob Minkoff
  29. Indiana Jones und das Königreich des Kristallschädels 2008 Steven Spielberg
  30. Spider-Man 2 2004 Sam Raimi
  31. 2012 2009 Roland Emmerich
  32. The Da Vinci Code – Sakrileg 2006 Ron Howard
  33. Die Chroniken von Narnia – Der König von Narnia 2005 Andrew Adamson
  34. Matrix Reloaded 2003 Andy & Larry Wachowski
  35. Oben 2009 Pete Docter, Bob Peterson
  36. Transformers 2007 Michael Bay
  37. New Moon – Biss zur Mittagsstunde 2009 Chris Weitz
  38. Forrest Gump 1994 Robert Zemeckis *
  39. The Sixth Sense 1999 M. Night Shyamalan
  40. Fluch der Karibik 2003 Gore Verbinski
  41. Ice Age 2 2006 Carlos Saldanha
  42. Star Wars Episode 2 – Angriff der Klonkrieger 2002 George Lucas
  43. Kung Fu Panda 2008 Mark Osborne, John Stevenson
  44. Die Unglaublichen 2004 Brad Bird
  45. Hancock 2008 Peter Berg
  46. Ratatouille 2007 Brad Bird
  47. Vergessene Welt – Jurassic Park 1997 Steven Spielberg
  48. Die Passion Christi 2004 Mel Gibson
  49. Mamma Mia! 2008 Phyllida Lloyd
  50. Madagascar 2 2008 Eric Darnell, Tom McGrath
  51. 007 – Casino Royale 2006 Martin Campbell
  52. Krieg der Welten 2005 Steven Spielberg
  53. Men in Black 1997 Barry Sonnenfeld *
  54. 007 – Ein Quantum Trost 2008 Marc Forster
  55. I Am Legend 2007 Francis Lawrence
  56. Iron Man 2008 Jon Favreau
  57. Nachts im Museum 2006 Shawn Levy
  58. Mission: Impossible 2 2000 John Woo
  59. Armageddon 1998 Michael Bay
  60. King Kong 2005 Peter Jackson
  61. The Day After Tomorrow 2004 Roland Emmerich
  62. Das Imperium schlägt zurück 1980 Irvin Kershner *
  63. Wall-E – Der Letzte räumt die Erde auf 2008 Andrew Stanton
  64. Kevin – Allein zu Haus 1990 Chris Columbus
  65. Madagascar 2005 Eric Darnell, Tom McGrath *
  66. Die Monster AG 2001 Pete Docter *
  67. Die Simpsons 2007 David Silverman
  68. Terminator 2 – Tag der Abrechung 1991 James Cameron
  69. Ghost – Nachricht von Sam 1990 Jerry Zucker
  70. Meine Frau, ihre Schwiegereltern und ich 2004 Jay Roach
  71. Aladdin 1992 John Musker, Ron Clements
  72. Troja 2004 Wolfgang Petersen
  73. Twister 1996 Jan De Bont
  74. Indiana Jones und der letzte Kreuzzug 1989 Steven Spielberg
  75. Illuminati 2009 Ron Howard
  76. Toy Story 2 1999 John Lasseter
  77. Bruce Allmächtig 2003 Tom Shadyac
  78. Shrek – Der tollkühne Held 2001 Andrew Adamson, Vicky Jenson
  79. Der Soldat James Ryan 1998 Steven Spielberg
  80. Mr. & Mrs. Smith 05 Doug Liman
  81. Die Rückkehr der Jedi-Ritter 1983 Richard Marquand *
  82. Charlie und die Schokoladenfabrik 2005 Tim Burton
  83. Gladiator 2000 Ridley Scott
  84. Der weiße Hai 1975 Steven Spielberg *
  85. Hangover 2009 Todd Phillips
  86. Mission: Impossible 1996 Brian De Palma
  87. Pretty Woman 1990 Garry Marshall
  88. Cars 2006 John Lasseter
  89. Matrix 1999 Andy & Larry Wachowski *
  90. X-Men – Der letzte Widerstand 2006 Brett Ratner
  91. Das Vermächtnis des geheimen Buches 2007 Jon Turteltaub
  92. Last Samurai 2003 Edward Zwick
  93. Tarzan 1999 Kevin Lima, Chris Buck
  94. 300 2007 Zack Snyder
  95. Ocean’s Eleven 2001 Steven Soderbergh
  96. Pearl Harbor 2001 Michael Bay
  97. Men in Black II 2002 Barry Sonnenfeld
  98. Sherlock Holmes 2009 Guy Ritchie
  99. Das Bourne Ultimatum 2007 Paul Greengrass
  100. Mrs. Doubtfire – Das stachelige Kindermädchen 1993 Chris Columbus

86 von 100. Wieviele ich davon schlussendlich gut, bemerkenswert oder wenigstens cool (*) fand: 12 Stück. Miese Bilanz.

Webkit goes BlackBerry

So tomorrow, next week, next month, but as soon as you can, I want you to try this experiment with your clients, whether they be external or internal at your organisation.

Ask them outright,

What would you prefer me to do?

Spend my time hacking around issues in older technologies like Internet Explorer 6 or would you like that time spent making the site look the best that it can on better desktop browsers, as well as on the iPhone, iPod Touch, iPad, Blackberry and a whole host of other mobile devices?

I have a feeling I know what the answer will be, but I don’t have your clients or your day job or your approach to dealing with people. I have my own.

iPad: Retter der Witwen und Waisen?

Da platzt mir der Kragen.

Auch bei Wired glaubt man, mit dem iPad und anderen Tablet PCs nun die Verlagskrise überwinden zu können.

Leute, das Video trägt den Titel: »Wired Magazine Goes Digital«. Das ist lustig, wo ich es doch gerade auf der höchst digitalisierten Website von Wired ansehe. Aber jetzt, jetzt werden sie richtig digital:

This is what we’re waiting for for 15 years! We’ve been waiting for an opportunity to use all these visual tools [..] to tell these stories in a way that is effcient, that is multidimensional.

Chris Anderson, Editor in Chief, WIRED

Dabei ist alles was wir in der App sehen:

  • PDFs der Artikelstartseiten horizontal aneinandergereiht
  • PDFs der Artikelseiten vertikal darunter gruppiert
  • Animationen einzelner Elemente auf den Seiten (Wired verzichtet hierbei übrigens aufs Umbättern, aber das wird man auch noch zu Genüge finden)
  • 360° Animationen (Quicktime VR?)
  • Alles das auch gleichzeitig in nur ungenügend gekennzeichneter Werbung
  • bei Facebook empfehlen (darf in keiner App und keinem Werbevideo fehlen, schnarch)
  • Videos

Das ist nichts, was man nicht auch auf einer Website machen kann. Das nun die Leute dafür bezahlen werden, eine steile These. Man bedenke die zusätzlichen Produktionskosten, für 360°-Fotografien, Videodrehs, zusätzliche Aufbereitung. Exorbitant höhere Kosten, als für den Druck einer Zeitung oder das Erstellen einer Website. Und das kommt wieder rein? Durch Werbung? Die Werbekunden übertragen wir gleich mit auf das Tablet? Was sind die bereit, dafür zu zahlen?