The 3rd example by is a background shift effect. This effect manipulate the background-position attribute.
Again, thanks Joshua Johnson for his great examples.
Joshua Johnson – Four Simple and Fun CSS Button Hover Effects for Beginners
You can use the following image bkg-1.jpg as the button background.
Continue reading CSS3 – Background shift button
Let’s continue the tutorial written by Joshua Johnson.
Joshua Johnson – Four Simple and Fun CSS Button Hover Effects for Beginners
The 2nd example is a button which has color shift when mouse hover. Continue reading CSS3 – Color shift button
We could implement some fancy effects by CSS3. There is a very good tutorial written by Joshua Johnson about some mouse hover effects in CSS3.
Joshua Johnson – Four Simple and Fun CSS Button Hover Effects for Beginners
The following example is a growing button which will elongate in width when mouse hover. Continue reading CSS3 – Elongate a button on mouse hover
I have a HTML div which will be shown from hidden to visible by changing the opacity with jQuery animate(). It works fine in normal browser like Chrome and Firefox. But from the abnormal browser like Internet Explorer, the font/text is distorted.
Internet Explorer has problem with opacity and font antialiasing in animate(). A workaround is to remove the opacity after the animation is completed.
$("#my-div").animate({opacity: 1},500, function() {
$(this).css('opacity', '');
});
Continue reading Font/Text distortion on animate() and opacity in Internet Explorer
We have Modernizr to handle the HTML5 and CSS3 problem in old browsers.
Modernizr – Tackle the HTML5 and CSS3 problems in old browsers for frontend programming
Today, i would like to introduce another tool which could help you aligning the CSS styles for different browsers as well as OS. This tool is called CSS Browser Selector. Although it is not updated for more than a year, it is still very useful if you need to deal with Internet Explorer 7 & 8.
Similar to Modernizr, what u need to do is just included the library in the <head> tag.
Continue reading CSS Browser Selector – Align the CSS styles for different browsers and OS
We can vertical align the content of inside a <div> by the following CSS.
v-align-div {
display: table-cell;
vertical-align: middle;
}
Here is a simple HTML example which demonstrates the vertical alignment. Continue reading CSS – Vertical align the div content
In Chrome, the displayed text has a minimum font-size 12px even thought you set a smaller value in CSS. This is because the Chrome browser has a auto font adjustment.
So if you want to style a text with font-size smaller than 12px, include the following line in your CSS file.
body {
-webkit-text-size-adjust: none;
}
Done =)
Reference: StackOverflow – Font-size <12px doesn't have effect in Google Chrome
Text rotation can be done by CSS3 3D Transforms. But after the transform the text is aliased. For WebKit browser, the anti-aliasing feature could be enabled by adding the following CSS style.
* {
-webkit-transform: translate3d(0,0,0);
}
Next: CSS3 – Smooth the text in WebKit browser after Text Rotation by activating the anti-aliasing
We can rotate text by using the CSS3 transform.
To rotate a text in clockwise direction with 45 degree:
p {
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-ms-transform: rotate(45deg); /* IE 9 */
-o-transform: rotate(45deg); /* Opera */
transform:rotate(7deg);
}
When we use jQuery to retrieve the CSS values such as width and height, the unit px is included.
For example, if you have a div which is 100px wide.
<div id="eureka" style="width: 100px;"></div>
Continue reading jQuery – Get the CSS value without the px unit
Eureka! 