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
Superfish is a jQuery plugin for creating drop down menu. You can download it @ GitHub – karevn / superfish.
It works well but there is no CSS class for identifying the menu item of the current page. Luckily i found a solution in StackOverflow.
The following jQuery code will find out the menu item which match the current URL and add the active class to it. Continue reading Superfish – Add active class to current menu link
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
If your browser is bundled with the Skype plugin, it will automatically wrap the phone number with Skype format. This can be avoided by adding a invisible text anywhere in the phone number.
<!-- Orginal --> <div>852 12345678</div> <!-- Prevent the Skype plugin to work --> <div>852 1234<span style="display:none;">_</span>5678</div>
Done =)
Reference: 1066internet – Prevent Skype from converting a phone number
We can make the section-footer sticky in Omega theme by adding the following piece of code in <your-theme>-alpha-default.css.
/* sticky footer */
html, body {height: 100%; margin: 0;}
#page {display: table; width: 100%;}
html>/**/body #page {height: 100%;}
*:first-child+html #page {height: auto;}
.section {display: table-row;}
html>/**/body .section-content {height: 100%;}
*:first-child+html body .section-content {height: auto;}
Kudos to Karl Kasischke.
Done =)
Reference: Has anyone tried to get a sticky footer to work with Omega?
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
We know the difference between display: none and visibility: hidden as we talked about it previously.
jQuery – Animation on Visibility
The fadeIn() and fadeOut() jQuery functions are very convenient to use but they does not allow us to add animation during the fadeIn and fadeOut process. So we have to do it with a slightly different way.
Continue reading jQuery – Using animate() with fadeIn() or fadeOut() at the same time
Next: jQuery – Using animate() with fadeIn() or fadeOut() at the same time
We can hide and show any HTML elements by the fadeIn() and fadeOut() jQuery functions. Those elements will be set to display: none in CSS. Unlike setting visibility: hidden which the hidden element will still occupied some spaces in the rendered web page, the faded out element will disappear.
So if you want to have the fadeIn and fadeOut features while keeping the elements in the webpage, here is what you could do.
Continue reading jQuery – Animation on Visibility
Eureka! 