CSS3 Rounded Borders Template
Semi-Liquid, Centered Template with Rounded Borders -- Now supports layouts for iPhone/iPad/iTouch!
This layout works very well in current versions of Internet Explorer 9, Firefox 3+, Opera 10+, Chrome 10+, Safari 4+, iPhones, iPads, iTouch, etc...
Re-size your browser's viewport to 480px. The layout changes as shown in Fig. 1 screenshot
Supporting Browsers:
Re-sizable layout - YES
- In all CSS3 supporting browsers
- Internet Explorer 9+
- Firefox 3+
- Opera 10+
- Safari 4+
- Chrome 11+
- iPhone/iPad
Rounded borders - YES
- In all CSS2 supporting browsers
- Internet Explorer 9+
- Firefox 3+
- Opera 10+
- Safari 4+
- Chrome 11+
- iPhone/iPad
Shadows & Gradients
- Firefox 3+
- Safari 3+
- Chrome 10+
- iPhone/iPad
- Internet Explorer 9+
- box shadows YES,
- text shadows NO,
- gradients NO
- Opera 10 & 11
- all shadows YES,
- gradients NO
Pre-IE9 browsers display the "Desktop" page accurately enough, though they lack native support for CSS3 media queries and re-sizing without some help. See CSS3 Media Queries for All Browsers with jQuery Plug-in
Fig 1 - screenshot as viewed in Safari
Heading 2
Your content goes here. Lorem ipsum dolor sit amet, eodem eleifend ad consuetudium humanitatis formas. Adipiscing est nulla in nihil nibh id. Claram processus hendrerit eorum ii investigationes delenit ut mazim.
Heading 3
Amet iusto cum ex veniam me, anteposuerit commodo et at. Facit sollemnes saepius non lectores litterarum. Insitam eu quod te volutpat tincidunt eua nobis lius per. Iriure molestie dynamicus, erat decima.
Related links:
Blockquote
"Lorem ipsum dolor sit amet, eodem eleifend ad consuetudium humanitatis formas. Facit sollemnes saepius non lectores litterarum. Insitam eu quod te volutpat tincidunt eua nobis lius per."
