One of the best progressive enrichment that I use on my projects is to set colors as RGBa (red, green, blue, alpha) values. As I write this, RGBa is current supported in firefox 3.0.5+, Safari 2+, Chrome 1+, and Opera 10+.
The most efficient way that I found to declare RGBa values is to separate the flat colors into code block, and keeping RGBa with the other styles. Like in this example:
CSS
/* NON RGBa BROWSERS
------------------------------------------------------ */
#wrap { background-color: #000; }
#footer,
#header { background-color: #ccc; }
.section { color: #fff; }
/* HEADER
------------------------------------------------------ */
#header { background-color: rgba(204,204,204,.8); }
#header ul { float: right; }
#header li {
float: left;
margin-left: 1em;
}
#header li:first-child { margin-left: 0; }
/* WRAP
------------------------------------------------------ */
#wrap {
width: 960px;
margin: 0 auto;
background-color: (0,0,0,.7);
}
.section {
padding: 1em;
color: rgba(255,255,255,.9);
}
I always keep the flat colors separated because they can be easily removed when the other browsers start supporting RGBa. Why didn't I declare the HEX colors on the same line as the RGBa? Simple! IE doesn't support it; no color will be rendered at all. Note: Please be aware that the RGBa colors have to be the last ones declared.
read more »
Lately I've been seeing lots of websites using animated page scroll, it can be easily done with the help of jQuery. Here is how:
jQuery Code
$('.scrollPage').click(function() {
var elementClicked = $(this).attr("href");
var destination = $(elementClicked).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-20}, 500 );
return false;
});
The code gets the href from the anchor and uses it as the target element. If you want to adjust the scroll speed just change the 500.
Don't forget to checkout the live demo
Demo
Browser Support
- Firefox
- Safari
- Chrome
- Opera
- Internet Explore 7 & 8
- Internet Explore 6
I recently ran into a bug on Internet Explore 7 that was driving me nuts. After hours of debugging, I finally found the solution.
IE7 has a bug when using adjacent sibling selectors. If there is a comment between two elements, it will think that the comment is the next element. Here is the example:
CSS
p + p { background-color: #fc0; }
Markup with comment
<p>Paragraph #1</p>
<!-- my comment here -->
<p>Paragraph #2</p>
The image bellow shows how it supposed to look like in all modern browsers. Unfortunately, the only way to make it work in IE7 would be by removing the comment.
Markup without comment to make it work in IE7
<p>Paragraph #1</p>
<p>Paragraph #2</p>
This tutorial will walk you through creating date badges with Wordpress and CSS.
Let's start of by adding the necessary markup to render the appropriate date format. Create a DIV element with a class of "entryDate" and three children SPANs with respective classes "postMoth", "postDay", and "postYear".
Add the PHP code to get the post date from the database as shown bellow. For more PHP date format go to http://us.php.net/date
Markup
<div class="entryDate">
<span class="postMonth"><?php the_time('M') ?></span>
<span class="postDay"><?php the_time('d') ?></span>
<span class="postYear"><?php the_time('Y') ?></span>
</div>
Now let's add styles to make it look pretty.
read more »
Last week's websites that I stumble upon. Some design related, development and completely off beat topic. If you have a link that you'd like me to share with others feel free to send it me.
Web Design & Web Development
PX to EM conversion made simple. Very handy website.
Web Design & Development books reviews and interviews.
iPhone & iPod Touch Wallpapers
Lots of typography wallpapers for both iPhone and desktop.