Ich versuche, einen "Polaroid" -Bild-Effekt nach rechts zu schaffen, kann aber nicht herausfinden, wie man zwei Dinge macht.css Bildabstand rechts
- Ich möchte einige Whitespace "um" das Schlagschatten/Polaroid-Bild, das ich erstellt habe, und Text fließen um es herum.
- Ich möchte sie übereinander legen. Das heißt, zuerst ein Bild, dann ein zweites Bild nach dem anderen (so sieht es aus, als ob ein Bild über einem anderen Bild sitzt, aber nur teilweise).
Irgendwelche Hinweise, wie man das macht?
Bilder sollten auf der "rechten" Seite erscheinen - aber mit einem Rand von etwa 50px (Leerzeichen). (Ich will einen Textblock, den ich eintippe - und die Bilder erscheinen am oberen Rand der Seite, aber ganz rechts, übereinander gestapelt, mit 50px Leerraum, so dass der Text nicht " berühren“das gedrehte Bild.
HTML
<div style="border:10px;border-style:solid">
<div class="polaroid rotate_right" style="float:right;z-index:100;">
<img src="sampleimage001" alt="">
<center>Picture 001</center>
</div>
<div class="polaroid rotate_left" style="float:right;">
<img src="sampleimage002" alt="">
<center>Picture 002</center>
</div>
</div>
Hier ist die CSS ich bin derzeit mit.
div.polaroid {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
padding: 10px 10px 20px 10px;
border: 1px solid #BFBFBF;
background-color: white;
box-shadow: 10px 10px 5px #aaaaaa;
}
div.rotate_right {
float: left;
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Safari */
transform: rotate(7deg);
}
div.rotate_left {
float: left;
-ms-transform: rotate(-8deg); /* IE 9 */
-webkit-transform: rotate(-8deg); /* Safari */
transform: rotate(-8deg);
}
Sie sollten mit 'Box-shadow' Eigenschaft –
'