And now for something different

[cybrax]

Not sure wether this should go in design or scripting as it's a bit of both, the layout itself probably sucks but the css has potential, take a look and tell us what you think.
http://www.cybrax.co.uk/a8_site/rotator3.html

 

[priyaa161]

everything rotated 15 degree counter clockwise. I like your site.

 

[priyaa161]

Your site keeps refreshing after every few second. Why it is so?

 

[priyaa161]

Wow Cybrax. I've visited your homepage and your site is just awesome. Are you a professional designer?

 

[cybrax]

Not professional, just been doing longer than most.


The auto refresh triggers when the page is scrolled down past a certain point, because sometimes when the text is re-drawn by the visitors web browser it looks all crooked with lumps, forcing a refresh cleans it up. I have turned it off now so you can how it looks when things do not work quite right.

Only tested on Firefox so far, not tried IE7 or 8.. there is no way it will work for IE6, Chrome should be able handle it but not sure about Safari. The page should look something like this. Google can also read the text and index it so helping the SEO.

Images and form input text areas will also rotate using just HTML & CSS, getting flash video to display at an angle is a bit trickier (flash not being my strong point).

 

[priyaa161]

yeah, you are right. Activate the auto refresh feature.

 

[priyaa161]

position: absolute; 
-webkit-transform: rotate(-7.15deg); 
-moz-transform: rotate(-7.15deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Is this code is responsible for the rotation? By 7.15 degree counter clockwise. Or we have to install some program to activate this feature.

 

[lemon-tree]

Rotation and many other transformations are part of CSS3. I have already played with it before and it certainly has a lot of potential.
http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Transforms/Transforms.html#//apple_ref/doc/uid/TP40008032-CH5-SW1
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariCSSRef/Articles/Functions.html#//apple_ref/css/func/perspective
https://developer.mozilla.org/en/CSS/-moz-transform
http://webkit.org/blog/386/3d-transforms/
If you have a Webkit based browser, these two links can show you the real power of this new technique:
http://webkit.org/blog-files/3d-transforms/morphing-cubes.html
http://webkit.org/blog-files/3d-transforms/poster-circle.html

 

[priyaa161]

CSS3. Is this different from our old CSS.

 

[lemon-tree]

CSS3 brings a whole bunch of new styling options. Currently, only certain browsers support them, some better than others. For more info you could try css3.info