Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

12 Fresh Useful CSS Tools 2011

Even though you may know CSS very well and for some tasks it would take a lot of time to complete and for this there are lots of tools available using which you can complete your projects quicker. Here are some list of tools, which will make your work easier. Don't forget we are here to help our design community which will grow to a newer heights.

Minify and Gzip compress CSS & Javascript in a single click


An easy to use online web page compression tool. Speed up your website by compressing, merging and Gzipping your CSS and Javascript files.


SelectorGadget: point and click CSS selectors


SelectorGadget is an open source bookmarklet that makes CSS selector generation and discovery on complicated sites a breeze. Just drag the bookmarklet to your bookmark bar, then go to any page and press it. A box will open in the bottom right of the website. Click on a page element that you would like your selector to match (it will turn green). SelectorGadget will then generate a minimal CSS selector for that element, and will highlight (yellow) everything that is matched by the selector. Now click on a highlighted element to remove it from the selector (red), or click on an unhighlighted element to add it to the selector. Through this process of selection and rejection, SelectorGadget helps you come up with the perfect CSS selector for your needs.


LESS

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js.


CSS Pivot

Add CSS styles to any website, and share the result with a short link. Invite others to submit improvements for your website.


jsFiddle

Nifty tool for editing & sharing HTML / CSS / JS snippets.


Holmes The CSS Markup Detective

Holmes is stand-alone diagnostic CSS stylesheet that can highlight potentially invalid, inaccessible or erroneous HTML(5) markup by adding one class.


WebPutty

With WebPutty, you get an in-browser, feature-rich, syntax-highlighting CSS editor. You can see your changes instantly with the side-by-side preview pane, so there’s no need for the traditional back-and-forth between your editor and refreshing a browser to see your changes. The editor is your browser…and the preview’s built-in! Best of all, the editor and the preview pane work together, so that when you click on a CSS selector, all the elements matching that selector are instantly highlighted in the preview pane.


CSSDesk – Online CSS Sandbox

CSSDesk is a online HTML/CSS sandbox. Experiment with CSS, see the results live, and share your code with others.


SlickMap CSS

SlickMap CSS is a simple stylesheet for displaying finished site maps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.


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 Easing Animation Tool

Ceaser is an interactive CSS easing animation tool. It lets you build any kind of ease you want, and comes with many of the Penner Easing Equations.


CSS3 Generator

CSS3 generator will allow you to create virtually every CSS3 feature : gradients, shadows, box radius, font-face, transitions, animations. But, unfortunately, in spite of its great usefulness it has one big problem since all the popular CSS3 properties have multiple browser-specific implementations.

25 Awesome XHTML/CSS/ HTML5 Website Templates

Good news for those wanting to build a new blog or website. Today we’ll feature really Awesome XHTML/CSS/ HTML5 Website Templates. But first, let’s learn about website templates and why you may need them. A Website Template is a set of files that work together to produce a manageable website design. When you see a template you know how your future website will look like.

A free xHTML/CSS Template – CreativeStudio

Today we’re presenting a beautiful, modern and free xhtml/css template that can be used for your personal and client work to make a beautiful website! We hope that you’ll like it and will also enjoy it! Be careful reading the licensing file that is stored along with all the template’s files.

Fresh CSS Button Tutorial Framework & Generator

CSS is getting quite powerful these days. It can even take the place of images in many ways, giving you a more flexible design and fewer files to work with. Imagine being able to make an ultra sexy button with just CSS, giving you complete control through code. Well, you can! And it’s not too difficult, really. Below you can find some fresh css button tutorial, framework & generator !

Make a ‘View Source’ Button

The idea that first came to mind was to use CSS3's :target pseudo class. We talked about these a while back while exporting CSS3 tabs. The idea is to have a link that links to the #source-code hash tag.

Collection Of Helpful CSS Snippets

Here are a bunch of the snippets that You can use on a regular basis to save time and be more efficient in coding.

Code Snippets


23 Best CSS3 Tutorials & Resources For Creating Awesome Button

Despite being an emerging technique still unsupported by some browsers, CSS3 gained a huge attention from designers and web developers in the last 6 months. In fact, CSS3 brings to life countless new possibilities to make even better websites. In this article, I have compiled a list of 23 Best CSS3 Button Tutorials & Resources to make extremely awesome buttons using CSS3.

Type study: An all CSS button

The button is also a great place to showcase many of the new CSS3 properties in one place, which is another reason I’m particularly taken with buttons at the moment. Through the use of box-shadow, text-shadow, border-radius, and CSS gradients, we can create highly polished interface components that don’t require images.

25 Useful CSS3 Tutorials For Web Developer & Designer

Many exciting new functions and features are being thought up for CSS3. We will try and showcase some of them on this page. So, have a look at these 25 Useful CSS3 Tutorials For Web Developer & Designer.I hope this post will be useful to you all!

How to create a kick-ass CSS3 progress bar

The following tutorial and the demo works best on Chrome and Safari, correctly on Firefox and very badly in Internet Explorer (eh…I’m sure you hadn’t guessed that).

How to create a kick-ass CSS3 progress bar

10 Cool CSS3 3D Tutorials + Demos

Even though CSS3 is not fully supported yet, many web developers are starting to use many of the new techniques introduced. CSS3 has taken a very large step forward in helping web developers get away from importing mass amounts of images/JavaScript and making it possible to do this only by using pure CSS.

3D Text Tower

Have you seen David Desandro’s site? It’s pretty slick. His footer is especially fun

3D Text Tower