Afbeelding schuin zetten met een schaduw

Hier word ik weer zo blij van. Dit scheelt uren werk vergeleken met een paar jaar geleden.

De code is gewoon van w3schools.com gehaald.

Een plaatje iets buiten het vlak, een beetje gekanteld en een schaduwtje.

Op deze manier, ernaast de afbeelding zonder onderstaande CSS:

gekantelde afbeeldingniet gekantelde afbeelding

[code]

img.mjh_img {
position: relative;
top: -25px;
left: -45px;
transform:rotate(3deg);
-ms-transform:rotate(3deg); /* IE 9 */
-webkit-transform:rotate(3deg); /* Opera, Chrome, and Safari */
box-shadow: 2px 4px 8px #333;
}

[/code]

De position staat op relative, zodat ik met top en left de afbeelding iets buiten het kader kan plaatsen.

De transform zorgt voor het draaien. Je kun bij (3deg) ook een andere waarde invullen.

De box-shadow kun je ook naar eigen hand zetten. Je kunt bij w3schools.com experimenteren.

Veel plezier ermee!

Wil je reageren?

Graag!
Je kunt hier een berichtje achterlaten. Het is noodzakelijk daarvoor je naam en emailadres in te vullen. Het emailadres zal nooit openbaar worden gemaakt.
Na goedkeuring door WP-bieb zal je bericht op de website verschijnen.

*