nicht angemeldet
Bild drehen
Gunnar BittersmannHallo,
auf der ntv-Webseite gibt es ein "Bild des Tages", das um etwa 30 Grad gedreht vor einem Polaroid-Rahmen gesetzt dargestellt wird.
Beispiel:
www.n-tv.de/politik/politik_kommentare/Ich-bin-Web-2-0-article216643.html
Nach Extraktion des entsprechenden Quellcodes (s.u.) kann ich nicht nachvollziehen, wie dieser funktioniert.
D.h. wie wird die Drehung des Bildes erzielt, und wie die Verwendung des Polaroid-Bildes als Hintergrund?
Danke für die Hilfe
Sebastian
<!-- source: www.n-tv.de/politik/politik_kommentare/Ich-bin-Web-2-0-article216643.html -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
body { font-size: 75%; color: #000; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;}
img { border: 0; }
#wrapper_sidebar { float: right; overflow: hidden; width: 300px; }
/* bild des tages */
#wrapper_sidebar .dayimage { text-align: center; }
#wrapper_sidebar .dayimage a { display: block; position: relative; height: 297px; padding-top: 10px; }
#wrapper_sidebar .dayimage a img.mask { position: absolute; top: 0px; left: 0px; }
*html #wrapper_sidebar .dayimage a img.mask { display: none; }
*html #wrapper_sidebar .dayimage a { height: auto; padding: 0; }
</style>
</head>
<body>
<div id="wrapper_sidebar">
<div class="dayimage">
<a title="US-Soldaten auf Patrouille gehen in der Nähe des Dorfes Sai'dano Kalache im Arghandab-Tal auf einen Afghanen zu, um ihn zu befragen." href="http://www.n-tv.de/mediathek/bilderdestages/?d=2011-04-15&bid=3113861">
<img src="http://www.n-tv.de/img/31/3113861/Img_4_3_270_2011-04-15T103423Z-01-RCS03-RTRMDNP-3-AFGHANISTAN.JPG5117022431264639532.jpg" width="270" alt="US-Soldaten auf Patrouille gehen in der Nähe des Dorfes Sai'dano Kalache im Arghandab-Tal auf einen Afghanen zu, um ihn zu befragen." border="0" height="202" /><img class="mask" src="http://www.n-tv.de/resources/ver1-0/img/bdt_mask.png" alt=""/></a>
</div>
</div>
</body>
</html>
-
Hallo,
das ist nichts gedreht. Es sind einfach zwei Bilder übereinandergelegt, wobei das vordere Bild im Teil des Rahmens durchsichtig ist.
Gruss
MrMurphy
-
Lieber MrMurphy,
Es sind einfach zwei Bilder übereinandergelegt, wobei das vordere Bild im Teil des Rahmens durchsichtig ist.
verlinken wir doch noch dazu: Rahmen und das Inhaltsbild.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
Om nah hoo pez nyeetz, Felix Riesterer!
Es sind einfach zwei Bilder übereinandergelegt, wobei das vordere Bild im Teil des Rahmens durchsichtig ist.
wobei natürlich der Eindruck entsteht, das Bild wäre tatsächlich gedreht. Wäre ein anderes Motiv verwendet worden, zum Beispiel ein Bild eines Turmes, sähe man deutlicher, dass das Bild nicht gedreht wurde.
Hinweisen möchte ich noch darauf, dass es auch mit CSS möglich ist, Elemente zu drehen. [Beispiel auf bittersmann.de]
Matthias
--
1/z ist kein Blatt Papier.
-
Hallo,
"Hinweisen möchte ich noch darauf, dass es auch mit CSS möglich ist, Elemente zu drehen."
Es wäre vielleicht angebracht dazu zu schreiben, das es sich bei dem Beispiel um "inoffizielles" CSS handelt, das nicht in jedem Browser funktioniert.
Gruss
MrMurphy
-
@@MrMurphy:
nuqneH
Es wäre vielleicht angebracht dazu zu schreiben, das es sich bei dem Beispiel um "inoffizielles" CSS handelt
„Inoffiziell“? [CSS3-2D-TRANSFORMS] sollte offiziell genug sein.
das nicht in jedem Browser funktioniert.
In NCSA Mosaic natürlich nicht. Es funktioniert in Chrome, Firefox, Opera und Safari. Im IE kann man mit dessen proprietärem Filter drehen.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
@@Matthias Apsel:
nuqneH
Wäre ein anderes Motiv verwendet worden, zum Beispiel ein Bild eines Turmes, sähe man deutlicher, dass das Bild nicht gedreht wurde.
Ähm, wirklich? ;-)
BTW, ich vor kurzem da.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
