Monthly Archives: May 2012


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

 


PHP random password generator

Here is a function for random password generation, could be useful in a lot of PHP projects.


/**
* @author Petros Kyladitis - 2012
* @license MIT License
*
* @description random password generator
* @param $min_length the minimum size of the password
* @param $length the maximum size of the password
* @param $chars a string contains all acceptable password characters
* @return a string with the generated password
*/

function rand_pass($min_length, $max_length=null, $chars="qwertyuiopasdfghjklzxcvbnm1234567890QWERTYUIOPASDFGHJKLZXCVBNM"){
  //if $max_length param is not set, pass $length is the $min_length 
  //param, else a random number between min and max params.
  $length = !isset($max_length) ? $min_length : rand($min_length, $max_length) ;
  
  //the position of the last character of $chars variable
  $chars_end = strlen($chars) - 1;
  
  //variable for store password
  $pass ;
  
  //select a random char from the $chars & concatenate to the $pass
  for($i=0; $i<$length; $i++)
    $pass .= substr($chars, rand(0, $chars_end), 1) ;
  
  return $pass ;
}