CSS3 Cool Effects

Radius

CSS3 Cool Effects

HTML:


  <div class="radius" style="border: 2px solid #33a6e7;">
    CSS3 Cool Effects
  </div>

CSS:


  /* Border-Radius - coded by Helias - css3.openprogrammers.it */
  .radius { border-radius: 1em; }
  .radius:hover { border-radius: 3em; }
            
  .radius, .radius:hover {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
  }

CSS3 Cool Effects

HTML:


  <div class="radius" style="border: 2px solid #33a6e7;">
    CSS3 Cool Effects
  </div>

CSS:


  /* Border-Radius - coded by Helias - css3.openprogrammers.it */
  .radius { border-radius: 1em; }
  .radius:hover { border-radius: 3em; }
            
  .radius, .radius:hover {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
  }

CSS3 Cool Effects

HTML:


  <div class="radius2" style="border: 2px solid #33a6e7;">
    CSS3 Cool Effects
  </div>

CSS:


  /* Border-Radius */
  .radius2 { border-radius: 5em 0px; }
  .radius2:hover { border-radius: 0px 5em; }

  .radius2, .radius2:hover {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
  }

CSS3 Cool Effects

HTML:


  <div class="radius2" style="border: 2px solid #33a6e7;">
    CSS3 Cool Effects
  </div>

CSS:


  /* Border-Radius */
  .radius2 { border-radius: 5em 0px; }
  .radius2:hover { border-radius: 0px 5em; }

  .radius2, .radius2:hover {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
  }

Radius

Star

Fork

Follow