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);
}
Tag Archives: CSS
CSS3 – Text Rotation by 3D Transforms
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);
}
jQuery – Get the CSS value without the px unit
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
CSS – Hide broswer scrollbar
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
CSS3 – Rounded corner button background
Here is an example which styles an HTML a link with a rounded corner button background.
Continue reading CSS3 – Rounded corner button background
Drupal 7 – Styling checkbox and radio button in Webform
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 Drupal 7 – Styling checkbox and radio button in Webform
Styling checkbox and radio button with CSS and Javascript
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 Styling checkbox and radio button with CSS and Javascript
CSS – Set Image/img Opacity with Mouseover Effect
Use the following code to set image opacity.
.imgClass {
opacity: 0.5;
filter: alpha(opacity=50);
}
Continue reading CSS – Set Image/img Opacity with Mouseover Effect
CSS – Disable Textarea Resize
use the following CSS to disable the textarea resize.
textarea {
resize: none;
}
Done =)
CSS & jQuery – Hide the HTML page until the Javascript & CSS styles are completely loaded
It always takes some times for the browser to apply the CSS styles on the rendering page. Therefore, users may observe a style leap before the page is completely loaded. We could fix this problem by hiding the body anchor until the Javascript and CSS are loaded.
First, set the visibility of the body anchor to hidden. Continue reading CSS & jQuery – Hide the HTML page until the Javascript & CSS styles are completely loaded
Eureka! 