All posts tagged css

CSS Spritemap Generator: Spritemapper

CSS Spritemap Generator

Spritemapper is an application that merges multiple images into one and generates CSS positioning for the corresponding slices.

Improve loading times. Only 10% of a webpage’s loading time is due to the actual page—the other 90% is spent downloading styles, scripts and images. By reducing the amount of images and better utilizing the connection, CSS spritemapping can reduce your website’s loading time.

Just plain old CSS. You don’t have to write any extra syntax to make Spritemapper work. Just define the directories of images you want spritemapped and use the CSS background declaration as usual.
Read more…

8 Useful CSS Tools

8 Useful CSS ToolsWriting better CSS is something all web designers and developers should strive for, and thankfully there are some useful tools out there to help do just that. For this post, we’ve rounded up a collection of new tools to help you with your CSS. From learning new CSS3 properties, to making your code more efficient, there’s bound to be a few tools here you will find useful.

CSS3 Patterns Gallery lets you browse various CSS3 patterns as thumbnails or fullscreen and grab the code so you can use them on your own site.

Read more…

10 Excellent CSS Accelerating Development Time

10 Excellent CSS Accelerating DevelopmentCSS lets you to do various things, but developers miss out on some features like variable, constants, and general faster syntax? Ordinary CSS does not have the ability to do all that, so many preprocessors have been created to let you use variables on CSS files and then parse it to regular stylesheets.

Read more…

Real World CSS Practices

CSS Best PracticesI’ve been working with CSS for quite a few years now. Based on that experience, this article will share some of the best habits and practices that I have found to be helpful and beneficial in the areas of organization, performance, readability and typography.

By now, I think it’s safe to say that most designers on the web are using CSS in some capacity. Even those (misguided) individuals who are still using table-based layouts have a tendency to use CSS for some basic styling, such as establishing fonts and link colours. With that in mind, I thought it might be worthwhile cover some of what I have found to be best practices.

Read more…

CSS Form Templates, Tools & Services

CSS Form Templates, Tools & ServicesCSS has hugely improved forms. Where once you had very rudimentary forms that looked plain and un-styled, CSS lets you style your form however you want and create rich and robust forms. Even a simple contact form can look slick and increase readability and user-friendliness – which means more visitors will fill it out and you’ll get more results based on that action.

Read more…

CSS Toolkit for Websites and Web Apps Development:Twitter Bootstrap

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

Website and Web Apps Development CSS Toolkit

Bootstrap is built with Less and was designed to work out of the gate with only modern browsers in mind. Download, fork, pull, file issues, and more with the official Bootstrap repo on Github.


CSS Code Analysis – CSS Lint

CSS Lint is a tool to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.

CSS Code Analysis
CSS Lint checks for the common best CSS coding practices and warns you about the mistakes.


Free CSS Templates Collection

Free CSS Templates collection are provided by as free download for everyone. All CSS Templates are absolutely free to download, modify and apply for your websites without restrictions. All of them are W3C standards-compliant free CSS templates.

Free CSS Templates


Front-end Framework 960 Grid System – frontendmatters

FEM CSS Framework is a 960px width + 12 column grid system + CSS common styles, to easy and fast develop web layouts. It is based in the 960 Grid System, but with a twist in the philosophy to make it more flexible and faster to play with boxes.


Download  |  Website:

How to Create CSS Drop Shadows Without Images?

Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances.

CSS drop-shadows without images

Demo | Website:

email lists