Ex:periment4L

Taking HTML to the next level

What we have here is a demonstration page showing the product of my experimentation with some of the CSS3 definitions that have been implemented in Firefox and Safari (and probably others, but probably not IE). As these are still experimental, the browsers that have implemented the functionality have used their own prefixes, so -moz-transform and -webkit-transform. This allow us to rotate any block object by any arbitrary value, which creates some interesting effects - yes, all this is still text and can still be selected as normal! The menu on the left is also just text, although some fiddly positioning was required to get it to sit in the right place. Similarly, the images on the right have been absolutely positioned, and the rightmost image has been rotated by 90 degrees. Turn off the stylesheet (if you have that option in your browser) to see what it would look like normally.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus feugiat mattis neque porta eleifend. Vivamus in elit tellus. Quisque pellentesque nibh venenatis est pharetra eget lacinia mi molestie. Vivamus accumsan erat ut tortor vulputate fermentum. Praesent lacinia quam ac magna iaculis non condimentum arcu euismod.

This page demonstrates the power of the -moz-transform CSS definitions, allowing us to rotate objects to any angle we like. We're also using text-shadow on the main title, for an extra bit of spice!
Duis nec massa metus. Fusce venenatis, magna vel euismod ultricies, sem nisl iaculis quam, nec tempus risus tortor a odio. Nullam accumsan vulputate aliquet. Suspendisse potenti. Quisque pulvinar, magna sit amet posuere ullamcorper, justo mi imperdiet mauris, et porta dui metus a nunc. Etiam nec velit velit, at egestas est. Curabitur bibendum ipsum ut lectus fermentum sodales vitae sed ligula. Morbi luctus pretium enim, in sodales massa auctor vitae. Suspendisse potenti. Nulla pharetra ornare nisi, vel tincidunt neque ultrices eget. Duis convallis luctus libero, porttitor placerat felis vestibulum ac. Donec eget libero enim.

Aliquam et felis massa, vel ultrices ligula. Nulla nec lorem vel est imperdiet molestie. Cras interdum iaculis erat aliquet eleifend. Praesent sit amet elit nisl, vel pharetra ipsum. Sed in dolor eget felis luctus iaculis iaculis ut eros. Suspendisse quam lorem, consequat ultricies dignissim vel, condimentum in eros. Suspendisse fermentum feugiat vestibulum. Pellentesque a felis ut purus sodales aliquet vitae et velit. Nunc vitae dui felis, sed ullamcorper odio. Morbi tincidunt lectus eu lorem commodo posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras molestie mollis accumsan. Curabitur bibendum tincidunt purus, ac imperdiet ipsum tristique nec. Vivamus lacus arcu, varius sed aliquam sit amet, faucibus a velit. Integer eleifend facilisis odio, quis pellentesque metus blandit consectetur. Etiam tincidunt, elit a facilisis pulvinar, felis nisi pharetra risus, vitae dapibus ipsum tellus vel diam. Curabitur id augue felis.

This page was created by Matthew Dawkins.

image other image