Reflected Pixel

Pros and Cons of Background Video in Website

2017-02-22T12:51:00.001-06:00

This is important to think of videos as backgrounds, not stories. Don’t try to explain what you do, simply set the stage. Limit the length of background videos to 15 or maximum 20 seconds at most, and then loop the video to start over. Make Professional videos, which look simple have a positive effect on your brand. Do not have sound auto-play. If you really want music or ambient noise (which is not recommend), allow users to turn it on themselves. Don’t over complicate. If you add video to your website, keep the rest simple. Video can be distracting, so confusing users further with non-intuitive navigation and other design elements can be overwhelming.

Pros:

Video is engaging. We are naturally drawn to moving images. They pull us into the website and, hopefully, encourage us to explore more.
Videos can help convey your brand. In a split second, a video can set a mood or evoke a feeling, which is harder to do with a static image or via text.
Boosts SEO- If your video is cross-posted on several sharing platforms; it can boost the SEO value of your website. The more views your video takes in, the more it helps increase your rankings on search engines, especially if your visitors find your video good enough to continue sharing it.

Cons:

If your homepage doesn’t load quickly, visitors may get frustrated and go elsewhere. A well programmed website should load a video quickly and not make visitors wait while a “loading” wheel churns. However, if a user has a slow connection, they may find your video homepage slower to load.
Video backgrounds are inherently auto-playing — they play without the user clicking anything. But many mobile platforms (including iOS) and legacy browsers do not support auto-playing video. Thus, a backup option is required, such as a static image.
Videos can be distracting. It’s important to think of these as backgrounds, not documentaries. Lengthy or highly detailed videos will compound load speed issues.

Showcase of the Free bootstrap Template

2014-12-15T06:27:00.007-06:00

Here are 10 amazing free bootstrap template. The Bootstrap Themes gives away high quality bootstrap themes for free. Enjoy !!

Music Bootstrap Template

Monkey Digital – Agency Template

Real Estate Template

Fashion Shop Template

Agency Template

Portfolio Template

Photography Free Template

Restaurant Template

Bootstrap Personal Web Template

Business Card Design: Creative Templates

2014-12-15T04:28:00.000-06:00

The company’s or organization’s name or logo. Despite such simplicity, the design can still be creatively done through careful arrangements of wordings and logo. If your business card is plain and dull, it can only tell so much of your company’s image. Here’s a list of a collection. These design proposal were made for the competition organized by JW Construction on 99designs.it . And thanks for the Biscuiteerblog for creative business card design.

Business Card Design for ZX Securities

Business Card Design for Waypoint

Business Card Design for VAS

Business Card Design for Swissistent

Business Card Design for Moxy Media

Business Card Design for Offspring Solutions

Business Card for Kurth Glas & Spiegel AG

Business Card Design for Nes Security Solutions

Business Card for Guy Calaf

Business Card for JW Construction

For more detail visit biscuiteer Happy Design !!!

Browser Detection with Jquery

2014-12-08T05:37:00.000-06:00

In this post, find JavaScript/jQuery code to detect various type and version of web browser. Below jQuery code gives you an idea about $.browser property.

For Chrome and Safari

if ($.browser.safari) {
    // code goes here
}

Select Safari 3
if ($.browser.safari && (navigator.appVersion.indexOf('3.') != -1)) {
    // code goes here
}

Select Safari 4
if ($.browser.safari && (navigator.appVersion.indexOf('4.') != -1)) {
   // code goes here
}

Select Chrome 1
if ($.browser.safari && (navigator.appVersion.indexOf('1.') != -1)) {
    // code goes here
}

Select Chrome 3
if ($.browser.safari && (navigator.appVersion.indexOf('3.') != -1)) {
    // code goes here
}

Select Chrome 13
if ($.browser.safari && (navigator.appVersion.indexOf('13.') != -1)) {
    // code goes here
}

Select Chrome 16
if ($.browser.safari && (navigator.appVersion.indexOf('16.') != -1)) {
   // code goes here
}

For Firefox

if ($.browser.mozilla) {

    // code goes here
}

Select Firefox 1.5.x to 2.x
if ($.browser.mozilla && $.browser.version.substr(0, 3) == '1.8') {
    // code goes here
}

Select Firefox under 3.x
if ($.browser.mozilla && $.browser.version < '1.9') {
    // code goes here
}

Select Firefox 3.0.x and above
if ($.browser.mozilla && $.browser.version.substr(0, 3) == '1.9') {
   // code goes here
}

Select just Firefox 2.0.x
if ($.browser.mozilla && $.browser.version == '1.8.1') {
   // code goes here
}

Select just Firefox 3.0.x
if ($.browser.mozilla && $.browser.version == '1.9') {
   // code goes here.
}

Select just Firefox 3.5.x
if ($.browser.mozilla && $.browser.version == '1.9.1') {
    // code goes here
}

Select just Firefox 3.6.x
if ($.browser.mozilla && $.browser.version == '1.9.2') {
    // code goes here
}

Select just Firefox 7.x
if ($.browser.mozilla && $.browser.version.substr(0, 1) == '7') {
    // code goes here
}

Select just Firefox 14.x
if ($.browser.mozilla && $.browser.version.substr(0, 2) == '14') {
    // code goes here
}

For Opera

if ($.browser.opera) {
    // code goes here.
}

Select Opera 9.5 and above
if ($.browser.opera && $.browser.version >= '9.5') {
   // code goes here
}

Select just Opera 9.5
if ($.browser.opera && $.browser.version == '9.5') {
    // code goes here
}

Select just Opera 10
if ($.browser.opera && $.browser.version == '9.8') {
    // code goes here
}

For Internet Explorer (IE sucks)

if ($.browser.msie) {
    // code goes here
}

Select Internet Explorer above 6
if ($.browser.msie && $.browser.version > 6) {
    // code goes here
}

Select Internet Explorer 7 and below
if ($.browser.msie && $.browser.version <= 7) {
   // code goes here
}

Select just Internet Explorer 6
if ($.browser.msie && $.browser.version == '6.0') {
    // code goes here
}

Select just Internet Explorer 7
if ($.browser.msie && $.browser.version == '7.0') {
    // code goes here.
}

Select just Internet Explorer 8
if ($.browser.msie && $.browser.version == '8.0') {
    // code goes here
}

Select just Internet Explorer 9
if ($.browser.msie && $.browser.version == '9.0') {
    // code goes here.
}

Note: release of jQuery 1.9 $.browser feature was removed. But to support legacy code, they have released jQuery Migrate plugin to detect deprecated and removed features, or to restore old features for those sticky situations where you need old code to run with new jQuery.

Placeholder attribute for IE Hack

2014-11-27T07:06:00.001-06:00

HTML5 introduced the "placeholder" attribute on input elements, which allows to display a greyed-out default text. But Sadly the Internet Explorer, including IE 9 does not support it. I got a solution. Just try this.

if(navigator.appVersion.match(/MSIE [\d.]+/)){

    var placeholder = $('input[type=text]').attr('placeholder');
    var placeholderText = placeholder;

    $('input[type=text]').val(placeholderText);
    $('input[type=text]').blur(function(){
        $(this).val() == '' ? $(this).val(placeholderText) : false;
    });

    $('input[type=text]').focus(function(){
        $(this).val() == placeholderText ? $(this).val('') : false;
    });
}

Specifying a Webpage Icon for Web Clip.

2014-04-24T06:31:00.002-05:00

The apple-touch-icon.png is a file used for a web page icon on the Apple iPhone, iPod Touch, and iPad. When someone bookmarks your web page or adds your web page to their home screen this icon is used. If this file is not found these Apple products will use the screen shot of the web page, which often looks like no more than a white square.

This file should be saved as a .png, have dimensions of 76 x 76 Or, 120 x 120 Or, 152 x152
To specify multiple icons for different device resolutions. For example, support both iPhone and iPad devices. Add a sizes attribute to each link element as follows:

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

for more detail on Apple site.

Color Combination Tools

2014-04-22T08:33:00.000-05:00

Below we’ve compiled a list containing 20 Color Combination Tools for Designers. You can use this list to chose the tool that better fits your needs or that you’re most comfortable using.

Kuler

The web-hosted application for generating color themes that can inspire any project. No matter what you’re creating, with Kuler you can experiment quickly with color variations and browse thousands of themes from the Kuler community.

Color Scheme Designer

Color Scheme Designer has been around for some time and was recently re-written and designed. It currently has great color space conversions, a preview pane, enhanced scheme creation, and a permanent URL of the schemes you create. It’s almost as if it were a hosting site for color schemes.

Contrast-A: Find Accessible Color Combinations

This application allows you to experiment with various color combinations, review your colors accessibility, and create color palettes.

Infohound Color Schemer

Infohound Color Schemer helps you find and test color schemes for whatever the reason may be. Features included allow you to configure the saturation and brightness, set the value for hue, and have your colors automatically matched for you.

Check My Color

This tool lets you check the foreground and background of color combinations and gives you the option to determine whether the color variation is suitable for individuals with vision impairments.

Toucan Color Palettes

Toucan allows you to choose up to 20 colors per palette using color association rules or an uploaded image, collaborate with other users, and import images from Flickr, Picasa, and Facebook.

Hex Color Scheme Generator

The Hex Color Scheme Generator is a great tool to use if you want to create a beautiful and logical color scheme. It acts as an “advisor” for colors. You simply tell it which colors you’d like to use, and the app will generate the best results that match.

Pictaculous

Pictaculous lets you upload your image and analyze its colors. This is ideal for the designer who creates several graphics at a time and would like to distinguish the looks without having to manually choose the best combining colors every time.

Color Combinations and Color Schemes

This website gives you the option to generate limitless color combinations and schemes. If you already know at least one of the colors you plan on using, this site will take care of the rest. This is good for testing out colors in your code when you’re not sure what they are. I personally use this app on a regular basis.

Daily Colorscheme

Daily Color Scheme serves its users a new color scheme every single day of the year. This can help you discover new color combinations that you hadn’t thought of before, also a great source for color inspiration.

Color Palette Software

This is an advanced color palette tool that lets you create beautiful color schemes and custom themes. To begin working with colors you’ll have a scratch pad at your disposal. Before you begin using this app, make sure you try the scratch pad, it’s a feature that allows you to store all of the colors you’re working with for later use. You’ll also have a photo tool to extract colors, and an advanced color picker as well as a color theory wheel to give you the right type of inspiration.

ColorExplorer

ColorExplorer takes working with digital colors to the next level. You can get right down to work with a colorful toolbox that lets you quickly and easily create, manage, and explore several color palettes.

Kolur

Kolur is a simple yet, effective color application that lets you browse color palettes. The color combinations and schemes displayed within their gallery go further than the standard 3 color “rule”, it’s unique and leaves you open with several possibilities per combination.

Color Hunter

Color Hunter allows you to upload your images and view the different colors that it contains. You can also browse through their current color schemes.

Gray Bit

GrayBit is an online testing tool created to convert an entire web-page into the grey-scale so that you’re able to visually recognize certain contrasts between different elements in your layout.

ColorZilla

ColorZilla was designed for Firefox, it gives you an advanced eyedropper, a helpful color picker, a useful palette viewer and other tools all within the reach of your browser.

ColourMod

ColourMod was originally released as a web-based DHTML Dynamic Colour Picker. With the advancement and popularity of the Mac interface, ColourMod can now be found in your Dock once you’ve downloaded it. You’ll be able to examine colors on your desktop, websites, graphics, applications, and more!

Color Grab

ColourGrab lets you type in the URL of any image online and this application will tell which are the most useful and best used colors for that specific image. You can link to your project images that are hosted online and veiw which are the best and most used colors within the images. Great for custom logo design.

ColorMunki

ColorMunki is an all-in-one color app that gives you complete color control of your color creation tools. You’re able to find, choose, and compare several different colors.

Color Wheel Color Calculator

The Sessions educational Color Calculator is an interactive color wheel that allows any designer to select RGB, or CMYK colors for the creation of useful colors schemes. Sessions also claims to have the fastest color tool on the web.

Test it out and lets us know what you liked and disliked about this app and any of the others as well!

Fixed header/footer issue on iOS device

2014-03-26T04:11:00.000-05:00

When you scroll the page and dismiss the keyboard while the page still scrolls, the header does not return to its fixed position. If you tap a link or button, the header shows up somewhere in the (vertical) middle of the screen and only returns to its fixed position after manually scrolling.

Solution:

if( /iPhone|iPod|iPad/i.test(navigator.userAgent) ) {
    $(document).on('focus', 'input, textarea', function()
    {
       $('header').css("position", 'absolute');
       $('footer').css("position", 'absolute');

    });

    $(document).on('blur', 'input, textarea', function()
    {
         $('header').css("position", 'fixed');
         $('footer').css("position", 'fixed');

    });
}

The above "unfixes" the header/footer while an input field is focused.

CSS3 Media Query for IE7 and IE8

2014-03-13T02:13:00.000-05:00

Normally IE5 to IE8 do not support CSS3 Media Query. But at least IE8 should support for CSS3 Media Query and that is very important for cross-browser responsive web design. Here I will tell you how you can solve the CSS3 Media Query issues for IE. This tutorial will helps you to create a dynamic resolution dependent layout with web standards in mind.

Today I got a great jQuery plugin Link name css3-mediaqueries. It is very easy to use.

How to use?

Download jQuery plugin form Here and include downloaded script just before </body> like

<script src="js/css3-mediaqueries.js"></script>
Or you can use following way to include the script.




Then write the media query in style sheet and check it in IE. It will work nicely with IE8, IE7 Even more older version IE6 or IE5

Notes:

It doesn’t work on @import’ed stylesheets Write media query with following way

@media screen and (min-width: 980px) {
/* CSS Document */
}

Typography Tools

2014-03-12T05:46:00.000-05:00

Typetester

The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

CSS Type Set

Font Tester is a free online font comparison tool. It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them. It is very useful for web developers who are looking for just the right font/style/color to use in their pages.

Font Tester

Font Tester is a free online font comparison tool. dIt allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them. It is very useful for web developers who are looking for just the right font/style/color to use in their pages.

CSS Code generator for text

A very simple and useful tool for generating CSS styles.

Serif Font Identification Guide

Serif Font Identification Guide is a very clever and useful visual font identification tool.

Identifont

Identifont has become the largest independent directory of digital fonts on the Internet. It provides a range of features to help you locate fonts or find information about fonts:

CSS-Typoset Matrix

Matrix to calculate the font size and line spacing in em and px

Referance : smashingapps

Showcase of the Parallax Scrolling Effect

2014-02-24T07:21:00.002-06:00

Here are 30 amazing websites that utilize the parallax scrolling effect. At the bottom of the post, I’ve also linked to a few tutorials on how to achieve this effect in your own designs. Enjoy!

Mo’s and Bows

Eric Johansson

TedxPortland

Smokey Bones

Billy’s Downtown Diner

David Beckham

Cultural Solutions

Campaign Monitor

Appmiral

egopop

Beer Camp at SXSW

Kisko Labs

Kontakt & Impressum

Row the Pole

Atlantis World’s Fair

IWC Shaffhausen

Nike Better World

Improving Speed

The Beatles Rock Band

Head 2 Heart

XHTML Slicing

Johan Reinhold

Loopclick

Dezignus

Farmhouse Fare

Rastape

Jan Ploch

Cantilever Fish & Chips

Netlash bSeen

Sullivan NYC

Software Repair Instructions using Pc Companion (Windows) or Bridge for MAC.

2014-02-23T16:29:00.000-06:00

Extended guide that should help you fix the pattern lock issue on your phone, please follow the instructions carefully:

Visit this link:
http://www.sonymobile.com/us/tools/pc-companion/
Click on Download PC companion
Run the software

Turn the phone off and disconnect it from the computer
1. Disregard any instructions to connect the phone until you complete step 9
2. In the welcome screen you will see the different modules available for you including the "support zone" option. Click on "Start" below it.
3. On the next page Click on "Start" under "Phone/Tablet Software update"
At this point if you get an error stating that "unable to install update components" or "server is bussy" Please proceed to step 12. If you not see that error then continue with step 4.
4. The program will show a window saying "Could not find phone/tablet". Click on the option below that reads: "Repair my phone/tablet" the program will issue you a warning on the content that you will lose during the update
5. Choose the option to continue.
6. The program will issue a final message warning you of possible data lost during the update. Click on the checkmark and then on "Next/Continue".
7. After that, the program will download the necessary information (5 to 6 minutes) and it will present you with a list of phones.
8. Choose the Phone from the list then click on "next" then you will see a new section telling you how to connect the phone. (don't connect it yet)
At this point the phone must be off and disconnected from the PC.

9. Connect the cable to the PC not to the phone, then wile pressing and holding the indicated button (in the steps on screen an specific button will be shown for you to press on the phone) connect the cable to the phone and keep holding the indicated button until the program says "the update of your phone has started..." (in some cases a message of "Installing drivers" will appear before the message of "the update of your phone has started..." is shown.)
10. If you failed to follow the steps correctly the phone will turn on and it will request that you "Proceed with the following steps, slide down the notification bar", If this happens disconnect the phone from the cable, turn it off and repeat from step 9).
11. If the phone is connected properly, PC Companion will proceed with the update ( It will tell you to let go of the back key) then wait for the update to finish and follow instructions on screen to disconnect the unit.

Dear customer,
12. If "unable to install update components"
1. Close Pc companion
2. Install Java from: http://www.java.com
3. start Pc companion again and try to do the software unlock process once more.
Note: If you wish only to update the unit wait for the program to open and then select the quick link on the uper left corner that says "Update Phone/Tablet" and follow the instructions to perform the update. (the PC may request for the phone to be placed in Mass Storage mode. Do this by going into Settings>Xperia>Connectivity>USB connection mode)
Some computers may block the installation of the update service, if this happens use this:
http://www.sonymobile.com/us/tools/update-service/ this is the Standalone update software.
If the Phone is unresponsive (Then do this extra step and when done proceed to redo the repair process:
Press and hold the power button and the volume up button at the same time for 10 to 15 seconds. This will reset the unit)

Bridge For Mac instructions on my post bellow.
Note: This procedure does not work for the Xperia Play R800x (Verizon and other Non SIM card variants of the Xperia play that lack MTP support. It does work for the R800a At&t's model)

CSS Hack Target to Safari & Chrome

2014-02-20T04:55:00.003-06:00

Problem Statement:

It is inevitable that there will be situations where you need a CSS rule to target a specific browser. This hack targets Safari and Chrome (webkit browsers) and works with Safari 5.1.2 and Chrome 17.0.963.56 version.

Dependencies:

A webkit browser (Safari or Chrome)

/**
* This hack targets the Webkit browser engine
* which includes Safari and Chrome.
*/

@media screen and (-webkit-min-device-pixel-ratio:0) {

/** Code goes here..... **/
div.foo { width: 100px; height: 100px; border: 1px solid red; }

}

Different viewport meta for iphone and ipad

2014-02-07T03:38:00.002-06:00

I found two simple solutions to set different viewport meta for different devices with jQuery. This work for iPad, iPhone or any other device to for that matter.

The first solution for changing the viewport per device. This method uses the width of the device to change the meta data.

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0,

user-scalable=no" />

<script>

if ($(window).width() < 600) {

     $('meta[name=viewport]').attr('content','initial-scale=0.54,

     maximum-scale=0.54, user-scalable=no');

</script>

The second method is to use the “User agent” tag, to check what kind of device it is. This method of Changing the viewport is not as precis due to different resolutions on the iPad or iPhone based on the model.

<!-- in head -->  <meta id="viewport" name='viewport'>

<script>

function(doc) {

var viewport = document.getElementById('viewport');

if ( navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) {

   doc.getElementById("viewport").setAttribute("content", "initial-scale=0.3");

else if ( navigator.userAgent.match(/iPad/i) ) {

   doc.getElementById("viewport").setAttribute("content", "initial-scale=0.7");

}(document));

</script>

Flexible Grid Tools For Responsive Websites

2014-02-06T23:51:00.001-06:00

Here, we are presenting 44 flexible grid tools that will help you in creating responsive websites. Here is the full collection after the jump. Enjoy!

Gridpak
Responsive Web Design tool for creating grids by Erskine Design.

The Grid
It’s a 12-column flexible grid that can scale out to an arbitrary size (defined by the max-width of the row) that’s also easily nested, so you can build out complicated layouts without creating a lot of custom elements.

Golden Grid System
A grid system for responsive web design. Includes folding columns, elastic gutters, a zoomable baseline grid, and a delightful grid overlay script.

Susy
The web is a responsive place, from your lithe & lively development process to your end-user’s super-tablet-multi-magic-lap-phone. You need grids that are powerful yet custom, reliable yet responsive.

Columnal CSS Grid System
The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. Columnal is an elastic grid, while some code inspiration (and the idea for subcolumns) are taken from 960.gs

Semantic Grid System
Set column and gutter widths, choose the number of columns, and switch between pixels and percentages. All without any .grid_x classes in your markup. Oh, and did we mention it’s responsive?

Responsive Calculator
Just a simple calculator to help turn your PSD pixel perfection into the start of your responsive website.

Adapt
Adapt.js is a lightweight (842 bytes minified) JavaScript file that determines which CSS file to load before the browser renders a page. If the browser tilts or resizes, Adapt.js simply checks its width, and serves only the CSS that is needed, when it is needed.

Gridless
Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

Simple Grid
Responsive. Infinite nesting. One class per element. Simple.

Base Framework
A super simple, responsive framework designed to work for mobile devices, tablets, netbooks and desktop computers.

Bourbon Neat
A lightweight semantic grid framework for Sass and Bourbon.

Kube CSS Framework
Minimalistic and sufficient for everything, adaptive and responsive. Revolutionary flexible grid and beautiful typography. Absolute freedom with no imposed styling.

One% CSS Grid
One% CSS Grid is a 12 column fluid CSS grid system. It’s been designed as a base for building responsive web layouts easily, quickly and with minimum effort. You don’t have to take care of resizing and rearanging your layout for each platform separatelly. One% CSS Grid will do all this for you.

RWD Grid
rwdgrid is just another Grid system based on popular 960grid , which is responsive and ranges from mobile, tablet, laptops and wide screen displays. Naming convention of this grid system is similar to 960 grid system, where underscore is replaced by hyphen (increases readabilty).rwdgrid is having different Grid system made for 1200px+ Displays, 960px+ Displays, 720px+ Displays and Mobile screens.

Responsify
Responsify is a browser based tool, which allows you to create your own responsive template. Think of it as a foundation for you to build upon. You can customise the grid to suit your content, rather than trying to make the content fit the grid.

Simple Grid
Simple Grid was created for developers who need a barebones grid. Simple Grid works well with 1140px layouts but easily adapts to any size of layout. With fluid columns, Simple Grid is responsive down to mobile.

Toast CSS Framework
Toast is a CSS framework made as simple as it can be, but no simpler. A plain-English responsive grid makes simple layouts a breeze, and with box-sizing you can add padding and borders to the grid, without breaking a single thing.

Ivory
IVORY can easily adapt to any size screen from phones to TVs. It offers 4 different width layouts 1200px, 1140px, 1024px & 960px. You can define your own width also.

Responsive Aeo
Convention over configuration, just twelve columns,less code to learn means less bugs to solve.

Gumby
Gumby 2 is built with the power of Sass. Sass is a powerful CSS preprocessor which allows us to develop Gumby itself with much more speed — and gives you new tools to quickly customize and build on top of the Gumby Framework.

Skeleton
Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

1080 GS
The 1080 Grid System expands upon Nathan Smith’s 960 Grid System by simply adding an additional 120 pixels while utilizing the same margins. Thus, anyone who has ever used the 960 Grid System to design can easily do so with the 1080 Grid System.

960 GS
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

The Grid System
The ultimate resource in grid systems.

978 GS
978 is a grid layout system that uses 12 columns at 54px, with 30px gutters. This comes out to a total of 978px, which uses up most of the space on a 1024×768 monitor.

Grid System Generator
The grid system generator will create custom grid systems in valid css / xhtml for rapid prototyping, development and production environments.

Responsive Grid System
The Responsive Grid System isn’t a framework. It’s not a boilerplate either. It’s a quick, easy & flexible way to create a responsive web site.

Mueller Grid System
MUELLER is a modular grid system for responsive/adaptive and non–responsive layouts, based on Compass. You have full control over column width, gutter width, baseline grid and media–queries.

Variable Grid System
The variable grid system is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.

34 Responsive Grid System
34Grid is a Responsive Grid System based on “equally distributed columns” layout basis. In contrast to other great grid systems (@see bottom of page), 34Grid provides equally distributed columns for each row. (and also column complements for inequal distributions)

ZEN GRIDS
A responsive grid system built with the power of Sass.

LessFramework 4
Less Framework is a CSS grid system for designing adaptive websites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

Fluid Grids
A CSS Framework for Rapid Interactive Prototyping.

Flurid
A cross-browser CSS grid framework that doesn’t hide pixels in margins!

Gridset
Designing grids with Gridset is as easy as dragging guides in Photoshop or Fireworks. Gridset provides whatever you need: PNGs, a comprehensive cheat sheet and CSS.

Tiny Fluid Grid
The happy & awesome way to build fluid grid based websites.

Style Tiles
Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.

Responsivepx
Responsivepx – find that tricky breakpoint.

Multi-Device Layout Patterns
Through fluid grids and media query adjustments, responsive design enables Web page layouts to adapt to a variety of screen sizes.

Responsive Web Design Sketch Sheets

Responsive Design Test Bookmarklet

Screenqueri

Proportional Grids

referance : smashingapps

Mobile menu jquery plugins

2014-01-31T04:59:00.000-06:00

Creating menus for mobile users gives webdesigners a unique challenge, which can be dealt with in very different ways. One of the quickest ways is to use a jquery plugin, now if you are not loading jquery as part of your site already this might be overkill just to use it for a menu. But a lot of us use JQuery so this can be a good solution.

TinyNav.js

Easy to install, simple to use. It makes a select when the browser size i small and it does exactly what it says on the tin. No more and no less.
Find it here: http://tinynav.viljamis.com

Mobile Menu

This plugin creates a drawer-style navigation on your mobile site, such as the ones you see on iOS. Has a couple of different settings you can customize.
Find it here: https://github.com/brewern/mobile-menu

Responsive-Menu

Another easy to implement solution that gives you a select option on smaller screens. This one has some different options. Stuff like what the first option should be named and at what width the menu should change.
Find it here: https://github.com/mattkersley/Responsive-Menu

jPanelMenu

jPanelMenu creates a panel menu that pops out when you hit the menu button, similar to facebook and others. This is another great solution with lots of great features.
Find it here: http://jpanelmenu.com

JQuery-Mobile-Slide-Menu

A mobile slide menu, has a very smooth sliding effect. Note that this menu uses jquery mobile, which might be a bit too heavy if you are online using it for the menu.
Find it here: https://github.com/tegansnyder/JQuery-Mobile-Slide-Menu

Is JQuery the only solution?

NO! In some cases it’s not even a good solution. There are around 243 ways to create a mobile menu. You could be using something like bootstrap or another framework which gives you options, or make your own to fit your needs.

reference: spiced2

Most Useful @Font-Face Generators for Converting Fonts to Web Safe Fonts

2014-01-29T03:03:00.000-06:00

How to make web safe fonts?

Getting each and every font in all web safe fonts format is almost impossible, as a font generally comes in only one format. And to counter that problem, we use the CSS3 @font-face rule. Before this rule came into effect, the web developers had to use the common fonts that generally come pre-installed in a user’s computer, so that he can easily read the text available on a website. But now the game is wide open, as any font can be used on a website by writing its @font-face rule in the CSS.
In addition to this, you also need to have the font (you want to use) in Web Safe Fonts format with you to write the @font-face rule in your CSS file. But if you don’t have your fonts in Web Safe Fonts format, then you can use any of the 19 most useful @font-face generators listed below.

Font Squirrel

Font Squirrel is one of the most famous website to find modern day fonts that are available for free to use in commercial projects. Here, you can get hundreds of fonts for use in Applications, Ebooks and PDFs, and Commercial Desktop Use, which means you can use those fonts in making commercial documents and graphics. In addition to this, it also offers a great tool that can turn any of your fonts into web safe fonts, which you can use on your website. Not only it converts a font into multiple web safe fonts, but it also generates the @font-face rule for the selected fonts for you for free.

Convert Fonts

Convert Fonts is one of those tools which works within a blinks of an eye. No matter if your desirable font is in TTF, OTF or Postscript format, this awesome tool will convert that into TTF, EOT, SVG, WOFF formats and will also produce a CSS file comprising of @font-face rule. What you all need to do is to upload your desirable font, and click the ‘get @font-face’ button. Within seconds it will convert your font, and provide you with its CSS file.

Code and More

Code and More is one of the most used font conversion tool. That’s because it is easy to use, and takes only a few seconds to convert fonts into web safe fonts. However, to use this tool, you need to subscriber or register yourself by accepting to pay either monthly or annually. For the Code and More subscription, you only need to spend $3 for monthly subscription, and $20 for annual subscription. Thinking why you should pay when you can get your fonts converted for free? Generally the free tools only convert the popular font formats, but this tool can convert and generate @font-face kit for plenty of font formats.

Font2Web

Font2Web is one of the most promising @font-face generator of today’s time. It is still in beta mode, but it has managed to make its own name in a short span of time. However, as it is in beta mode, it can only convert TTF and OTF fonts into web safe fonts or you can say in EOT, WOFF, TTF, OTF, and SVG formats. Apart from this, it also creates the @font-face for all your converted fonts, and also provide you with a demo HTML page demonstrating you the way to use web safe fonts on a website.

Everything Fonts

Did you ever use ConvertFonts.com to convert your fonts into web safe fonts? If yes, then you’ll definitely love this perfect @font-face generator. Yes, Everything Fonts is a @font-face generator, which is being used by thousands of people on a daily basis. With Everything Fonts, you not only get a font conversion tool, but you also get Font market place, an online font manager tool, and an expanded toolset.

Fontprep

Online tools are pretty much effective in daily use. However, every product has its own pros and cons. Similarly, online tools have also some cons related to them, and one of them is what if your internet stops working at a time when you are working on a client’s project? This applies to online @font-face conversion tools too. But don’t worry, as Fontprep is here to your rescue. It’s a powerful font conversion and @font-face kit generation tool made specifically for use on Mac OSX. The best part about this tool is that once you have imported any of your desired fonts in it for its conversion into web safe fonts, Fontprep will keep it safe forever. It also provides you with certain features that are very unlikely to get in any other tool, such as Font Preview and Manipulation, AutoHint, and Fontprep Subsetter. It’s a perfect and simple to use drag and drop font conversion tool.

Sfnt2Woff

Sfnt2Woff is a simple yet very much effective font conversion tool that comes straight from the house of Mozilla. It’s not an online tool but in fact, an offline tool that you have to download to use it. Basically, it’s a command line tool, which can convert any True Type and Open Type Font into a Web Open Font Format. There are two separate versions available for each Windows and Macintosh. To convert your TTF or OTF fonts into WOFF format with this tool, you just need to run Sfnt2Woff on a command prompt.

Web Embedding Fonts Tool

Web Embedding Fonts Tool is a creation of Microsoft that lets the web developers to convert their existing fonts into browser compatible fonts, which can be rendered by all leading web browsers. Though this tool has been developed by Microsoft to work on especially Windows, but according to many of its users, they have been able to make it work on Macintosh as well. In order to ensure that its users are well aware of how to work with it, it also has a tutorial guide which you can go through before starting the @font-face kit generation task with Web Embedding Fonts Tool. This @font-face generator can be downloaded for free.

Eotfast

To convert an TTF format font into EOT, you are very unlikely to get a better tool than EotFast. It can not only convert your TTF fonts into EOT, but can also generate the @font-face kit for converted fonts in seconds. There are plenty of features associated with this awesome tool. It compresses the EOT font files in a lossless compression up to 70% smaller than TTF ones. Moreover, it can also run on Windows and Macintosh via Virtual Machine software.

TTF to EOT Font Converter

Want to convert your True Type fonts into Embedded Open Type fonts? If yes, then you should really use TTF to EOT Font Converter, an online font conversion tool. However, the only drawback about this tool is that it can take only up to 2 MB TTF font file to convert it into EOT format. In addition to the font conversion, it also generates the @font-face for your converted font, which you can implement in your existing CSS file or link the CSS file it provides you with your HTML document to make the font work in supporting web browsers.

Online Font Converter

Online Font Converter is a great tool to convert a large no. of font formats into many other formats. For example, you can easily convert a True Type font into font formats such as .pdf .dfont .eot .otf .pfb .tfm .pfm .suit .svg .pfa .bin .pt3 .ps .t42 .cff .afm .ttc & .woff. The most fascinating aspect of this online font conversion tool is that with it you can also extract the font from a pdf file and convert them into any font format and generate its @font-face kit. In addition to this, its API is also available at mashape, which you can also use. All this can be done for free, and that makes it a brilliant tool to use.

Free Font Converter

It’s been a long time since Free Font Converter is available in the market. The majority of its users are web developers, who regularly work on client’s projects. It allows its users to convert a large variety of font formats and generate @font-face kit for the converted fonts. With this online font conversion tool, you can convert the following font formats; pfa, pfb, pt3, sfd, ttf, otf, otb, t42, cef, cff, gsf, ttc, svg, ik, mf, dfont, bin, suit and bdf.

Fonts2u

Fonts2u is again a famous font conversion tool, which is liked by more than 46,000 people on Facebook. These stats are enough to tell you about its popularity among masses. However, it doesn’t work like Online Font Converter or Free Font Converter that we stated above, as it supports the font conversion for leading or most used fonts such as True Type Fonts (.TTF), and PostScript Type 1 (.pfb). Once the fonts are converted, it will provide you with @font-face kit for the converted font.

Font Converter by Files Conversion

Files Conversion is a leading website service that provides its users with a variety of tools to convert documents, images, spreadsheets, presentations in a large no. of file formats. Similarly, it also provide a great tool named as Font Converter with which you can convert a font into 7 different font formats, which includes; OTF, TTF, BIN, PFB, SVG, DFONT, and AFM. So no matter, what format your font is in, you can get it convert that into any of the above mentioned 7 formats within no time to generate @font-face kit for the same.

Font Converter

Having problems handling any of your fonts? Or do you want to produce web safe fonts for a client project? No matter what’s your reason is, with the help of Font Converter, a leading font conversion tool, you can convert a majority of font formats including, but not limited to, TTF, OTB, BDF, FON, FNT, OTF, SVG, AFM, and DFONT into TTF, FON Generic Font, PFB, DFONT, and OTF. You can use this tool for free. However, if you feel impressed with the tool, you can also donate a little amount to the maker of this tool.

Font Face Generator

@Font-Face Generator is relatively a new font conversion and @font-face kit generation tool. However, within a short span, it has been able to make its own mark amongst web developers, who are always in need of font conversion tool. With this tool, you can get a TTF font file format converted into web safe fonts, which includes the evergreen, .eot, .svg, and .woff font file formats. It can handle a TFF font file of up to 10 MB in one go, which makes it a powerful tool to use. In addition to this, it will also provide you with @font-face kit for your converted fonts along with a sample html file demonstrating how the converted fonts will look in web browsers.

Web Font Generator

Just like the @Font-Face-Generator tool, Web Font Generator is also a new tool on the horizon. It has been designed and developed by AbstractFonts.com, a leading online free Fonts Store. As the name itself suggest, this tool helps its users to convert their True Type Fonts and Open Type Fonts into web safe fonts with ease. Along with that it also generates the @font-face kit, which is embedded in a CSS file to ensure the font used on a website works smoothly on all leading web browsers.

FontXchange by Fontgear

FontXchange is a paid Font Conversion tool that comes from the house of Fontgear, a well-known software development company. FontXchange come is two variants, one for Windows and the other for Macintosh. However, to test it before buying it, you can download its demo version. With FontXchange, you can convert a large no. of font file formats into the ones that are either common or considered as web safe fonts. For example; you can convert a PostScript font into .eot, .svg, and .woff.

Grunt-Webfont

The Grunt Webfont tool is something different from all we have listed above. You can even call it an extraordinary font file conversion tool. That’s because it converts the SVG/EPS files into icon webfonts. The generated fonts are browser compatible and also work on Internet Explorer version 8.0+. It also provides with an HTML preview to check if the fonts have been converted correctly or not. To make this tool work on your computer you need to install version 0.4 or higher. With this tool, you can also create your own vectors, gylphicons.
If you like this unique list of @font-face generators don’t forget to link it on your blog, website. Additionally, you can also share your feedback with us in the comment section provided below.

referance : queness

Responsive Web Design Tools to Test Your Website

2014-01-29T00:19:00.001-06:00

1. Mobitest

Image source
It’s crucial for your responsive website to run smoothly on all the mobile devices. Mobitest is an excellent tool that’s specially designed for helping you test the mobile performance of your responsive website. To use Mobitest, all you need to do is simply enter your website’s URL/web address and click on the “Run Performance Test” button. This tool will then fire up the website on a real mobile device and offer you a host of mobile performance statistics. This stats report will provide you a quick overview of how well your website performs on the mobile devices. The results will be displayed as per the following parameters:

The site’s average load time
The average web page size
Waterfall chart.

2. Adobe Edge Inspect

Image source
Nowadays, testing a website on real devices has become quite essential. With Adobe’s Edge Inspect tool, you can easily auto-refresh all the connected devices to check the website’s overall performance. In addition to this, you can even choose to inspect your responsive website remotely on a remote device.

3. Respondr

Image source
This is a simple yet extremely helpful responsive web design testing tool. To use Respondr, all you need to do is simply enter the URL of the website/web page that you want to test and select the device for which you want to test the site/page. You may choose from iPhone4/5, iPad and Mac. Once you’re done with making the selections, click the “Go” button to receive an in-depth report on the site’s/pages’s performance on the chosen device. You can easily preview the page at the appropriate width.

4. jResize plugin

Image source
jResize is an amazing responsive web development tool that assists the workflow of developers working on responsive website development projects. This responsive web design tool is especially designed for one-window responsive development. All you need to do is simply click through different screens to view whether they adjust accordingly or not. Hence, testing your responsive web design becomes easy while you work on the project.

5. Viewport Resizer

Image source
Viewport Resizer is a responsive web design testing tool that works as a bookmarklet. As a browser-based tool, Viewport Resizer allows you to test a responsive site/page within 2 seconds. All you need to do is click on “Click or Bookmark” button, choose from a set of preferences and enter the URL of the site/page you want to test. You may choose from a set of screen sizes including two smartphones, regular tablet, a small-screen tablet, a widescreen tablet and HDTV.

6 .Screenqueri.es

Image source
Screenqueri.es allows you to test your site/page across 60+ Device Viewports. All you need to do is simply enter the URL of the site/page you want to test, insert a few preferences and you’re ready to test your site/page for responsive nature. You may choose from a range of preset testing options that includes 14 popular smartphones and 12 popular tablets.

7. Screenfly

Image source
Screenfly allows you to test your responsive site/page by simply entering the URL/web address of the respective page/site. You may choose from a range of devices including phones, tablets, desktop or TV. You may even enter a custom screen size, generate a URL to share the design with others and rotate the screen for testing in a better fashion.

8. resizeMyBrowser

Image source
resizeMyBrowser allows you to test your site/page by choosing the dimension of your testing browser. You may select from over 15 preset browser dimensions or enter your own custom browser screen size.

9. Responsive Design Bookmarklet

Image source
Responsive Design Bookmarklet is yet another handy responsive design testing tool. All you need to do is just drag the bookmarklet above your bookmarks bar and the same will be applied in your web browser. You may then choose to preview the current page for changes to be made to screen widths so as to fit the tablets and smartphones perfectly.

10. The Responsive Calculator

Image source
The Responsive Calculator aids the web designers to convert PSD pixel to percent during the start of your responsive website. All you need to do is simply insert a few specifications and you’re done with turning your web page pixels into percentages.
Do you have any free responsive web design testing tool in mind, that hasn’t been covered above? If yes, do feel free to share it in the comments section below.

referance: pixel77

Font-Face Chrome Rendering: Fixed

2014-01-28T06:29:00.005-06:00

font-face

@font-face is a CSS rule which allows you to download a particular font from your server to render on a webpage if the user hasn’t got that specific font installed. This means that web designers no longer have to adhere to a particular set of ‘web safe’ fonts that the user has pre-installed on their computer, or rely on users having JavaScript enabled. This works by turning the font file into a @font-face kit using an online generator like Font Squirrel.

The fix!

After experimenting myself, I stumbled across what appears to be a decent, very easy fix for this issue. It appears that Chrome utilities the .svg file in the @font-face kit, and doesn’t like being called last. Below is the standard call for @font-face using CSS:

@font-face{
   font-family: 'raleway';
   src: url('fonts/raleway-medium-webfont.eot');
   src: url('fonts/raleway-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/raleway-medium-webfont.woff') format('woff'),
         url('fonts/raleway-medium-webfont.ttf') format('truetype'),
         url('fonts/raleway-medium-webfont.svg#webfont') format('svg');
}

As can be seen in the example, the .svg file comes last in the list of called URLs. If we amend the code to target webkit browsers, then tell them to solely utilize the .SVG file.

@font-face{
   font-family: 'raleway';
   src: url('fonts/raleway-medium-webfont.eot');
   src: url('fonts/raleway-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/raleway-medium-webfont.woff') format('woff'),
         url('fonts/raleway-medium-webfont.ttf') format('truetype'),
         url('fonts/raleway-medium-webfont.svg#webfont') format('svg');
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
    font-family: 'raleway';
    src: url('fonts/raleway-medium-webfont.svg') format('svg');

    }
}

How To Properly Smooth Font Using CSS3

2014-01-28T00:01:00.001-06:00

I've came across some people usually wondering how some websites have such crisp and clear font. There are two reasons for this:

1. They are most likely using the -webkit-font-smoothing hack. This type of hack is mostly used for mobile browsers, as well as the Apple Safari and Google Chrome Browsers.

2. To really smooth the font and not have anything too blurry websites usually use the text-shadow effect. This is also used so the font will look smooth on all browsers (Opera, Firefox, Safari, Chrome and others alike) except internet explorer.

When you apply the font smoothing hack to your stylesheet and you want it applied to your whole site, make sure we write the following code.

Lets start off by adding the font smoothing hack to your stylesheet:

html, html a {
    -webkit-font-smoothing: antialiased !important;
}

Here is the definition of anti-aliased: http://en.wikipedia.org/wiki/Spatial_anti-aliasing

Now for the text shadow effect to really smooth out the font:

html, html a {
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

Here is the code all put together:

html, html a {
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

source: icondeposit

21 Ridiculously Impressive HTML5 Canvas Experiments

2014-01-17T03:04:00.000-06:00

HTML5 is the thing to talk about these day. Today, we have a collection of some ridiculously impressive HTML5 canvas-based experiments that will make you say, “Wow!” Let’s take a peek at some of the latest, cutting edge examples out there.

1. 8 Bit Color Cycle

2. Particle Letter Animation

3. Cloth Experiment

This is one of the best canvas-based experiments.

4. Particle System

This is one of my favorites — absolutely amazing!

5. Strange Attractors

This example generates beautiful fractals, like the ones generated by Apophysis. Be sure to tick the composite :) .

6. Canvas Nebula

7. Bomomo

8. Liquid Particles

9. Sinous

This is a really fun game; is it not as easy as it looks!

10. Water in HTML5

11. Blob

12. Magnetic System

13. Trail

14. Particles

15. Shattering Box Physics Simulation

This incredible example depicts real world physics in action.

16. Flower Power

Try to guess the word. :P

17. 9Elements Particle Play

This is a beautiful example which demonstrates audio and canvas in action.

18. Beauty of Maths

19. Tree

20. Cloth Simulation

21. Arcade Fire

Viewport Meta Tag For Non-Responsive Design

2014-01-16T04:06:00.000-06:00

I'm sure you all are using viewport meta tag for responsive design, but did you know that the viewport tag can also be very useful for non-responsive design? If you haven't got the time to convert your design to responsive yet, you should read this article on how to use viewport tag to improve the appearance of your design on mobile devices.

General Use of Viewport Tag

Viewport meta tag is generally used for responsive design to set the viewport width and initial-scale on mobile devices. Below is a sample viewport tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Using Viewport Tag for Non-responsive Design

As you may know, the default viewport width on iPhone is 980px. But your design might not fit in that range. It could be wider or narrower. Below are two examples where you can utilize the viewport tag to improve the rendering of non-responsive design on mobile devices.

Example

Take a look at the Themify site on your iPhone.

The screenshot on the left shows how the site would render without the viewport tag. As you can see, the page is touching on both sides. I added viewport tag to specify the viewport width to 1024px so it leaves some margin space on the left and right sides.

<meta name="viewport" content="width=1024">

Another Example

If your design is too narrow, it might also cause an issue. Lets say the container width of your design is 700px and it is not responsive, it would look like the screenshot on the left where there is a big empty space on the right.

You can simply fix this by setting the viewport width to 720px. The width of your design doesn't change, but iPhone will scale it to fit in 720px.

<meta name="viewport" content="width=720">

Common Mistake

A common mistake is that people often apply initial-scale=1 on non-responsive design. This will make the page render at 100% without scaling. If your design is not responsive, users would have to pan around or zoom out to see the full page. The worst case is combining user-scalable=no or maximum-scale=1 with initial-scale=1. This will disable the scaling and zooming capability of your site. With scaling disabled, users have no way to zoom out to see the complete page. Remember: if your design is not responsive, do not reset the initial-scale or disable scaling!

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

Amazing CSS3 Animation Demos

2014-01-16T03:53:00.001-06:00

Here is a compilation of 47 jaw-dropping CSS3 animation demos. They demonstrate the possibilities of the CSS3 transform and transition property. Some are very useful and can be used as Javascript alternatives. Most of them are simply to look cool. In order to veiw these effects, you need a webkit browser such as Safari and Chrome (sorry to the Internet Explorer users). Enjoy!

CSS3 Clock With jQuery

Analogue Clock

3D Cube That Rotates Using Arrow Keys

Multiple 3D Cubes (Slide In/Out)

CSS3 Accordion

Auto-Scrolling Parallax

Isocube

Image Gallery

Matrix

7 Javascript-effect Alternatives Using CSS3

Image Hover Effects

Turning Coke Can (Control With Scrollbar)

3D Meninas

Polaroid Gallery

Space

Note: this one is graphic intense and takes a while to load, but the result is crazy!

Mac Dock

Drop-In Modals

Sliding Vinyl

Zooming Polaroids

Animated Rocket

Poster Circle

Morphing Cubes

Falling Leaves

Animated Polaroid Gallery

Spotlight Cast Shadow

Colorful Clock

Lightbox Gallery (Draggable)

Elastic Thumbnail Menu

Coverflow

Snowflakes

jQuery DJ Hero

Dynamic Stacking Cards

Another Image Gallery

Snow Stack (Control With Arrow Keys)

Animated Pricing Column

Slick jQuery Menu

CSS3

CSS Tabs Without Javascript

Tab Menus Without Javascript

SVG Fisheye Menu

Dynamic Presentation Without Flash

Rotating Gallery

Dropdown Menu

Another Fisheye

Frame-by-Frame Animation (Hover to Play)

Another Accordion

AT-AT Walker (No Flash or Javascript)

HTML5 Reset CSS

2013-08-10T12:34:00.003-05:00

This is the simple way to handle your html page. like html tags body, list, table, etc. Just copy below
code into your new sheet. And save it as "reset.css". After saving file just LINK this CSS file into your Index page.

/* html5 Reset Stylesheet */
/* v1.1 */
/* Last Updated: 2013-08-10 */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
*{
    margin:0;
    padding:0;
}
body {
    line-height: 1;
}
nav ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    outline:none;
    border:0;
}
a:hover{
    text-decoration:underline;
}
a:focus{
    outline:none;
    border:none;
}

img{border:none}
/* change colors as your requirement */
ins {
    background-color: #CCC;
    color: #000;
    text-decoration: none;
}
/* change colors as your requirement */
mark {
    background-color: #CCC;
    color: #000;
    font-style: italic;
    font-weight: bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
input, select {
    vertical-align: middle;
}
/* change color as your requirement */
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #666666;
    margin: 1em 0;
    padding: 0;
}

Simple way to Css Hack for IE

2013-08-06T01:21:00.002-05:00

Due to its relatively poor level of standards support, Internet Explorer tends to be the subject of most CSS hacks.

Internet Explorer was not designed to allow multiple versions to be installed at once, and Microsoft doesn't officially support any such configurations. If you use one of the hacked third party packages that attempts to do this, you will experience problems with version-specific conditional comments, among other things. This is because the different stand-alone copies still rely on a common centralized registry for certain data, including version information.

Although there is no simple way to cut through all of the issues with stand-alone versions of Internet Explorer, it is possible to force them to look elsewhere for their version information, thus fixing this issue with conditional comments.

Here is an example:

#element {
    color:orange;
}
#element {
    *color: white;/* IE6 + 7, doesn't work in IE8/9 as IE7 */
}
#element {
    _color: red;/* IE6 */
}
#element {
    color: green\0/IE8+9; /* IE8 + 9 + IE10pp4 */
}
:root #element { color:pink \0/IE9; } /* IE9 + IE10pp4 */

CSS hacks are usually bad. You should probably do this instead.




 <html>

This uses conditional comments to target certain versions of Internet Explorer, and the element receives a custom class name for different versions of IE, and no class name when the browser is not IE.

Then in your CSS, you would target IE7 or IE8 like this:

.element {
    margin-bottom: 20px;
}

.ie7 .element {
    margin-bottom: 10px;
}

.ie8 .element {
    margin-bottom: 15px;
}