Tag Archives: css

Semantic Star rating with the meter tag

Posted on by
Reply

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

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

IE transparency and font rendering

Posted on by
Reply

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!