zenelements

CSS3 Transition

Zen Elements — Wed, 25 May 2011 23:33:06 +0000

Use CSS 3 transition to give action to elements in your website, such as change in colour, motion and more! CSS3 Transition The basic syntax for creating a css transition is “property”, “duration”, and “type”. If we take the following example (transition:color 1s ease-in;) – the property we are changing is the color, over [...]

CSS3 Transform

Zen Elements — Sat, 03 Apr 2010 03:15:55 +0000

Use CSS 3 to tranform elements in a page, such as rotating an object by a specified angle, or skewing/scaling an image. CSS3 Transform – Rotate The above image uses the following CSS 3 CSS3 Transform (rotate) .my_CSS3_class { -moz-transform: rotate(7deg); -webkit-transform: rotate(7deg); } If you don’t believe it, this is the original image. [...]

CSS3 Gradients

Zen Elements — Sat, 03 Apr 2010 02:55:30 +0000

Use CSS 3 to create some nice subtle gradients; or very compelling gradients! CSS 3 Gradients are not the simplest things by any means; there are several values to account for when projecting your gradient and it only worsens when working with radial gradients. background:-moz-linear-gradient(pos, #AAA B, #XXX Y); pos = the position of the [...]

CSS3 Text Shadow

Zen Elements — Sat, 03 Apr 2010 01:38:04 +0000

Like with the box-shadow effect, we can apply shadows to text using CSS3. To create a shadow in text, the CSS is written text-shadow: Apx Bpx Cpx #XXX; - Apx = x-axis- Bpx = y-axis- Cpx = cast length / feathering- #XXX = colour as usual HELLO CSS3 WORLD! The above header uses the following [...]

CSS3 Border Image

Zen Elements — Sat, 03 Apr 2010 01:30:18 +0000

Use the border-image CSS3 property to create some new and impacting borders. The first thing to do is create your basic border, this will be filled by your border images or as a fallback for browsers not supporting border-image. To apply the border-image, we use the CSS -webkit-border-image: url(borderfile.png) A B type; - A = [...]