Sunday, February 27, 2011

Plants vs Zombies soundtrack

Plants vs Zombies is my favorite game recently. What fascinates me most is its graphic design and music. The music is from Laura Shigihara, from Wiki I learned that she wants to mix in melodic tunes and funky beats! One of my favorite song in this game is its main menu background music. It is:

I like it especially from 0:35!

This is one is also good. 好鬼得意!

Thursday, February 10, 2011

Scaling for IE/Chrome/Firefox/Safari

I want a scaling that works for all above browsers. I end up with two separate style sheets, one for IE, and one for the rest browsers. And I did something like this:

This is sample text before scale
This is sample text after scale
<div class="myclass">This is sample text</div>
<style type="text/css">
.myclass {
    width: 100%;
    background: #ECECEC;
    font: bold 24px Arial;
}
</style>

<!--[if IE]>
<style type="text/css">
.myclass {
    zoom: 0.6;
}
</style>
<![endif]-->

<!--[if !IE]>-->
<style type="text/css">
.myclass {
    -moz-transform: scale(0.6);
    -webkit-transform: scale(0.6);
}
</style>
<!--<![endif]-->

The css 'zoom' would work for IE and Safari. 'zoom' scales element to the top left of element, and '-moz-transform' and '-webkit-transform' scales to the center. The 'position' property could be further adjusted in browser specific styles so that all browsers display the element at exactly same position after scale!

Conditional comments

Conditional comments only work for IE, but it can be used for deciding whether the browser is IE or not, and include browser specific style sheets.

<!--[if IE]>
do something for IE
<![endif]-->
<!--[if !IE]>-->
do something for other browsers
<!--<![endif]-->

Reference: http://www.quirksmode.org/css/condcom.html

Chrome minimum font size

I find my chrome failed to display my css font size settings. I learned that chrome has a default minimum font size setting, and the solution is to add below syntax:

-webkit-text-size-adjust:none;