Complete CSS 3 Tutorial – Transform Operations – rotate, translate, scale, skew and matrix methods with Live Demo and source code
Cascading Style Sheet (CSS) is the language used by all the web languages like ASP.Net, PHP, JSP or Velocity (Basically HTML) to control the display style of the elements without changing the code. With the help of CSS we can control the border width, color, background color, background image, font and so on.
In this tutorial we are going to learn different transform operations supported by the CSS 3.
The Transform operations are supported by IE 9, Mozilla, Google Chrome, Safari and Opera.
CSS – label control ignores the width attribute in style
Label tag does not work with css attribute “width” on some browsers like Chrome and Mozilla.
Simplest solution is : before applying css for width, make sure “float:left” is written for label control.
Label elements are in-line style elements, so technically Chrome and Firefox are interpreting the CSS properly by not obeying my width declaration. In-line elements do not accept width attributes. The workaround is to force the label element to become a block level element by floating it.
background: red; /*Background color to header*/
background: -moz-linear-gradient(top, red, FFFFFF);
/*from to colors, I have used simple name it can be replaced by color codes*/
background: -webkit-gradient(linear, left top, left bottom, from(red), to(white));
padding: 10px 20px;
/*from droping box shadow at the bottom of header*/
-moz-box-shadow: 1px 1px 3px #292929;
-webkit-box-shadow: 1px 1px 3px #292929;
box-shadow: 1px 1px 3px #292929;
text-shadow: 0 1px 0 white;