[ Home Page ]
This is a test page of April 2006.
The real and updated site of the 
can you find here!
Article: Liquid Round Corners
francky home
In this design there is no need for transparency of the corners: they don't need
to scroll over a color changing background or image changing background (and the
script of the Liquid Round Corners method can be simplified).
Here the left and right borders can be faux columns, connected to the html {...}
for the left borderline, and to the body {..} for the right border line. They
form the sides of the "labels".
All the tops and the bottoms of the "labels" use only one image,
css-positioned as background-img where they have to be.
At the bottom of the page is an empty div with only background color in it, to
cover the bottom parts of the left and right faux columns, so they don't peep
out under the bottom of the copyright "label".
Used ingredients:
- adapted stylesheet is here;
- images: left border
,
right border 
,
corners 
,
adapted logo 
,
adapted footer-bg 
These 5 images together are now 6.8kB (was: 10 img's, 10kB): smaller and 5
http-requests less, speeding up the page as well.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse consequat bibendum eros. Donec ultrices accumsan ligula. In nec sem porttitor est ornare gravida. Nulla molestie, lacus ut consectetuer condimentum, massa risus accumsan metus, nec accumsan dolor nisl ac sapien. Nunc sagittis commodo neque. Nullam est. Donec felis mi, commodo consequat, dignissim facilisis, accumsan id, erat. Etiam sapien. Cras ut sapien. Nullam quis lectus. Integer sollicitudin dignissim nulla. In accumsan consectetuer leo. Mauris malesuada quam at ipsum. Cras malesuada erat non tellus.
* * *
Integer purus. Vestibulum non purus. Etiam cursus faucibus libero. Ut posuere. Duis vestibulum faucibus nulla. Sed massa sapien, porta quis, nonummy at, iaculis ac, diam. Nam metus. Cras odio urna, volutpat vel, ornare id, fringilla vitae, tortor. Aliquam quis augue sed lectus ultrices sodales. Proin urna erat, faucibus ut, volutpat nec, pellentesque sed, mauris. Suspendisse pharetra elit a elit condimentum mollis. Aenean turpis. Mauris quis elit.
In nulla nisl, eleifend ac, vulputate dignissim, scelerisque non, sem. Vivamus varius ante sed est. Sed tempor iaculis sem. In hac habitasse platea dictumst. Ut venenatis ante eget eros. Nullam vel justo nec augue consequat volutpat. Sed vel erat. Nulla vulputate tincidunt nulla. Phasellus mollis. Ut sed pede. Aliquam est elit, ultricies eu, congue sit amet, egestas ac, magna. Suspendisse odio turpis, viverra id, venenatis ut, malesuada vel, odio. Fusce condimentum nisl ut nibh. Pellentesque vulputate, nisl ut egestas lobortis, lacus mi malesuada nulla, vel scelerisque pede odio in mi. Quisque pellentesque. Praesent bibendum purus quis purus. Mauris dignissim diam non sem.
Pellentesque lobortis sagittis dolor. Aenean egestas. Donec id elit non sem venenatis ullamcorper. Ut leo magna, luctus sed, suscipit scelerisque, hendrerit vitae, ipsum. Mauris sit amet dui non dui convallis vulputate. Nullam iaculis neque vitae lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus a nibh. Nam ut dui. Etiam in metus ut dolor lobortis vestibulum. Sed non pede. Fusce sit amet erat nec nibh consectetuer vehicula. Duis condimentum facilisis erat. Fusce sit amet dui. Mauris metus tortor, convallis non, vehicula eget, ultricies a, magna. Proin vel nibh. In luctus sem vel nunc.
[ more link ]