Category Archive: CSS

Subcategories: No categories

Improve the Feng Shui of CSS Files

Procssor

http://procssor.com/

Clean code is happy code.  There is something serene about opening up a file to edit and having everything laid out nicely with consistant spacing, bracketing, grouping styles and comments. Today I happened across a nice little generator that cleans up your css files for you.  Procssor will take CSS input and apply specified options in generating a visually appealing, consistent block of CSS output.

Processor boasts multiple methods of CSS input including: Direct Input, URL and File upload.

The options panel provides image tool tips of CSS code on hover giving the end user a little visual hint at how the CSS will be handled.   There are a couple of really good options available for formatting including alphabetizing your properties and columnizing your code.

The result is a consistent and nicely styled CSS file available to copy and paste or download as a file.

CSS3 support in IE 6-8

http://css3pie.com/

The future is bright and full of endless possibilities.  Some day the world wide web will be awash in beautiful and compliant CSS3.   Developers everywhere will be forgetting how to make rounded corners with images and cutting 1 pixel wide gradient backgrounds. But that is the future.  Today many of us are still stuck supporting IE.  If your work targets Asia than chances are good you are even supporting IE6.  Backwards support for IE will be upon us long into the days of CSS3 friendly IE9.

For the most part CSS3 effects are simply cosmetic niceties that are not vital to the functionality of a site.  I have seen, for the most part, a general attitude of not providing CSS3 effectual support to browsers that do not support it.   It has been treated more as a reward to those technically savvy folks who updated their browser.

Screen Shot of CSS3 Effects in IE6

Enter CSS3 PIE.  The site that is trying to provide a more “Progressive Internet Explorer”.   CSS3 PIE has decided to fight the unpopular fight of taking CSS3 support back into dark abyss of previous IE versions.   Even IE 6 – which is no longer supported by Microsoft – can display fancy CSS3 code.  The screen shot on the right was taken using IE6.

CSS3PIE is helping to bring a little style and class back to the browsing experience.  It’s easy to use and initially looks promising.

 

A Grid System for CSS that’s Simple and Light

Grid CSS

http://brajeshwar.com/2011/grid-a-minimal-css-grid-utility/

If you are looking for a lightweight and simple CSS Grid system than Grid – a minimal CSS Grid Utility‘ might be a useful option for you.   Grid is a small collection of classes that conveniently floats elements with an appropriate amount of width.   In addition to being incredibly light and straightforward the Grid works well in a fluid layout.

Fluid Grid

Fluid Layout of the Demo

To see the fluid-ness in action on their demo you will have to change the body tag width from 960px; to 100%.   This can be done easily be done using the FireBug extension in Firefox.

Grid Fluid Brick Wall

Grid Fluid Brick Wall

The strength of the utility is the simplicity and no learning curve.  After reading the through the CSS code once I was able to generate a fluid brick wall in about 45 seconds.

The basis of developing the columns comes from applying a class “gXofY” – Where X is how many to take up and Y is the total number.   So if there are two equal columns you want apply the class of “g1of2″ to both.

This Grid system, out of the box, is limited to a maximum of 5 columns.  If you you require additional columns for your project you can easily add more as you simply need to do the math to come up with each class.   For instance  g1of9 would be width: 11.111111 %.

The only other issue I had when creating my brick wall example was that there was no ’2of4′ class.  Knowing I want the block to be 50%  I simply applied the 1of2 – but now that row contains the following columns in this order: 1of4, 1of2, 1of4.  In dealing with the row I would rather it could have read 1of4, 2of4, 1of4.   In addition there is no 1of1 class (100% width).   But as mentioned before this is a good starting block for setting up a simple Grid system that works for you.

Grid is a simple and useful utility authored by Brajeshwar that will aide in the rapid development of simple CSS layouts.

 

Top 3 CSS Gradient Generators

“When I was your age – I had to build gradients in photoshop!”

CSS gradients are here to stay. Now that browser support is coming around there are some really cool sites popping up that lend a programmatic hand in creating your own.  Below are the top 3 gradient generators in my book.

1. Ultimate CSS Gradient Generator by ColorZilla

Ultimate CSS Gradient Generator

http://www.colorzilla.com/gradient-editor/

ColorZilla’s Ultimate CSS Gradient Generator is super intuitive, easy to use and packs the most punch in the group.  Along with real time preview this generator also provides built in gradient templates that can be loaded from a swatch and modified to your liking.

All designers will immediately recognize the UI as the tools and swatches resemble that of design applications such as Photoshop.

Another great feature is the Hue/Saturation modification capabilites.  With a slider tool you can adjust all of the colors in the gradient – while keeping the structure of the gradient in place.  Changing a color theme couldn’t be easier.

This site also allows you to save your gradient out to a unique link making it possible to reference your gradient at a later time.

2. CSS Gradient Generator by display-inline.fr

CSS gradient generator

http://www.display-inline.fr/projects/css-gradient/

Display-inline’s CSS gradient generator is my number 2.  A couple of things that stand out about this generator are the clean design, the ability to download the gradient as a .png file, browser compatibility table and directional gradients.

This gradient generator is a good option for straight forward basic gradients and building gradients from a mockup.   The lack of a color picker and having to specify step position by percentage make ‘designing on screen’ difficult without a previously designed mockup.

The intuitive design, legacy browser support and the .png download make this generator worth a second look.

3. CSS3 Gradient Generator by Damian Galarza

CSS3 Gradient Generator by Damian Galarza

http://gradients.glrzad.com/

Rounding out the top 3 CSS Gradient Generators is the CSS3 Gradient Generator by Damian Galarza. Another great generator with the familiar color picker and sliders to aid in the on screen designing of gradients.  The directional support and real time preview display are key elements this site has going for it.  Stops can easily be added by clicking the “plus” sign next to ‘Color Swatches’ and positioned within the gradient with a slider.

What holds this site back is the lack of legacy browser support, the inability to save the gradient and the lack of any extras [reverse, undo and hue/saturation].  Still a great option and worth a look as you find the tools that match your needs.

 

Kick-start Your CSS3 File with ‘CSS3 Please!’

CSS3 is continuing to literally change the face of website design incorporation.  Now those once tedious effects can be easily accomplished with some simple CSS code.

As browser support increases and the move to CSS3 becomes more universal designers and coders might need a little push to get started with the new tools.  CSS3Please.com is a great sandbox for learning the new CSS3 properties.  Upon entering the site every CSS coder will recognize right away that the site looks like a familiar CSS file displayed in the browser. This CSS file has preset classes with CSS3 properties assigned.

CSS3 Please Screen Shot

http://css3please.com/

There are 2 things that make this site great:

  1. You can click and modify the code right on the screen – right away.    It is a familiar environment – the changing of the code on screen is intuitive and creatively bridges the gap for the coder.
  2. There is an element on the screen that displays the effects of the CSS code.  As you change the code in the screen you can see the result on the elements in the DOM.

And your new code is simple as copying and pasting.

Kick-start your CSS3 File with CSS3 Please today!  http://css3please.com/