Category Archives: CSS

Offset the anchor link for sticky header

If you have a sticky header (Position fixed header on the top of the html page), your anchor link with CSS ID would not work as you expected. The target section would be covered by the position fixed header.

You can use the following CSS to offset the fixed header height.

/* The target CSS ID with :before pseudo class */
.offset:before { 
  display: block; 
  content: " "; 
  height: 150px;      /* Give height of your fixed element */
  margin-top: -150px; /* Give negative margin of your fixed element */    
  visibility: hidden; 
}

 

Done =)

Reference: Offsetting Anchor Hash Tag Links To Adjust For Fixed Header

Advertisements

CSS – Number rating widget

I have a HTML form which has radio inputs range from 1 to 5:

<form>
  <input type="radio" name="num" value="1" checked>1
  <input type="radio" name="num" value="2">2
  <input type="radio" name="num" value="3">3
  <input type="radio" name="num" value="4">4
  <input type="radio" name="num" value="5">5
</form>

 

I want to convert it into a rating widget. I found a very good post with an example to convert radio inputs into a star rating widget.

Code by Stephen Morley – A star rating widget using CSS

But instead of rating by stars, i would like to create a number rating widget. So i modified the example a bit. First, create a image as follow.
icon_number_widget.png
icon_number_widget
Continue reading CSS – Number rating widget

Bootstrap 3 – Tooltip width

Say i have the following text field which i would like to show the tooltip on the right.

<input type="text" class="form-control" name="nickname" rel="txtTooltip" title="tooltip text" data-toggle="tooltip" data-placement="right"/>

 

Let’s invoke the tooltip in Javascript as follow:

$('input[rel="txtTooltip"]').tooltip();

 

The tooltip above has a limited width.
bootstrap-3-tooltip-width-1
Continue reading Bootstrap 3 – Tooltip width

CSS3 – Image zoom on mouse hover

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://ykyuen.files.wordpress.com/2014/03/mickey-mouse.jpg">
  </div>
</body>
</html>

Done =)

CSS3 – Simple transistion effect

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 – Auto height adjustment for div which contains floating elements

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

CSS3 – 3D pressed button

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