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.
You could use CSS to resize and crop the image. Assume you have the following HTML.
<img src="http://ykyuen.files.wordpress.com/2013/06/wpid-20130625_132111.jpg" />
<title>CSS3 - Simple transistion effect</title>
-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;
In Chrome, there are some special style on the input elements. For example, the following is a search textbox in Chrome.
To restore the standard textbox view, apply the -webkit-appearance on the search textbox.
Refresh the page.
We always use the float property to arrange the layout of a webpage. Consider the following html.
<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>
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.
Nice Menus is a must have module for all my Drupal 7 projects. It helps creating horizontal menu in just a few minutes.
The horizontal menu is aligned to the left by default. Here is a small CSS trick for you to align the menu in center and it also works for Superfish menu.
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.
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