css


Blink Element’s Border the CSS way

Before 5 months, I wrote about a javascript function to make the border of an element blink infinite, using DOM. But, blinking an element’s border it’s also possible with CSS3 animation element, without any javascript usage.

At the stylesheet, just add a keyframe, setting the border-color property and timed at the 50% of the animation.

Also, at the blinking element class, use the animation property, with the keyframe above, the blinking duration you want, timing function at step-end, iteration count infinite and direction alternate.

Because of only prefixed CSS animation element support at the most browsers for the moment,
it’s highly recomended to use the -prefix-free script from Lea Verou, to write pure unprefixed CSS3 code and support all major browsers, until they closely aligned with the CSS3 standards.

For the moment, that support @keyframe and animation CSS elements (even in the prefixed format) are the latest versions of Firefox, Chrome and Safari.

The CSS code


@keyframes blink { 
   50% { border-color: #ff0000; } 
}
table{ /*or other element you want*/
    animation-name: blink ;
    animation-duration: .5s ;
    animation-timing-function: step-end ;
    animation-iteration-count: infinite ;
    animation-direction: alternate ;
}

The CSS with all animation properties combined at one line


@keyframes blink { 
   50% { border-color: #ff0000; } 
}
table{ /*or other element you want*/
    animation: blink .5s step-end infinite alternate;
}

 
And here is a live demo of the Amiga Guru Meditation message, using blink border at dabblet.com/gist/2694667

 


Firefox CSS text-transform now supports greek sigma case

As posted at the FirefoxNigthly Blog, Mozilla from today support the specific case mapping rule for the greek lowercase sigma ‘Σ’ at the CSS3 “text-transform: lowercase” implementation.

In greek language the lowercase sigma, if is a word-terminal, represented by ‘ς‘ and by ‘σ‘ in other case. This implementation is available at the current Nightly build and hope to be standard at the next Firefox Release. Special thanks to the Mozilla team, which taken care of that. 🙂