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.

New Webkit CSS Properties

Mohit Aneja — Thu, 05 Apr 2012 12:51:40 +0000

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

The post New Webkit CSS Properties appeared first on CSSJockey.com.

Multiple Background Images using CSS3

Mohit Aneja — Wed, 04 Apr 2012 12:14:52 +0000

CSS3 allows you to add multiple background images to any box element. It is so simple to use multiple background images in your stylesheet by using nothing more than comma separated values. You can write the code in two ways; individual property or shorthand property. In the individual background properties you can specify the value in separate background layer e.g. background-image and then background-position etc. Look at the code below for full example: #multiple-background{ width:500px; height:300px; background-image:url(image.jpg), url(image2.jpg); background-position: center bottom, left top; background-repeat: no-repeat, repeat; You may also apply other properties as well using the same method like background-clip,...

The post Multiple Background Images using CSS3 appeared first on CSSJockey.com.