Tag 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

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

Done =)

100% height does not work for HTML5 Doctype

Recently doing some proof of concept on using jQuery SnapScroll. The demo worked without any problem but when i implemented it, i couldn’t make my div taking 100% height of the view port. Finally i figured out that the failure was caused by the HTML5 Doctype declaration on the index.html.

<!DOCTYPE html>
<html>
...
</html>

Continue reading 100% height does not work for HTML5 Doctype

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