Category Archives: CSS

CSS3 – Simple transistion effect

Leave a reply

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 →

About these ads

CSS – Auto height adjustment for div which contains floating elements

2 Replies

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 →

CSS3 – 3D pressed button

3 Replies

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 →

Font/Text distortion on animate() and opacity in Internet Explorer

Leave a reply

I have a HTML div which will be shown from hidden to visible by changing the opacity with jQuery animate(). It works fine in normal browser like Chrome and Firefox. But from the abnormal browser like Internet Explorer, the font/text is distorted.

Internet Explorer has problem with opacity and font antialiasing in animate(). A workaround is to remove the opacity after the animation is completed.

$("#my-div").animate({opacity: 1},500, function() {
  $(this).css('opacity', '');
});

Continue reading →

CSS Browser Selector – Align the CSS styles for different browsers and OS

Leave a reply

We have Modernizr to handle the HTML5 and CSS3 problem in old browsers.
Modernizr – Tackle the HTML5 and CSS3 problems in old browsers for frontend programming

Today, i would like to introduce another tool which could help you aligning the CSS styles for different browsers as well as OS. This tool is called CSS Browser Selector. Although it is not updated for more than a year, it is still very useful if you need to deal with Internet Explorer 7 & 8.

Similar to Modernizr, what u need to do is just included the library in the <head> tag.
Continue reading →