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
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 Continue reading CSS – Number rating widget →
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.Continue reading Bootstrap 3 – Tooltip width →
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 =)
You could use CSS to resize and crop the image. Assume you have the following HTML .
<div class="crop">
<img src="https://ykyuen.files.wordpress.com/2013/06/wpid-20130625_132111.jpg" />
</div>
Continue reading CSS – Resize and Crop Image →
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 →
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 →
Creating a HTML email which is compatible with Microsoft Outlook is a really big headache. This is because Microsoft Outlook use the Microsoft Word engine to render HTML .
The following are some notes which could help you before you start working on a HTML email template .Continue reading Coding a Microsoft Outlook compatible HTML Email Newsletter →
I have a posted about sticky footer for the Omega theme.Drupal 7 – Apply sticky footer in Omega theme
Today, i would like to share how to apply sticky header through simple CSS .Continue reading CSS – Sticky header →
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 →
Posts navigation
Dream BIG and go for it =)
Eureka! 