Beste SDers,

Ik zat met de vraag of het mogelijk is met HTML5 en CSS3 om een afbeelding beneden af te zagen zodat het lijkt alsof het een beetje scheef staat. Een goed voorbeeld vind je hier: http://goo.gl/xcjDS

Dit kan ook met de div's op die pagina.

Alvast bedankt,
Jeroen

Kan dat niet al met normale CSS? Een background zo positioneren dat hij buiten beeld doorloopt en dan roteren met

Code:

   -webkit-transform:rotate(90deg);    -moz-transform:rotate(90deg);    -ms-transform:rotate(90deg);    -o-transform:rotate(90deg);    transform:rotate(90deg);

Aanvullend bericht:
Kan de post niet aanpassen, bedoeling was een URL ipv de code: http://nicolasgallagher.com/css-background-image-hacks/

Origineel gepost door Joshua de Gier

Kan dat niet al met normale CSS? Een background zo positioneren dat hij buiten beeld doorloopt en dan roteren met

Code:

   -webkit-transform:rotate(90deg);    -moz-transform:rotate(90deg);    -ms-transform:rotate(90deg);    -o-transform:rotate(90deg);    transform:rotate(90deg);

Aanvullend bericht:
Kan de post niet aanpassen, bedoeling was een URL ipv de code: http://nicolasgallagher.com/css-background-image-hacks/

Daar dacht ik ook al aan, maar hoe positioneer ik hem goed?
Met het draaien van de afbeelding draai je de afbeelding ook echt, wat in het voorbeeld niet is. Daar staat de afbeelding recht en wordt de onderkant afgesneden.

Ik denk dat ze daar gewoon één grote afbeelding schuin hebben afgesneden in bijv. Photoshop.

Origineel gepost door Jos van M

Ik denk dat ze daar gewoon één grote afbeelding schuin hebben afgesneden in bijv. Photoshop.

Dat hebben ze volgens mij niet gedaan hoor.
Hoe doen ze dit anders met de div's?

Buiten het feit dat je div's ook binnen andere div's kunt plaatsen, is het ook mogelijk om een afbeelding in stukken te knippen en als aparte div's naast elkaar te positioneren. Ik denk dus niet dat dat een probleem is.

Ik heb even gekeken:

Overal waar er iets is afgesneden staat er:
<div class="triangle_top"></div>

De afbeelding op de site is in het bronbestand ook niet afgesneden, dus het zou in principe mogelijk moeten zijn om het in html te doen, niet?

Hun hebben gebruik gemaakt van een canvas.

De grote afbeeldingen zijn gewoon normaal recht en door er een schuine canvas erover te plaatsen hebben ze dit effect bereikt. Je kan natuurlijk in plaats van de canvas ook gewoon een witte image maken die schuin is.

De manier van Leon is inderdaad ook een goede, daar had ik zelf ook nog niet aan gedacht. :)

Origineel gepost door Leon Zoutewelle

Hun hebben gebruik gemaakt van een canvas.

De grote afbeeldingen zijn gewoon normaal recht en door er een schuine canvas erover te plaatsen hebben ze dit effect bereikt. Je kan natuurlijk in plaats van de canvas ook gewoon een witte image maken die schuin is.

Hoi Leon,

Hoe werkt dit dan juist?

Jeroen

In het simpel.

Je hebt 2 divs.
in div1 zitten de foto's
in div2 zit een canvas of een wit plaatje wat schuin is gemaakt. Ligt eraan wat jij het fijnst vind.

Door div2 over div1 te leggen krijg je dus dit effect.