Tuesday, December 2, 2014

Fade a css border to invisible.

<style type="text/css">

body{
background-color:red;
}

div.transition {
border: 5px solid rgba(0,0,0,1);
height: 100px;
width: 100px;
background-color: #ffffff;

transition: border-color 1s linear;
-moz-transition: border-color 1s linear;    /* FF3.7+ */
-o-transition: border-color 1s linear;      /* Opera 10.5 */
-webkit-transition: border-color 1s linear; /* Saf3.2+, Chrome */
}

div.transition:hover {
border-color: rgba(0,0,0,0);
}

</style>

<div class="transition"></div>


Output :)

1)

2)

No comments:

Post a Comment