Skew property – CSS

CSS has introduced new transform properties. In this section we will learn one more new property known as “skew”. Skew property is usually used to give skewing effects in 3d. We will see an example which gives skew effect to an html element. Syntax for skew property is: transform:skew(30deg, 10deg); […]

Shadow Effects – CSS

In this tutorial we will learn about the shadow effects, layering multiple shadows, text-shadow effects. CSS property “box-shadow” allows us to add an shadow effect to selected HTML element, whereas “text-shadow” allows us to add effect to selected text. We can also layer shadows one after another by using “box-shadow” […]

Rotating text, playing with CSS

Here’s one more example in Html5 using CSS 3 which definitely proves that its fun to play with CSS. Following is an example of the text rotation using CSS property: For safari, chrome, etc: -webkit-transform: rotate(-30deg); For mozilla: -moz-transform: rotate(-30deg); For Opera: -o-transform: rotate(-30deg); For Linux: -khtml-transform: rotate(-30deg); For ie: […]

CSS- text with rounded corners

In this part we will have a look through how to display text with rounded corners. Following is an example of the text with rounded corners using CSS property: For safari, chrome, etc: -webkit-border-top-left-radius: 50px; For mozilla: -moz-border-radius-topleft: 50px; For Opera: border-radius: 50px; For old Konqueror browsers: -khtml-border-radius: 50px; Code: […]