WordPress Designer - Sidera Design » css

HTML5 template

sidera_admin — Mon, 06 Dec 2010 18:16:00 +0000

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 … Continue reading →

Semantic Star rating with the meter tag

sidera_admin — Thu, 16 Sep 2010 16:44:16 +0000

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:


skillset
HTML/CSS: 4 out of 5
adobe photoshop: 3 out of 5
javascript: 3 out of 5
web standards: 4 out of 5
mobile development: 3 out of 5

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

sidera_admin — Sat, 06 Feb 2010 23:16:09 +0000

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!