Tag Archives: CSS3

CSS, CSS3

CSS3 – Image zoom on mouse hover

Leave a comment

With CSS3 transition property, we can do some simple animation effects. The following example will zoom in the image when mouse hover.

<!DOCTYPE html>
<html>
<head>
  <title>Eureka! | CSS3 - Image zoom on mouse hover</title>
  <style type="text/css">
    .image-wrapper {
      width: 200px;
      height: 200px;
      overflow: hidden;
    }

    .image {
      width: 200px;
      height: 200px;
      position: relative;
      left: 0;
      top: 0;
      transition: all 1s linear;
    }

    .image:hover {
      width: 400px;
      height: 400px;
      left: -100px;
      top: -100px ;
    }
  </style>
</head>
<body>
  <div class="image-wrapper">
    <img class="image" src="https://eureka.ykyuen.info/wp-content/uploads/2014/03/mickey-mouse.jpg">
  </div>
</body>
</html>

Done =)

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 →

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 →

CSS, Javascript

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

Leave a comment

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 CSS Browser Selector – Align the CSS styles for different browsers and OS →

CSS3, HTML5, Javascript

Modernizr – Tackle the HTML5 and CSS3 problems in old browsers for frontend programming

3 Comments

Having problem on HTML5 and CSS3 with Internet Explorer? The Modernizr library could help you to tackle the problem. It checks the HTML5 and CSS3 features supported by the browser and developers could determine them by checking the classes of the <html> tag.

Download Modernizr and create the following index.html.
Continue reading Modernizr – Tackle the HTML5 and CSS3 problems in old browsers for frontend programming →