Posts

HTML5-CSS3 Base Templates – HTML5 Reset

HTML5 Reset – is a set of HTML5 and CSS3 templates you can use as a base template to start a new project.

This reset package by Monkey Do is more than just a single style sheet. It includes a basic HTML5 document structure, with all the every day stuff like title, header, footer, etc., clearing floats, correcting IE problems, and much more.

You can choose from two versions, the ‘full version’ (fully commented or without comments) and one that has just the basic features.

html5 reset - a base templates for HTML5-CSS3 Projects

P.S. Another similar project we mentioned 2 days ago at V-B Magazine: HTML5 Boilerplate – Base HTML/CSS/JS Template.

Experiment and Learn about New CSS3 Capabilities – CSS3 Playground

CSS3 Playgroundonline tool – web application to experiment and learn about  new CSS3 capabilities. Primarily those than conform to the progressive enhancement philosophy, which means that the styles can be used on all sites without severely changing the experience on browsers that does not support them.

When changing the different settings in the panels at the left, all CSS3  properties like CSS3 radius, box-shadow, text-shadow, transforms,  are instantly applied with generated CSS code.

css3 playground - new css3 capabilities

The styles applied when changing the different settings should follow the principles of progressive enhancements and will work in all browsers like Firefox, Chrome, Opera, Safari and Internet Explorer, but some properties will not have an effect when changed depending on the browser capabilities (IE 8 and older versions).

Base HTML/CSS/JS Template – HTML5 Boilerplate

HTML5 Boilerplate – is a base HTML/CSS/JS template that helps you develop a fast, performance optimized, robust and future-proof site.

With HTML5 Boilerplate you’ll get the best practices baked in:
cross-browser compatibility, including IE6, performance optimizations, optional features like cross-domain Ajax and Flash, mobile browser optimizations, graceful degradation and more.

A starter apache .htaccess config file prepares your site to serve HTML5 video, use @font-face, and gzip compression.

HTML5 default template

Make Internet Explorer 6-8 CSS3 Capable – CSS3 PIE

CSS3 PIE – Progressive Internet Explorer – makes Internet Explorer 6-8 capable of displaying a number of CSS3 decoration properties.

CSS3 PIE doesn’t require any browser hacks or loads of javascript, you just need to add the following line in the CSS file like: behavior: url(/tag/css3/page/2/PIE.htc);

css3 pie - makes IE 6-8 CSS3 capable

Currently supported CSS3 features are:

  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • linear-gradient as background image

Documentation section describe in detail the exact levels of support PIE has for certain CSS3 properties.

CSS3 New Features with Examples and Browsers Support

CSS3 Click Chart by Impressive Webs – CSS3 “help chart” that displays examples of the new features in CSS3.

Each example visually displays the CSS3 feature, with a clickable heading that opens a box at the bottom of the page to see CSS codes used to create them, feature description and browsers support on that particular feature.

The CSS3 properties currently included (with more to come) are: box-sizing, border-radius, shadows, RGBA colors, multiple columns, HSLA colors, gradients, multiple backgrounds

css3 help chart

If you have any corrections, suggestions, additions, post a comment on the original CSS3 Click Chart article.