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
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
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);
}
Continue reading
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);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
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
I am working on a website with content flying from the left to the center. When the animation starts, the horizontal scroll bar is shown and then disappeared as the animation completed. This causes a little shake on the content movement. A simple workaround is to disable the horizontal scroll bar by setting the body overflow-x to hidden.
body {
overflow-x: hidden;
}
Done =)
Reference: StackOverflow – Disable browsers vertical and horizontal scrollbars
Here is an example which styles an HTML a link with a rounded corner button background.
Continue reading
Yesterday we talked about styling the checkbox and radio button as suggested by Ryan Fait.
Styling checkbox and radio button with CSS and Javascript
Here is a simple solution for applying the checkbox and radio button in Drupal 7 webform.
1. Upload the radio.png, checkbox.png and select.png to your subtheme. (Omega subtheme is used in this example.)
Continue reading
I want to style the form elements such as radio button, checkbox or selection list. Google shows me a very good tutorial written by Ryan Fait.
Las Vegas Web Design – Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements
In the above tutorial, those form elements will be replaced by a span element. It works great. Only 1 minor problem which is those span elements could not align well. So i made some change on the CSS. Here is my example.
Continue reading
Use the following code to set image opacity.
.imgClass {
opacity: 0.5;
filter: alpha(opacity=50);
}
Continue reading
