This weekend, I created an HTML5 document that contains all the elements that are currently valid in the specification. I hope this can be helpful if you want to test your CSS styles.
Let me know if it you find it useful or if you have any feedback!
by on December 6, 2010
HTML5 template
by on September 16, 2010
Semantic Star rating with the meter tag
Here’s a nice semantic way to markup and style a star rating. In this case, it represents the designer’s skills in different areas, but it could be used for a dynamic star rating system, as you’ll only need to update the value attribute of the meter tag.
semantic star rating with HTML
here is the markup:
<section id="skills"> <h3>skillset</h3> <p><abbr title="HyperText Markup Language">HTML</abbr>/<abbr title="cascading stylesheets">CSS</abbr>: <meter class="ir" min="0" max="5" value="4">4 out of 5</meter></p> <p>adobe photoshop: <meter class="ir" min="0" max="5" value="3">3 out of 5</meter></p> <p>javascript: <meter class="ir" min="0" max="5" value="3">3 out of 5</meter></p> <p>web standards: <meter class="ir" min="0" max="5" value="4">4 out of 5</meter></p> <p>mobile development: <meter class="ir" min="0" max="5" value="3">3 out of 5</meter></p> </section>
and the CSS:
#skills meter{
float: right;
background-image: url(../images/skillstars.gif);
background-position: 0 0;
height: 20px;
overflow:hidden;
width: 114px;
}
#skills meter[value="0"] {
background-position: 0 0;
}
#skills meter[value="1"] {
background-position: 0 -22px;
}
#skills meter[value="2"] {
background-position: 0 -44px;
}
#skills meter[value="3"] {
background-position: 0 -66px;
}
#skills meter[value="4"] {
background-position: 0 -88px;
}
#skills meter[value="5"] {
background-position: 0 -110px;
}
To see a demo : demo
The original design is from Design Kindle
by on February 6, 2010
IE transparency and font rendering
While designing a website, I wanted to add some semi-transparent backgrounds using CSS rgba.
In this article, the author suggests using a PNG as a fallback for browsers that don’t support the rgba declaration.
Having read about Internet Explorer’s proprietary filters, I decided to use that instead, to avoid having to download another image.
I added the following declarations to the IE stylesheet with conditional comments:
.content, #primary {
background:transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ebe7e7,endColorstr=#80ebe7e7);
}
.page-title, .singular-page-title {
background:transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80146ea4,endColorstr=#80146ea4);
}
This is the result:
You can see that the result is not very pretty! The font doesn’t seem to render very well.
I suspected that the IE filters were the culprit, so I removed the declarations, and here is the result:
Much better!
Conclusion: I’ll use the PNG fallback method.
Have you experienced this issue? Is there a fix?
Leave your comments!