Tag Archives: CSS

CSS, CSS3

CSS3 – Simple transistion effect

Leave a comment

With CSS3, we could make simple animation without any use of Javascript. The following is an example which created a mouse hover effect on a div.

<!DOCTYPE html>
<html>
<head>
  <title>CSS3 - Simple transistion effect</title>
  <style type="text/css">
    #eureka {
      background-color: red;
      width: 200px;
      height: 200px;
      -webkit-transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out;
      -moz-transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out;
      -o-transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out;
      -ms-transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out;
      transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out;
    }

    #eureka:hover {
      background-color: blue;
      width: 400px;
    }
  </style>
</head>
<body>
  <div id="eureka"></div>
</body>
</html>

Continue reading CSS3 – Simple transistion effect →

Advertisement
CSS

CSS – Auto height adjustment for div which contains floating elements

4 Comments

Update @ 2014-11-13: In web development, this approach is very common and usually we called it the clearfix hack.
CSS-Tricks – Force Element To Self-Clear its Children

We always use the float property to arrange the layout of a webpage. Consider the following html.

<style type="text/css">
  .child {
    float: left;
    padding-top: 20px;
    background-color: grey;
  }
</style>

<div id="parent">
  <div class="child" style="height: 80px;">text 1</div>
  <div class="child" style="height: 70px;">text 2</div>
  <div class="child" style="height: 60px;">text 3</div>
  <div class="child" style="height: 50px;">text 4</div>
</div>

<div>Followihg div</div>

Continue reading CSS – Auto height adjustment for div which contains floating elements →

CSS, CSS3

CSS3 – 3D pressed button

3 Comments

The last example is a pressed button effect. This time we don’t need the transition attribute. Instead, we need to make changes on the CSS attributes such as text-shadow and the background-image gradient on mouse hover. For more information, please refer to the original post by Joshua Johnson.
Joshua Johnson – Four Simple and Fun CSS Button Hover Effects for Beginners

Here comes the complete source code. Continue reading CSS3 – 3D pressed button →