CSSJockey.com

Google Web Fonts – How to Use, Download and Sync

Mohit Aneja — Tue, 28 May 2013 08:03:21 +0000

Typography is the key element in the design process. While designing a web page, business card, brochure or a news paper advertisement fonts and text style plays an important role to get user attention. To design stunning elements we need fonts and fortunately the big daddy provides a lot of them for free. We can use Google Web Fonts in our designs and they are pretty awesome and very easy to use.

The post Google Web Fonts – How to Use, Download and Sync appeared first on CSSJockey.com.

CSS3 Animation – Stylise Links and other HTML elements

Mohit Aneja — Tue, 21 May 2013 01:56:28 +0000

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...

The post CSS3 Animation – Stylise Links and other HTML elements appeared first on CSSJockey.com.

jQuery CSS Class playground

Mohit Aneja — Fri, 17 May 2013 15:41:19 +0000

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.

The post jQuery CSS Class playground appeared first on CSSJockey.com.

How to Create Pure CSS Accordion

Mohit Aneja — Thu, 16 May 2013 13:08:23 +0000

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.

The post How to Create Pure CSS Accordion appeared first on CSSJockey.com.

An easy way to create Tabbed Content with jQuery & CSS

Mohit Aneja — Tue, 14 May 2013 07:07:04 +0000

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.

The post An easy way to create Tabbed Content with jQuery & CSS appeared first on CSSJockey.com.

How to make Blurry Text with CSS

Mohit Aneja — Mon, 13 May 2013 07:38:09 +0000

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.

The post How to make Blurry Text with CSS appeared first on CSSJockey.com.

PHP – Check if a number is Even, Odd or multiple of another

Mohit Aneja — Sat, 11 May 2013 20:00:26 +0000

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.

The post PHP – Check if a number is Even, Odd or multiple of another appeared first on CSSJockey.com.

Speed up your site with Gzip Compression

Mohit Aneja — Mon, 07 May 2012 14:10:59 +0000

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...

The post Speed up your site with Gzip Compression appeared first on CSSJockey.com.

Create Smarter Layout with CSS calc() Function

Mohit Aneja — Mon, 09 Apr 2012 13:35:09 +0000

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...

The post Create Smarter Layout with CSS calc() Function appeared first on CSSJockey.com.

Native Color Picker Support with Input Type Color in Chromium and Chrome Canary

Mohit Aneja — Sun, 08 Apr 2012 12:06:15 +0000

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...

The post Native Color Picker Support with Input Type Color in Chromium and Chrome Canary appeared first on CSSJockey.com.