CSS3 Generators

CSS3 introduces a lot of new possibilities to the front end development. Even if this is a amazing thing, it is quite hard to remember all the parameters that an property accepts, all the browser prefixes. So, here are some CSS3 generators that can help you save a lot of time.

1. CSS3 Generator

CSS3 Generator allows you to generate more than 10 different CSS3 effects like:  border radius, box shadow, text shadow, transitions, gradients and others.

Visit CSS3 Generator

2. CSS3 Pie

This is a very useful generator since CSS3 Pie can help when IE compatible code is needed. This generator makes rounded corners, linear gradient and box shadow work in Internet Explorer 6-9.

Visit CSS3 Pie

3. CSS3 Please

CSS3 Please is an editor for CSS3. You can edit CSS rules from the editor and a container will instant change as you write the code.

Visit CSS3 Please

4.  Font-Face Generator

If you want to use a personalized font on your website just upload it to Font Squirrel font-face generator and you can get the CSS code as well as your font in all formats needed by the different browsers.

Visit Font-Face Generator

CSS Style Guides

Below is a list of some style guides for CSS provided by GitHub and Google.

GitHub

GitHub CSS style guide

– use soft-tabs with a two space indent
– put spaces after : in property declarations and before { in rule declarations
– use hex color codes #000 unless using rgba.
– use // for comment blocks, instead of /**/
– use px for font-size, because it offers absolute control over text. Additionally, unit-less line-height is preferred because it does not inherit a percentage value of its parent element, but instead is based on a multiplier of the font-size.

Google

Google HTML/CSS style guide

Style Rules:

type selectors: avoid qualifying ID and class names with type selectors;

/* NOT */
ul#example {}
div.error {}

/* DO */
#example {}
.error {}

shorthand properties: use shorthand properties where possible;

/* NOT */
font-family: georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 0;

/* DO */
font: 100%/1.6 georgia, sans;
padding: 10px 15px 20px 0;

0 and units: omit unit specification after ‘0’ values;
hexadecimal notation: use 3 character hexadecimal notation where possible;
ID and class naming: use meaningfull or generic ID and class names;
ID and class delimiters: separate words in ID and class names by a hyphen;

/* NOT */
.demoimage {}
.error_status {}

/* DO */
.demo-image {}
.error-status {}

Formatting Rules:

indentation: indent by 2 spaces at a time;
capitalization: use only lowercase;

/* NOT */
FONT-SIZE: 14PX;

/* DO */
font-size: 14px;

declaration order: alphabetize declarations;
declaration stops: use a semicolon after every declaration;

/* NOT */
.test {
  display: block;
  height: 100px
}

/* DO */
.test {
  display: block;
  height: 100px;
}

property name stops: use a space after a property name’s colon;
selector and declaration separation: separate selectors and declarations by new lines;
rule separation: separate rules by new lines;
CSS quotation marks: use single quotation marks for attribute selectors and property values where necessary.

CSS3 filters

CSS3 Filters allow you to modify HTML elements and images with blurs, grayscales, brightness and a lot more.
The property to control the filters is:

filter: filter(value);

For the full syntax of this property, browser prefixes will be required. For now, only -webkit- browser engine supports these properties (Chrome and Safari).

-webkit-filter: filter(value);
-moz-filter: filter(value);
-o-filter: filter(value);
-ms-filter: filter(value);

Multiple filters can be applied and separated by space:

filter: blur(2px) grayscale (0.5) opacity(0.8);

I will provide the original image (first photo), the filtered version of the image (the second one) and a picture of what the filter should look like (the third photo) for the browsers that can’t see the filters.

Blur

The original image Filtered image Photo of filter

Blur is measured in pixels. The code is:

filter: blur(5px);

// Browser Specific
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);

Brightness

The original image Filtered image Photo of filter

Brightness is measured from zero to one, 1 being complete brightness and 0 being the original brightness.

filter: brightness(0.3);

// Browser Specific
-webkit-filter: brightness(0.3);
-moz-filter: brightness(0.3);
-o-filter: brightness(0.3);
-ms-filter: brightness(0.3);

Contrast

The original image Filtered image Photo of filter

Contrast is measured using percentages. 100% is the default value, 0% is a black image, and over 100% adds contrast.

filter: contrast(120%);

// Browser Specific
-webkit-filter: contrast(120%);
-moz-filter: contrast(120%);
-o-filter: contrast(120%);
-ms-filter: contrast(120%);

Grayscale

The original image Filtered image Photo of filter

Grayscale is measured in percentages (0% – 100%) – the measure of the amount you wish to grayscale the image by.

filter: grayscale(100%);

// Browser Specific
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);

Hue Rotate

The original image Filtered image Photo of filter

Hue Rotate allows you to alter the hue by rotating it. It’s measured in degrees.

filter: hue-rotate(30deg);

// Browser Specific
-webkit-filter: hue-rotate(30deg);
-moz-filter: hue-rotate(30deg);
-o-filter: hue-rotate(30deg);
-ms-filter: hue-rotate(30deg);

Saturation

The original image Filtered image Photo of filter

Saturation is measured in percentages (0-100%).

filter: saturate(70%);

// Browser Specific
-webkit-filter: saturate(70%);
-moz-filter: saturate(70%);
-o-filter: saturate(70%);
-ms-filter: saturate(70%);

Sepia

The original image Filtered image Photo of filter

Similar to grayscale, it is the amount you wish to add sepia to the image. 100% will be complete sepia, 0% will be the initial image.

filter: sepia(100%);

// Browser Specific
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);

Check/uncheck all checkboxes

Here is another useful jQuery snippet to check and uncheck all checkboxes.

Simple usage:

The HTML

<div class="options">
  <ul>
    <li><a href="#" class="check-all">Check All</a></li>
    <li><a href="#" class="uncheck-all">Uncheck All</a></li>
  </ul>

  <ul>
    <li><input type="checkbox" id="option1" /><label for="option1">Option 1</label></li>
    <li><input type="checkbox" id="option2" /><label for="option2">Option 2</label></li>
    <li><input type="checkbox" id="option3" /><label for="option3">Option 3</label></li>
    <li><input type="checkbox" id="option4" /><label for="option4">Option 4</label></li>
    <li><input type="checkbox" id="option5" /><label for="option5">Option 5</label></li>
  </ul>
</div>

The JS

$(function() {
  $('.check-all').live('click', function(){
    $(this).closest('.options').find('input[type=checkbox]').attr('checked', true);
    return false;
  });

  $('.uncheck-all').live('click', function(){
    $(this).closest('.options').find('input[type=checkbox]').attr('checked', false);
    return false;
  });
});

Demo