SKEW VOORBEELD

Vijftien regeltjes CSS in de style-sheet en in de body een <h1> zijn genoeg om deze "skew" op het scherm te zetten. Alleen voor het "gezicht" heb ik kleine ronde hoekjes aan het geheel gegeven, maar je kan rustig alle "illegale" code (de border-radius) verwijderen. Zolang je maar de transform-regels laat staan zal alles werken.

		<style type="text/css">
			h1{
				border-radius:8px;
				-moz-border-radius:8px;
				-khtml-border-radius:8px;
				-webkit-border-radius:8px;
				background:#040;
				color:#B4B282;
				font-size:3em;
				margin-left:80px;
				padding:0.1em 1em 0.1em 1em;
				position:absolute;
				-moz-transform: matrix(1, 0, 0.6, 1, 0, 0);
				-webkit-transform: matrix(1, 0, 0.6, 1,  0, 0);
				-o-transform: matrix(1, 0, 0.6, 1,  0, 0);
				filter:Wave(Add=0,Freq=1,LightStrength=50,Phase=50,Strength=10);
				border-left:8px inset #070;border-bottom:5px outset #75BF68;}
		</style>

Hierboven staat de style-sheet van de css-skew pagina. Als je een <h1>-tag ergens op de pagina zet, zal de tekst, daarin, weergegeven worden zoals in het voorbeeld. Verder niets te melden. Alles is valide html5 en de boel werkt geheel cross-broser zonder een snippertje javascript. Het is niet echt nodig maar toch geef ik de link waar je de broncode van de puur-css-skew pagina kan "copy/pasten".

Update:
De regel:
filter:Wave(Add=0,Freq=1,LightStrength=50,Phase=50,Strength=10);
die eerst in de procedure stond, is nu vervangen door:
filter:progid:DXImageTransform.Microsoft.Matrix(M11="1",M12="-0.2",M21="-0.2",M22="1",sizingMethod='auto expand');
Ze werken allebei, maar geven een verschillend skew-effect.

cache 06-02-2011