Links, Links, Links!! That’s what we have all over the internet. On our website and blog posts, we have a lot of links to point a user to another page. Today I will share a small trick to stylise the links with CSS3 Animation. That’s what I’ve used on this website and you can apply the same as well to change the link color with style on hover. CSS3 Animation With CSS3 animation, we can add some effects when changing from one style to another without using any flash or javascript. We will use CSS animation transition to add some cool…

Continue reading..

Today we will play with jQuery CSS class methods such as addClass, removeClass, hasClass and toggleClass and learn some basic implementation to modify the HTML styles on the fly.

Continue reading..

In this tutorial, I’ll create a CSS Accordion without using any jQuery or Javascript. As I mentioned in my previous post “An easy way to create Tabbed Content with jQuery & CSS” displaying a lot of information on one page is a bit difficult and we can use tabbed content or accordions to achieve the same without compromising on user experience.

Continue reading..

Tabbed content is a great way to handle a lot of info on a page without loosing usability, here’s how we create tabbed content with jQuery and CSS easily.

Continue reading..

Its pretty easy to make some blurry text with CSS. We can do it by just making the text color  transparent and adding some text shadow.

Continue reading..

There are times when we need to check if a number is even, odd or multiple of another. Here are few methods to do the same.

Continue reading..

Speed up your site with Gzip Compression Website loading time matters a lot for every big website or blog. Gzip compression allows you to fasten up your website with just a few lines of code in your htaccess file. When you are on a shared hosting it matters a lot to have a fair loading speed. Gzip compressions can speed up your website from 50% to 70%. Google Speed Tools provides various techniques to speed up your web page. There is also a page service called ‘Page Speed Service’ from Google. Page Speed service uses mode_pagespeed i.e. an apache module…

Continue reading..

A web page always start with specifying size of an element, that’s why its always been a most anticipated feature to calculate size of an element with ease. Well here is a new addition to CSS3 Values as a new function calc() allows you to define element size using custom method. You can perform calculation for any CSS property which supports lengths in expressions. For example, take a look at following syntax: <style type=”text/css”> #test{ border:1px solid rgba(0,0,0,0.4); width:400px; padding:0px 10px; } #test p{ width: -webkit-calc(350px – 50px); background:#f0f0f0; padding:5px; } </style> <div id=”test”> <p>Lorem ipsum dolor sit amet, consectetuer…

Continue reading..

Google has just released the native support for input type color in Chrome Canary and Chromium as well. Chrome Canary 20 brings native color picker support to web pages, which was the most awaited features for web developers as it reduces the use of JavaScript on web pages. You can use this native color picker using following syntax: <input type=color /> You can set the default color of input using value attribute and set it like #dddddd. Along with color picker, Google has also introduced a couple of new features, CSS Shaders, Password Generation and meta viewports. CSS Shaders are…

Continue reading..

There are several vendor specific prefixes and features depending on your browser. Webkit properties allows you to enhance the look of your web pages where possible. These properties change according to the browser where it is same in case of Safari and Google Chrome, because both are -webkit based web browser. However, to get it working in other browsers like Mozilla Firefox you have to use -moz property. There are several new addition to the existing list of proprietary of WebKit property. Let’s have a quick look on some new properties. -webkit-user-drag -webkit-user-drag property specifies whether an entire element should be draggable…

Continue reading..