Webmaster 9 » CSS http://www.webmaster9.com Free Webmaster Resources Thu, 19 Jan 2012 06:06:53 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 5 Web-based CSS Tools http://www.webmaster9.com/2011-02/5-web-based-css-tools.html http://www.webmaster9.com/2011-02/5-web-based-css-tools.html#comments Wed, 16 Feb 2011 13:12:02 +0000 Webmaster9 http://www.webmaster9.com/?p=16680 CSS Border Radius Generator

In a beautiful interface, generating rounded borders could not be easier.

Ultimate CSS Gradient Generator

It can be cumbersome to have to manually input the direction, start, stop, and color codes to perfect that CSS3 gradient. A gradient with multiple stops and color changes? Believe me, it’s not the most fun thing to code and images aren’t easy to modify after they’re on the site. Luckily, Colorzilla has designed this super easy to use gradient generator for this purpose. It uses sliders and color pickers just like Photoshop and is highly recommended.

Mike Plate’s CSS3 Playground

This superb little interface is easy to use and generates great CSS3 effects such as rounded borders and drop shadows. More options such as transforms, gradients, and outlines make this a very good web service with a very good approach.

CSS Color Editor

Well, your site looks just dandy. But the client wants a different color scheme. Go back and edit every single color code? Don’t even think about it. Simply upload your file to CSSColorEditor, and it will pull out each of the colors, arrange them in a list, and you can simply go down the list and adjust the colors that need adjusting. It gives back the properly modified CSS file.

ColorPicker

Don’t open up an image editor just to find a color! This web service has a color picker and spits out a HEX code alongside the standard RGB. Great for choosing that quick color.

Related Posts

]]> http://www.webmaster9.com/2011-02/5-web-based-css-tools.html/feed 0 PDF eBook: Teach Yourself Web Publishing with HTML and CSS in One Hour a Day Free Download http://www.webmaster9.com/2010-08/pdf-ebook-teach-yourself-web-publishing-with-html-and-css-in-one-hour-a-day-free-download.html http://www.webmaster9.com/2010-08/pdf-ebook-teach-yourself-web-publishing-with-html-and-css-in-one-hour-a-day-free-download.html#comments Wed, 04 Aug 2010 15:13:57 +0000 Webmaster9 http://www.webmaster9.com/?p=9535 Product Description

Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day is a new edition of the best-selling book that started the whole HTML/web publishing phenomenon. The entire book has been revised and refined to reflect current web publishing practices and technologies. It includes extensive coverage of Cascading Style Sheets (CSS), which have become a staple in web development.

You’ll have no problem learning from expert author Laura Lemay’s clear and approachable writing style. Simple, step-by-step instructions with lots of practical, interesting examples of web pages will guide you as you master current web publishing technologies and practices.

http://depositfiles.com/files/v3670cb6y

Related Posts

]]> http://www.webmaster9.com/2010-08/pdf-ebook-teach-yourself-web-publishing-with-html-and-css-in-one-hour-a-day-free-download.html/feed 0 10 Online Tools and Apps to Help Optimize and Format CSS http://www.webmaster9.com/2010-06/10-online-tools-and-apps-to-help-optimize-and-format-css.html http://www.webmaster9.com/2010-06/10-online-tools-and-apps-to-help-optimize-and-format-css.html#comments Thu, 10 Jun 2010 14:06:41 +0000 Webmaster9 http://www.50jy.com/?p=27

Why would you ever need to optimize (or optimise, which ever spelling you prefer) or reFormat your CSS? Optimizing your CSS will not only allow your web page to load quicker, it also increases the durability and resilience of your site when there is a spike in visitors (i.e. the Digg effect) and, for me, the most important part is that it gives you more readable code.

Some of these tools are fairly basic, offering optimization and formatting without many options or user control, which are fine for coders with limited knowledge. For the CSS pros, there are some advanced tools and apps that will allow you to choose the level of compression and also offer many options regarding your optimized CSS. You can choose to eliminate unused selectors and properties, unwanted whitespace, tabs, comments and you can even change the longhand declaration to shorthand notations.

No one who codes there CSS has complete confidence that it is perfectly formatted, this is were these tools come in and help.
Please note, these tools are not CSS validation or error checkers, if you are looking for that try the The W3C CSS Validation Service.

flumpCakes Online CSS Optimiser/Optimizer

This feature rich tool takes your CSS file and parses and outputs a leaner version, removing any redundancies and attributes which are not needed. Here is a full list of what it can do:

  • Removes comments
  • Removes white space (such as excess spaces)
  • Converts RGB values to Hex (they’re smaller)
  • Converts Hex values in the format #RRBBGG to #RGB.
  • Changes zero values with a size specified to 0. (0px would change to 0)
  • Changes values such as border: 1px 2px 1px 2px; to border: 1px 2px;
  • Converts multiple background, font, margin, padding, list attributes into a single attribute
  • Converts multiple border values into single attributes
  • Option to convert absolute values (PX & PT) into relative values (EM)
  • Groups style attributes and values which appear mutliple times into a single style

This tool reads CSS just like a browser would. So using hacks which are browser specific will give random results, make sure any hacks are removed before use.

Styleneat – CSS Organizer

Styleneat organizes and standardizes your CSS – selectors, sub-selectors and properties – in a structure that makes it easier to define page areas making it easier to see how they relate to each other.
With this tool you have the option of sorting the properties alphabetically, sorting the selectors alphabetically and you have the choice of multi or single line formatting.

Clean CSS – Optmize and Format your CSS

CleanCSS is a CSS optimizer and formatter with a reasonable amount of options, that takes your CSS code and makes it cleaner and more concise.

CSS Compressor – Online Code Compressor

CSS Compressor, obviously compresses the CSS to reduce the code size and make your web pages load faster. You can select from four levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression.

Code Beautifier – CSS Formatter and Optimiser

This tool is based on the popular open-source CSS parser and optimizer, CSS Tidy. Code Beautifier offers the most options compared to all of the tools in this article.
You can sort and merge selectors and properties, compress colors and font-weights, choose between lower and uppercase formatting and even has the option to discard invalid properties.

CSS SuperScrub

CSS SuperScrub can significantly reduce the size and complexity of your CSS by stripping out unneeded content, stripping redundant calls, and intelligently grouping the remaining element names.
There are limited options with this tool, which is no bad thing, it works exactly as intended: It scrubs your CSS.

Online CSS Optimiser

Online CSS Optimizer/Optimiser is a web tool for reducing the file size of cascading style sheets. In order to save more space optimized files would be messy even so you may output it as a file. Non-valid or hacked (for certain browsers) CSS files may result in error.

CSS Compressor – CSS Drive

Use this utility to compress your CSS and increase the loading speed of a web page and save a little on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. The “Normal” mode should work well in most cases, creating a good balance between the two.
It also has the option of an Advanced Mode that gives you more compression options.

CSS Analyser

The CSS Analyser is a small utilty that allows you to check the validity of your CSS against the W3C’s validation service, along with a color contrast test, and a test to ensure that relevant sizes are specified in relative units of measurement.
If the CSS is specified by a URL, it will be loaded into the text area to offer an option to make changes for testing without having to re-upload.

CSS Redundancy Checker

CSS Redundancy Checker is a simple tool with one simple, yet useful function. It is a tool that finds CSS selectors that aren’t used by any of your HTML files and any that are redundant it removes.

CSS Code Formatter and Optimizer – CSS Portal

Yet another code formatter and optimizer, basic, but one that is worth mentioning and trying.

via http://speckyboy.com/2009/11/20/10-online-tools-and-apps-to-help-optimize-and-format-css/

Related Posts

]]> http://www.webmaster9.com/2010-06/10-online-tools-and-apps-to-help-optimize-and-format-css.html/feed 0 10 Useful and Time-Saving CSS Grid-Layout Generators http://www.webmaster9.com/2010-06/10-useful-and-time-saving-css-grid-layout-generators.html http://www.webmaster9.com/2010-06/10-useful-and-time-saving-css-grid-layout-generators.html#comments Thu, 10 Jun 2010 13:51:31 +0000 Webmaster9 http://www.50jy.com/?p=23 CSS is considered the “back-bone” of a website. It structures, helps embed, and styles elements. Now, if we were to code a CSS layout by hand, it would take us an unneeded amount of time that we could be putting towards other areas of our designs.

With somewhat similar concepts to the all-famous button, background, and favicon generators, today we present you with 10 Useful and Time-Saving CSS Grid-Layout Generators that will save you mass amounts of time and help you eliminate some repetitive coding.

Blueprint Grid CSS Generator

This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png files. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint.

Grid Layout Generator by netProtozo

The Grid Layout Generator by netProtozo is very easy to use. You can use the form to build a grid, then be able to grab the generated CSS to use in building your layout. Also, use a snap shot of the grid in photoshop to help you tighten up your design. By doing so, you’ll find that you’ll be able to pretty much match your design using the CSS provided.

Grid System Generator

The grid system generator will create fixed grid systems in valid CSS/XHMTL form for rapid prototyping, development, and production environments. It also creates a background file that you can use in Frameworks, Illustrator, Photoshop, and more to aid in prototyping and design.

YUI: CSS Grid Builder

Yahoo’s grid builder is one of the easiest to interact with. The side panel to the left lets you edit the width of the grid, create columns, rows, and set fixed sizes. The changes you make take place in HTML format and you can hit the Show Code button and copy/paste it wherever you’d like.

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.

YAML Builder

The YAML Builder is a tool for visually creating YAML-based CSS layouts. It allows for the setting of basic layout characteristics like the number and positioning of the content columns, as well as the dynamic creation of grid-based layouts by dragging and dropping subtemplates. Not quite WYSIWYG, but close!

Grid Designer

You can get started generating grids by Filling in the number of columns, total width, gutters and margin widths, all specified in pixels – then press the design button. You can even use the Typography tab to adjust and calculate basic typographic settings for your design. Finally, on the Export tab, you can generate copy-and-paste ready CSS, and a sample XHTML template.

CSS Layout Generator by CSSPortal

This generator will create a fluid or fixed width column layout, with up to 3 columns and with header, footer and menu. Values can be specified in either pixels or percentages.

Firdamatic

Firdamatic™ is an online tableless layout generator that allows you to create and customise layouts easily only by completing forms, making creating skins for your Firdamatic-based layout a breeze. This tool is available for free for personal/non-commercial use only and comes with no technical support.

CSSCreator.com

This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages. To create your layout select the structural elements your site requires (header, footer, columns). Then specify a size in the field provided and choose a background color from the color chooser below.

via http://www.reencoded.com/2010/03/02/10-useful-and-time-saving-css-grid-layout-generators/

Related Posts

]]> http://www.webmaster9.com/2010-06/10-useful-and-time-saving-css-grid-layout-generators.html/feed 0 14 Best CSS Editors You Should Know http://www.webmaster9.com/2009-10/14-best-css-editors-you-should-know.html http://www.webmaster9.com/2009-10/14-best-css-editors-you-should-know.html#comments Tue, 13 Oct 2009 14:54:16 +0000 Webmaster9 http://www.webmaster9.com/?p=333 Stylizer

Stylizer is a web browser that creates CSS ridiculously fast. Stylizer lets you design CSS layouts in real-time right on a browser, without any loss in control. It’s much faster and more intuitive than using an external editor like Notepad or Dreamweaver.

Xylescope

Xylescope transparently converts pages with markup errors in the source code into well-formed XHTML. Automatic formatting of the source code guarantees clarity and good readability of the document regardless of the original text quality.

Style Master

Style Master is the leading cross platform CSS development tool. Much more than just a text editor, Style Master supports your workflow – including:

  • creating style sheets based on your HTML
  • live CSS editing of PHP, ASP.NET, Ruby and other dynamically generated sites
  • editing CSS via ftp

Rapid CSS Editor

With Rapid CSS Editor you can quickly and easily create and edit cascading style sheets of any size and complexity. You can write the style sheet code manually or let the program do it for you. In each case it is easy because of the many helpful features, including auto complete, code inspector and CSS checker. Results are shown instantly with the built-in preview. Rapid CSS Editor is designed to save you time and make your job easier.

CSS Toolbox

Free CSS Toolbox is a freeware productivity software for web developers who work with CSS code.Free CSS Toolbox includes a number of tools for fast-tracking and enhancing the development of style sheet code, such as an advanced CSS Formatter and CSS Validator.

CoffeeCup StyleSheet Maker

CoffeeCup StyleSheet Maker allows you to construct full-featured cascading style sheets, giving you full control of text placement, fonts, backgrounds, and more. You just have to change the tag definitions in the CSS file, because each Webpage will look to that file for reference in terms of how to set itself up. You’ll also be able to overlap text, create links that aren’t underlined, place image backgrounds in tables, and even create your own tags with the functions you assign them.

EngInSite CSS Editor

EngInSite CSS Editor is a fully integrated Cascading Style Sheets (CSS) development tool, designed to save your time and unleash your creativity.

CSSEdit

With CSSEdit, you see changes to your style sheet applied in real-time. Without saving. Without uploading. Without hassle. For any Web App or HTML file.

Jellyfish-CSS

Jellyfish-CSS is the most powerful stylesheet editor. With all the tools you need to make cool looking stylesheets.

snap{css}

snap{css} is an extremely light-weight, notepad-like application that allows css designers to easily edit their code in a familiar environment while having quick acccess to helpful features such as our beautify and collapse functions.

Simple CSS

Simple CSS allows you to easily create Cascading Style Sheets (CSS) from scratch, and/or modify existing ones, using a familiar point-and-click interface.

TopStyle

  • TopStyle contains powerful tools for building standards-compliant web sites.
  • Preview CSS while you write it.
  • Easily create pleasant color schemes for your site.
  • Style Checker validates your CSS syntax against multiple browsers.
  • Use Site Reports to see at-a-glance where CSS styles are used in your site.
  • Style Upgrade quickly replaces all outdated HTML code with equivalent CSS styling.

tsWebEditor

tsWebEditor is an editor for HTML, PHP, Perl, JavaScript, CSS and many other languages. It displays the source code colored (syntax highlight), code hint for functions, code completion (PHP, JavaScript, ASP, HTML), code browser, PHP debugger and syntax validation, help, CSS wizard, HTML tag editor, HTML syntax validation, and an easy to use SQL Designer.

cssed

cssed is a small developer editor and validator, that tries to ease the CSS editing. It is an Open Source project, it means that you can download the program but also its source.

via

Related Posts

]]> http://www.webmaster9.com/2009-10/14-best-css-editors-you-should-know.html/feed 0 15 Useful Testing Tools for Webmasters http://www.webmaster9.com/2009-08/15-useful-testing-tools-for-webmasters.html http://www.webmaster9.com/2009-08/15-useful-testing-tools-for-webmasters.html#comments Wed, 19 Aug 2009 15:35:57 +0000 Webmaster9 http://www.webmaster9.com/?p=283 1. HTML Validator

This HTML Validator – checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc.

2. CSS Validator

The CSS Validator – validates CSS stylesheets or documents using CSS stylesheets.

3. Links Validator

The Link Checker analyzes anchors (hyperlinks) in a HTML/XHTML document. Useful to find broken links.

4. RSS Feed Validator

This is the W3C Feed Validation Service, a free service that checks the syntax of Atom or RSS feeds

5. Free Site Validator

This service scans your entire site for validation errors and dead links and generates report status in real time.

6. WebAIM Wave

Wave is my favorite Accessibility service – it shows you the mistakes and it is quite productive.

7. Functional Accessibility Evaluator

Use this tool to evaluate the functional accessibility of your web site.

8. Hera

HERA is a tool to check the accessibility of Web pages accoridng to the specification Web Content Accessibility Guidelines(WCAG 1.0).

9. Xenocode

Using Xenocode you can run any browser you want. Yes, even IE6, IE7 and IE8 simultaneous.

10. Browsershots

A great service for testing your site on all browsers on most operating systems.

11. IeTester

This is a tool that incorporates all version of IE in one desktop application.

12. Microsoft Expression SuperPreview

The new tool from Microsoft is designed to help you compare your site on different browsers.

13. Pingdom Tools

Analyzing your website speed and breaking down the way elements are loaded.

14. YSlow

The authority tool in optimizing your website and gaining additional speed.

15. Web Page Analyzer

A simple yet very useful service that generates a report related to your website performance.

via

Related Posts

]]> http://www.webmaster9.com/2009-08/15-useful-testing-tools-for-webmasters.html/feed 0 CleanCSS : CSS Formatter and Optimiser http://www.webmaster9.com/2009-08/cleancss-css-formatter-and-optimiser.html http://www.webmaster9.com/2009-08/cleancss-css-formatter-and-optimiser.html#comments Wed, 19 Aug 2009 15:29:44 +0000 Webmaster9 http://www.webmaster9.com/?p=282 About CleanCSS

CleanCSS is a powerful CSS optimizer and formatter. Basically, it takes your CSS code and makes it cleaner and more concise.

The CSS optimizer was originally developed by some awesome dudes over at CSS Tidy. They built the program and have made it free for everyone to use. I stumbled across their optimizer one day while looking for help with my CSS. I wanted to know the shortest way I could style a background of a web site without having to use all the “background-image” and “background-repeat” tags. I found some other optimizers which I tried, but none worked as well as CSS Tidy. It was actually hosted on some random CD Burning website. Why? I have no idea.

But after I posted about it on my blog, I noticed that a week later, the site no longer existed. I was bummed because I was trying to show my fellow designers at work this amazing utility. So I took the liberty and installed CSS Tidy on my own webserver and registerd cleancss.com. I also styled it up to my liking (see the grass green colors?). So now I can make sure this kick-ass CSS utility stays up forever. And gets used by web designers everywhere.

The CleanCSS URL : www.cleancss.com

Related Posts

]]> http://www.webmaster9.com/2009-08/cleancss-css-formatter-and-optimiser.html/feed 0 Blueprint Grid CSS Generator http://www.webmaster9.com/2009-07/blueprint-grid-css-generator.html http://www.webmaster9.com/2009-07/blueprint-grid-css-generator.html#comments Sat, 18 Jul 2009 06:23:07 +0000 Webmaster9 http://www.webmaster9.com/?p=181 About Blueprint Grid CSS Generator

Blueprint Grid CSS Generator will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png files. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint.

Blueprint Grid CSS Generator Usage:

1. Enter your desired number of columns.
2. Your column width.
3. Enter the width of your margin.
4. Enter the desired page width.
5. Click ‘Generate CSS’ button and copy the results from the Generated Code section.

The Blueprint Grid CSS Generator URL :http://kematzy.com/blueprint-generator/

Related Posts

]]> http://www.webmaster9.com/2009-07/blueprint-grid-css-generator.html/feed 0 Grid Designer 2 : featured in Creative Review magazine http://www.webmaster9.com/2009-07/grid-designer-2-featured-in-creative-review-magazine.html http://www.webmaster9.com/2009-07/grid-designer-2-featured-in-creative-review-magazine.html#comments Sat, 18 Jul 2009 06:19:06 +0000 Webmaster9 http://www.webmaster9.com/?p=180 About Grid Designer 2

If you’re familiar with the grid, a bit of design and basic typography, using this script should be pretty easy – most of the functions are pretty self-explanatory.

If you’re unfamiliar with grids in general, you could start by reading an excellent series of articles by web designer Mark Boulton.

Design a Grid

On the Columns tab, you can start your design in two ways:

1. Fill in the number of columns, total width, gutters and margin widths, all specified in pixels – then press the design button.
2. Recalculate the settings in various ways by clicking the row of buttons located next to each setting.

The grid preview on the Columns tab will display the widths of each area, in pixels. Below it, the widths of spanning columns is displayed. Click the → arrows ← in the grid, to span/unspan multiple columns in your layout.

Typography

Use the Typography tab to adjust and calculate basic typographic settings for your design. The line height (in pixels) is also your vertical grid size – the line heights of your typography are specified in number of lines. The align setting can be used to tweak the vertical alignment of the text – adjusting this to align the baselines of your typefaces is a good idea.

Leading specifies the number of lines of space beneath a paragraph of text – sometimes you need an extra line of leading to properly align your headlines, so that they don’t overlap with the following paragraph. The rest should be pretty straight forward and self explanatory.

Export

Finally, on the Export tab, you can generate copy-and-paste ready CSS, and a sample XHTML template.

Use the scalable grid option, if you want a grid that can resize horizontally – all of the pixel widths will be recalculated and specified in percentages.

The CSS Reset option generates CSS to reset all standard typographic settings, margins, padding, alignment, table spacing, etc. – this is highly recommended, as browsers have different default settings, which may interfere with your typography. If you disable this option, your typography may not come out exactly the way you designed it.

Note that you can bookmark your design – the URL in your browser is updated dynamically, and contains all your grid and typography settings, making it easy to copy, save and share your designs.

Related Posts

]]> http://www.webmaster9.com/2009-07/grid-designer-2-featured-in-creative-review-magazine.html/feed 0 The 1KB CSS Grid : A simple, lightweight approach http://www.webmaster9.com/2009-07/the-1kb-css-grid-a-simple-lightweight-approach.html http://www.webmaster9.com/2009-07/the-1kb-css-grid-a-simple-lightweight-approach.html#comments Sat, 18 Jul 2009 05:06:30 +0000 Webmaster9 http://www.webmaster9.com/?p=178 About The 1KB CSS Grid

Other CSS frameworks try to do everything—grid system, style reset, basic typography, form styles. But complex systems are, well, complex. Looking for a simple, lightweight approach that doesn’t require a PhD? Meet The 1KB CSS Grid.

This is a fresh take on the CSS grid. It can be used to streamline page templates for content management systems, its mission is to be lightweight.

Using the The 1KB CSS Grid for Templating?

When server-side options for templating and sub-templating are limited, the grid can be used as an alternative page templating engine. The 1KB CSS Grid’s convenient row and column syntax provide all the necessary scaffolding.

The The 1KB CSS Grid Details

Though simple, The 1KB CSS Grid packs the punch of a heavyweight. Nested rows? Piece of cake! A fluid grid rather than a fixed one? No problem! Explores some of the finer details of implementing the grid.

The 1KB CSS Grid URL: http://1kbgrid.com/

Related Posts

]]> http://www.webmaster9.com/2009-07/the-1kb-css-grid-a-simple-lightweight-approach.html/feed 0