[CSS] Schuine div

Erwin, kijk hier eens:
http://www.phphulp.nl/php/tutorial/scripting-ajax-html-css/html-in-2012/767/
Als je tijd hebt, kijk eens naar de video. Daar wordt mooi getoond hoe iemand, al doende, nadenkt over semantiek

Erwin,

Doormiddel van CSS pseudo elements kun je als het ware elementen toevoegen aan de DOM van een pagina met CSS. Dit gebeurd in het echt niet zo, maar het lijkt er wel heel erg op (vandaar ook de naam pseudo elements).

Een voorbeeld van een pseudo element:

<h1>Hello World</h1>
<style>h1::first-letter  { color: #c33; }</style>

Wat ::first-letter eigenlijk doet is dit:

<h1><span class="first-letter">H</span>ello World</h1>
<style>h1 .first-letter { color: #c33; }</style>

Een psuedo element die je veel gebruikt in CSS is ::before en ::after. Met deze 2 psuedo elements kun je een element toevoegen als child van het element die je selecteert. Before voegt het element aan het begin toe en ::after aan het eind:

<h1>Hello world</h1>
<style>h1::before { content: 'Titel: '; }</style>

===== Wordt =====
<h1><span class="before">Titel: </span>Hello World</h1>

Het voordeel van deze 2 psuedo elements is dat je deze mooi kunt stijlen. Als je als content een lege string, of een spatie, meegeeft zit er geen content in. Even het span element display: block; maken en hij gedraagt zich gewoon als een leeg div element.

PS: Ik gebruik hier ::before, in CSS3 is het normaal dat je psuedo elements met :: doet en pseudo selectors met :. Helaas was deze regel er nog niet bij het uitkomen van IE9 en dus accepteert IE9 ::before nog niet.

Ik heb het hele topic niet door gelezen maar voorzover ik weet is het last tot niet mogelijk om een schuine div te maken.

Ik zou het als volgt maken, gewoon een footer div maken en die gewoon breedte van 100% geven en deze een background afbeelding mee geven van 2000 pixels en deze centreren?

Ah, kijk, daar heb ik inderdaad wel iets aan. Dank voor de uitleg!
Begrijp ik het dan goed dat het pseudo element zich standaard altijd als een (soort) span gedraagt?

@Kris, dank voor de link. Ik heb nog niet de hele video kunnen bekijken, maar dat komt zeker nog wel.
Op zich moet ik wel zeggen dat het me in dit geval echt specifiek om die pseudo elementen ging. Eerlijkheidshalve moet ik zeggen dat ik daar nog nooit eerder mee in aanraking ben gekomen, dus ook nog niet van hoe te gebruiken. Semantisch gebruik van HTML daar heeft Wouter me als eens eerder de voordelen van leren kennen.... of ik het helemaal juist doe is dan uiteraard wel weer een tweede :-)

Begrijp ik het dan goed dat het pseudo element zich standaard altijd als een (soort) span gedraagt?

Een pseudo element heeft eigenlijk niet echt een basis stijl en kan zich dus ook als niks gedragen.
Als een element geen default stijl heeft kun je stellen dat het display: inline; is en daarom lijkt het erg op een span en daarom gebruik ik het in mijn voorbeeld ook.

@Wouter, hartelijk bedankt! Dat is inderdaad helemaal wat ik zoek.. Ik laat het hier weten als ik er niet uitkom. ;)

[edit]
Klein probleem, zoals je misschien ziet gebruik ik nog een kleine kleurovergang in mijn footer maar doordat het niet één blok is kan ik dat nu niet meer gebruiken?

Opgelost
[/edit]

Je kan 2 <div>'s of <span>'s over elkaar gezetten.
De onderste met een gradient.
De bovenste (wit) schuin.

Nieuw probleem, in FF is er onder de footer een vervelende witte strook. Ik heb alles geprobeerd maar ik vind het probleem niet! Het gaat over deze pagina.

Iemand die het wel weet?
Dank!

Ik gebruik FF en ik heb geen witte strook eronder...

Ok, bedankt. Heb FF geüpdatet en het is in orde.