BlogmyQuery – BMQ

These are great times for front-end developers. After months of exaggerated excitement about HTML5 and CSS3, the web design community now starts coming up with CSS techniques that actually put newly available technologies to practical use instead of abusing them for pure aesthetic purposes. We see fewer “pure CSS images” and more advanced, clever CSS techniques that can actually improve the Web browsing experience of users. And that’s a good thing!

In this post we present recently released CSS techniques, tutorials and tools for you to use and enhance your workflow, thus improving your skills. Please don’t hesitate to comment on this post and let us know how exactly you are using them in your workflow. However, please avoid link dropping, but share your insights and your experience instead. Also, notice that some techniques are not only CSS-based, but use JavaScript, or JavaScript-libraries as well.

[Offtopic: by the way, did you already get your copy of the Smashing Book?]

CSS Techniques

Now Playing: transitions and animations with CSS
Tim Van Damme showcases a fairly simple CSS design that uses transitions, animations and subtle hover-effects to produce an engaging user experience. Also, notice the use of favicons as background-images for attribute selectors. Unfortunately, the demo works best in Webkit-browsers, but it degrades gracefully in other modern browsers. Unfortunately, we didn’t find the documentation of the technique.

CSS3 range slider, checkbox + radio button
A demo of HTML input elements made with CSS3. They include realistic range sliders, checkboxes and radio buttons. The designer used minimal markup, no JavaScript and no images. Downside: there is a ton of messy CSS3 code, and Safari renders the page best. Chrome is close, but the 3D perspective doesn’t quite work.

CSS3 Media Queries
CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices. It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content. Continue on this post to read the tutorial and see some websites that make good use of media queries.

Proportional leading with CSS3 Media Queries
A fluid layout should be responsive to the width of the columns of text. This problem, of proportional leading, is what holds many designers back from adopting fluid layouts. In this article, Andy Clarke explains how you can achieve proportional leading for your typography using CSS3 Media Queries.

Responsive Web Design
This article by Ethan Marcotte explains how to use fluid grids, flexible images, and media queries to create elegant user experiences with responsive web design. Check out the demo — of course, don’t forget to resize the browser window.

Popout Details on Hover with CSS
This tutorial describes a technique that presents details of a content item on hover. The solution is quite simple and uses position: relative and z-index to achieve the effect.

CSS3 Border-Radius and Rounded Avatars
Trent Walton came up with a clever technique to create rounded images (in this case, rounded avatars) with the border-radius property. The solution is simple: create a frame class for your image, and give it a border. Then, round both the frame and image with the border-radius property, and you’re done: a simple technique with no additional images or scripts — just an extra line of code. You may want to check Tim Van Damme’s similar CSS technique, too.

CSS3 Rounded Image With jQuery
“The other day I was trying to style CSS3 border-radius to image element and I realized that Firefox doesn’t display border-radius on images. Then I figured a way to work around it — wrap a span tag around with the original image as a background-image.”

The Simpler CSS Grid
Why restrict your layout so that it can fit into this 960gs? A grid is supposed to help you in design, not to limit your creativity. The 978 grid is not just about increasing the page width, but to loosen the gutter space, so users can read it more comfortably.

Correcting Orphans with CSS Overflow
When typesetting, designers try to avoid leaving just one or a few words hanging on a line at the end of a paragraph. Doing so is considered poor typography because it leaves too much white space between paragraphs and interrupts the reader’s eye movement (see the example below). A simple typographic solution is to rework the line by adding indented paragraph endings. But the problem is particularly annoying when aligning a paragraph next to an image that exceeds the paragraph’s height. Soh Tanaka has come up with a simple and quick solution to this problem with CSS.

Apple-like Retina Effect With jQuery
This tutorial explain how you can recreate the effect displayed on the image below, using jQuery and CSS.

How to create a kick-ass CSS3 progress bar
New features introduced in CSS3 allows developers to create stunning visual effects: this post exaplains how you can create a fancy progress bar using CSS3 and jQuery, without Flash or images.

CSS pseudo-element Solar System using semantic HTML
This is a complete reworking of another author’s basic reproduction of the classic model of our solar system using CSS. By using pseudo-elements (again) I wanted to reproduce as much as possible without presentational HTML and JavaScript. In addition, by hooking into HTML microdata I’ve put together a rough scale model of the solar system that demonstrates some further uses of CSS generated content.

Advanced Columns using the :nth-child(N)
Imagine this task: you have to display product listings as columns laid out in a zig zag pattern. The first instinct is to split each section into its own list, but if the site is running on a CMS, all products had to be spit out in one giant list. Given this scenario, you can use pseudo-selectors :nth-child(N) and a bit of jQuery to help with IE support.

Lost World’s Fairs
Trent Walton explains the workflow and design techniques used to create the Lost World’s Fairs website to celebrate the launch of Internet Explorer 9. The result is truly remarkable.

New Twitter Design with CSS and JQuery.
This post explains the techniques used by Twitter’s new web interface and re-creates its interactivity using CSS and jQuery.

Europe, CSS & jQuery clickable map
CSS converts a simple list of countries into the fully clickable map. Works with disabled style sheets and JavaScript, as well as on mobile devices. A simple code does not require Flash Player or other plug-ins!

Simple Tooltip w/ jQuery & CSS
There are a lot of tooltip plugins out there, but not many of them explain what exactly goes on in the logic of a tooltip. I would like to share how I’ve created mine today, and am also open to any critiques and suggestions for those jQuery ninjas out there. Lets take a look.

Super Cool CSS Flip Effect with Webkit Animation
Webkit support some fancy transform and animation effects that can really spice up the web experiences for users with Safari or Chrome browsers. Here’s a quick look at how the rotateY property can produce a flip effect, and how it can be used to create a Transformers themed top trumps design.

CSS3 Border Images for Beautiful, Flexible Boxes
The CSS3 buzz is in full swing, and many of CSS3′s most useful properties are receiving a fair bit of attention. Properties like border-radius, text-shadow, custom gradients, and even CSS3 transitions have been shown to be quite practical, resolving real-world design issues with minimal markup and maintainable code.

Animated wicked CSS3 3D bar chart
Create a beautiful 3D bar chart. But instead of creating a “stacked” one, several bars are placed under each other. When hovering, the animation shows and the bar grows to the appropriate size.

CSS Border Tricks
Since I released my new redesigned blog, a lot of people have asked me how I styled the pressed effect on my category navigation. I would like to share some simple border style tricks to get various effects for your next project.

The Background Trick With CSS
This page provides links to a couple of examples for the trick used on Design Made In Germany 5 where a couple of layers are used and the middle layer has a fixed background, while other layers have absolute positioning. The visual effect is unique and interesting. Unfortunately, the explanations are in German, but the demos are self-explanatory.

Footnotes With CSS
in their simplest implementation — using sup tags and linking within the page — footnotes aren’t very user-friendly. They interrupt the experience, requiring the user to click the link, read the information and then return to the page with the browser’s “Back” button.” Lukas Mathis has come up with an elegant solution to improve this user experience: his jQuery script shows the content of footnotes as soon as the user indicates that they are interested in it — i.e. when they move the cursor over the footnote symbol.

Why and how to create Microsoft Office Minibar with jQuery and CSS3
Although many will argue that Microsoft products are an example of a good design, Minibar was one of design refreshments that came out with the Office 2007. It is a variation of a toolbar that exposes context-related functionality. In case of MS Word, context is a text selection. Since Minibar always pops up near the mouse pointer it enables users to quickly perform actions related to a selection.

CSS image replacement with pseudo-elements (NIR)
An accessible image replacement method using pseudo-elements and generated-content. This method works with images and/or CSS off; works with semi-transparent images; doesn’t hide text from screen-readers or search engines; and provides fallback for IE6 and IE7.

Diagonal CSS Sprites – Aaron Barker
So you’ve got your sprite created, and it’s working great. 30+ icons in one image, and major HTTP connections saved. You have made your little corner of the interwebs a little happier and faster. Steve Souders would be proud.

Sneak — Fixing the background ‘bleed’
I recently came up with an issue in Safari where the background colour of an element seemed to “bleed’ through the edge of the corners when applying both borders and a border-radius (see the image above). I then found a solution, and it came in the form of the -webkit-background-clip property.

Zebra-striping rows and columns
Zebra-striping tables is certainly not a new thing; it has been done and discussed for years. They (allegedly) aid usability in reading tabular data by offering the user a coloured means of separating and differentiating rows from one another. We can create zebra-stripes using the nth-of-type selector — but we can apply it not only to rows but also columns.

Feature Table Design
“I ran into the feature table design and I was inspired to try and replicate it. First in Photoshop, then in HTML/CSS. Recreating cool stuff you find on the web is definitely an excise I recommend (a few days after, I read this – couldn’t agree more). As these exercises typically do, it lead me down some interesting paths.”

ShineTime – A jQuery & CSS3 Gallery With Animated Shine Effects
This article shows how you can create an animated Shine Effect with jQuery & CSS3 and then use it to create your very own Shiny Gallery ‘ShineTime’. This effect is useful in making your user interface elements look like they’re a real polaroid photo (or made of glass) and the best part is, it’s not that difficult to achieve.

The Mac-style Skype Application Menu with CSS3 and jQuery
This tutorial re-creates the Skype application menu in the web browser. The final design mimics not the full layout — only the menu where all your friends are listed. For the nifty layout CSS3 is used and jQuery is used for the extra functionality.

Further Interesting Techniques

Object-oriented CSS
All the resources you need to get started are linked from the left navigation. Start by downloading the base files. Exercises one and two can be completed in Firebug if you are comfortable with it. Then you can download the finished file at the beginning of Exercise 3.

clearfix Reloaded +
clearfix and overflow:hidden may be the two most popular techniques to clear floats without structural markup. This short article is about enhancing the first method and shedding some light on the real meaning of the second.

CSS3 text-shadow and box-shadow trick
All browsers that support the CSS text-shadow and box-shadow properties also support the new CSS3 RGBa syntax. Which means you can safely combine them today. That’s handy, because it means no worrying about matching a precise hex colour shadow to a specific hex colour background. Instead just let the browser blend.

Data theft with CSS
Mozilla has released security updates to Firefox 3.5 and 3.6 that include defenses for an old, little-known, but serious security hole: cross-site data theft using CSS. These defenses have a small but significant chance of breaking websites that rely on “quirks mode”Â� rendering and use a server in another DNS domain (e.g. a CDN) for their style sheets.

Show Markup in CSS Comments
“Let’s say you are creating a CSS file for a modular bit of a webpage. Perhaps you are the type that separates your CSS files into bits like header.css, sidebar.css, footer.css, etc. I just ran across an idea I thought was rather clever where you include the basic markup you will be styling as a comment at the top of your CSS file.”

How to Micro-Optimize Your CSS
Minification shrinks file size significantly, by as much as 30% or more (depending on input code). This size-reduction is the net result of numerous micro-optimization techniques applied to your stylesheet. By learning these techniques and integrating them into your coding practice, you’ll create better-optimized CSS during the development process. Sharper skills, cleaner code, faster downloads — it’s a “win-win”Â� for everyone.

Transparent Borders with background-clip
Have you ever seen an element on a page with transparent borders? I think Facebook originally popularized it giving birth to lightbox plugins like Facebox. I don’t think Facebook sports the look anymore, but it’s still rather neat.

Showing and hiding content with CSS 3
One very common feature is the expanding/collapsing or shown/hidden box, whether this is a tabbed interface, a content “tray” on the side that can be slid out and then put away again, or a complex tree menu with expanding/collapsing sub-menus. Generally, these features are implemented via JavaScript, however using CSS3 it is possible to create such content using only HTML and CSS — no JavaScript required.

CSS for Blockin’ Stuff
If you want to use user stylesheets, ad blockers, flash blockers, or whatever else, more power to you. Here are some CSS projects intended for blockin’ stuff.

CSS Tools and Services

ProCSSor: Advanced CSS Prettifier
This online tool allows you to submit your CSS (either copy and paste the code, upload the file or point to a URL) and choose your formatting options. You can save options and reuse them every time you run code through ProCSSor. You can separate properties and selectors across multiple lines, indent up to four levels with either the space bar or tab key and even sort properties. The tool also has a “Columnize” mode, which groups elements into columns, making for a more elegant style sheet; you need to deactivate “Fail-safe mode” to use it.

Selectivizr – CSS3 selectors for IE 6-8
selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest. Selectivizr adds support for 19 CSS3 pseudo-classes, 2 pseudo-elements and every attribute selector to older versions of IE. It can also fix a few of the browsers native selector implementations.

CSS Desk
CSSDesk is an online HTML/CSS sandbox. The tool allows you too experiment with CSS online, see the results live, and share your code with others. You may want to check Rendera , too.

The Square Grid
A quite simple CSS framework that is based on 35 equal-width columns. It aims to cut down on development time and help you create well-structured websites. The total width of the grid is 994 pixels – which the majority of modern monitors support. You can use the grid in a variety of columns: 18, 12, 9, 6, 4, 3 and 2. The pack contains sketch sheets for printing (PDF), design layout templates for Photoshop, InDesign and Illustrator and source code files with explanations.

Instant Blueprint
Instant Blueprint allows you to quickly create a web project framework with valid HTML/XHTML and CSS in only a matter of seconds, allowing you to get your project up and running faster. You may want to check Project Deploy, too.

HTML5 Boilerplate
HTML5 Boilerplate is the professional base HTML/CSS/JS template for a fast, robust and future-proof site. You get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain ajax and flash. A starter apache .htaccess config file hooks you the eff up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on. You may want to check HTML5 Reset, too.

HTML5 Starter Pack
A a very basic HTML5 starter pack with a clean and ordered directory structure that will fit for most projects. The pack contains the most common files (HTML, CSS, JavaScript), as well as a basic Photoshop web design template, again with a group’s structure that would fit for most projects.

PrimerCSS
Primer undercoats your CSS by pulling out all of your classes and id’s and placing them into a starter stylesheet. Paste your HTML in to get started.

Hardboiled CSS3 Media Queries
These hardboiled CSS3 Media Queries are empty placeholders for targeting the devices and attributes that you may be interested in making responsive designs for. The stylesheet covers smartphones in portrait and landscape modes, iPads, iPhone and large screens.

Grid Generator
This tool allows you treate your own custom CSS grids. You can select base unit, number of columns, column width, gutter width and margins and download PNG as well as a CSS source code.

Baseline framework
Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser’s default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system.

Gridulator
Gridulator is a quick and easy grid calculator for web designers and developers. You can choose the overall width and number of columns, select the column width and gutter width and download the PNG of the grid.

Dust-Me Selectors
Dust-Me Selectors is a Firefox extension (for v1.5 or later) that finds unused CSS selectors. It extracts all the selectors from all the stylesheets on the page you’re viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they’re encountered.

zen-coding – Project Hosting on Google Code
Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions — similar to CSS selectors — into HTML code.

Turbine
Turbine is a collection of PHP-powered tools that are designed to decrease CSS development time. It includes packing, gzipping and automatic minification of multiple style files, “CSS variables”, selector aliases as well as nested css selectors and OOP-like inheritance, extensions and templating features.

CSS Usage
CSS Coverage is an extension for Firebug which allows you to scan multiple pages of your site to see which CSS rules are actually used in your site.

CSS Reloader
CSS Reloader is a browser extension for Mozilla Firefox and Google Chrome, that allows you to reload all the CSS of any site without you have to reload the page itself. The goal for this browser extension is to enable developers to become more productive.

CSS Frame Generator
This tool returns corresponding CSS in a line-by-line way indented with spaces to reflect XHTML structure — each selector and all of its properties and values in one line. This may be a bit strange for you at the beginning, but if you get used to it you’ll find it much better. It’s essential to use a predefined properties order, such as this one:

Switch CSS
Switch is a full featured, production ready CSS preprocessor. It runs under Apache with mod_python, or as an environment-agnostic command line tool.

CSS Tools: Diagnostic CSS
Validation is great, but it won’t catch everything. For example, if you have a link where you forgot to add a URL value to the href attribute, the validator won’t complain. The syntax is valid, even if it’s a broken experience. Similarly, the validator will be happy to let through empty class and id values.

IE Print Protector – ieCSS
IE Print Protector is a piece of javascript that allows you to print HTML5 pages in Internet Explorer. IE Print Protector helps IE render HTML5 elements correctly, both on screen and in print.

CSS reset, CSS framework, Toucan CSS reset
It is a reset stylesheet. Unlike Meyer’s or YUI’s, it not only removes the default styling of HTML elements, but also rebuilds the new generic rules for the typography, headings, paragraphs, lists, forms, tables etc. It’s light-weight, flexible and browser-friendly.

PHP CSS Browser Selector
CSS Browser Selector is a very small javascript with just one line php function which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.

CSS3Machine for iPad
CSS3Machine makes the most advanced CSS3 styles simple. Easily create stunning gradients, drop-shadows, and 3D transforms. CSS3Machine also builds, edits, and exports WebKit animations.

minify
Minify is a PHP5 app that helps you follow several of Yahoo!’s Rules for High Performance Web Sites. It combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers.

Modernizr
Modernizr adds classes to the element which allow you to target specific browser functionality in your stylesheet. You don’t actually need to write any Javascript to use it.

Spritebaker: Easy Base64 encoding for designers
This free tool parses your CSS and returns a copy with all external media “baked”Â� right into it as Base64 encoded datasets. The number of time consuming http-requests on your website is decreased significantly, resulting in a massive speed-boost (server-side gzip-compression must be enabled).

My DebugBar
IETester is a free application that allows you to have the rendering and JavaScript engines of IE9 preview, IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE at the same time.

Less Framework 2
This framework is a CSS framework for cross-device layouts. The framework has a minimal set of features, and does away with things like predefined classes. All it really contains are a set of media-queries, typography presets aligned to a 24 px baseline grid and a grid, with its column sizes noted down within CSS comments. You can select what features you want to have in your framework files, and the tool will provide you with a zipped archive right away. Note that this framework isn’t related with LESS CSS, another framework that extends CSS with variables, mixins, operations and nested rules.

Last Click

Never Mind the Bullets
HTML5 is coming to modern browsers, and developers are already pushing its limits. To this end, Microsoft has created an online comic to show off HTML5/CSS3’s features (SVG background, JavaScript acceleration, etc.) as they function on IE9. It’s a fully interactive experience, complete with animations and other features that were until now possibly only with JavaScript or Flash.

The comic is a Western in a fairly traditional comic-book style, but with a lot of extras. It’s viewable in other browsers, but not as fully as with all of the features built into IE9. There’s also a feature that lets you create your own comic strip using the same characters. We never thought we’d say these words, but the website is actually best viewed in Internet Explorer 9.

Have something useful? Get in touch with us!

Our job is to promote good, high-quality content and resources. If you wrote or developed something useful, contact us — we will do our best to spread the word and help you out.

© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS

By Robert Bowen

Today we are here to help with the whole getting to know Adobe Fireworks a bit, as we dive deep into the internet to find the most useful sites, resources, tutorials and more to expand your Fireworks knowledge base and skillsets, and we deliver them all right into your readers.

Below is an assortment of various links that will help you assemble the ultimate Fireworks toolbox, so you can get the most out of this under used member of the Adobe Creative Suite family of design tools. So if you are a Fireworks enthusiast, or looking to become one, take a peek through the gathered resources below so that when you dive in to the works, you can dive in with style and preparedness.

General Websites

So the first section of our resource gathering finds us with a broad view opened up across the vast network of cyberspace to find you some dedicated sites based around this useful, oft overlooked, graphical and wireframing application. Below are a handful of places that anyone looking to beef up their FW toolbox should be heading first and foremost. Naturally our view will narrow in the sections ahead, but for now, these websites have loads of resources and tutorials for you to expand both your skill and your toolsets.

Adobe Fireworks Team is the FW focused blog from the folks over at Adobe. If you are looking for Fireworks info and insights, then what better place to start than at the source itself. This blog is loaded with all sorts of related tips and talk to help you get more out of the application than you first thought.

Sarthak is part of the Fireworks Engineering team, whose blog is part of the useful network of Adobe member blogs that we thought stood out enough to also be featured in our round-up. For insights, advice and troubleshooting tips aplenty, this is a fantastic blog to turn to.

Adobe’s Fireworks Exchange is another Adobe run FW focused site that is a virtual hub of downloadable resources. If it is tools to tighten up your overall Fireworks experience that you are looking for, then you should certainly set your browser to this location and fill your arsenal from the plethora of readily available content.

Fireworks Developer Center is another dedicated site straight from the proverbial horse’s mouth. Adobe has put together not only a Fireworks focused site in this instance, but one that is geared specifically towards the developers that are out there using FW in their projects.

Adobe’s Fireworks Forums are the final site that we are going to feature from the Adobe crew, and your last chance to rope in some help from the source. With users from all corners of the world and from various business markets coming together to share their expertise and experiences to help one another out this can be an invaluable resource to have at your disposal.

FireworksGuru Forums is another helpful FW focused set of forums for finding your way through the proverbial ins and outs of the application. Users once more pouring in from around the web to offer advice and share experiences to one another can always prove beneficial when learning a program, or strengthening up their existing FW skills.

Fireworks Zone is an extensive resource hub for all things related to this dynamic app. If you decide to only check out one website for building up your Fireworks arsenal, then this should be the one on your list. With useful downloadable content galore, and to borrow another popular slogan, you need to get into the Zone.

Entheos Web is another fantastic stop on our website collection packed with useful Fireworks resources. With an entire section dedicated to FW tutorials, downloads, and insightful articles, this hub has an impressive amount of content to assist you in your toolbox construction.

Community MX is a site that also has an array of helpful posts and content for anyone interested in stocking up on Fireworks related goodies. Another stop with handfuls of material to sort through as you go through this list that you might not want to pass up.

Heathrowe.com is another website that has a dedicated section on Fireworks. Here you can browse through their gathered FW tips and tutorials to sharpen your skills for any future endeavors that you take on with Fireworks at your side. Definitely one to keep bookmarked as you work through their offerings.

Matt Stow Presents Firewoiks is an Adobe Fireworks design oriented blog by none other than web designer, Matt Stow. This is another must visit site for any one, from Fireworks enthusiast to expert. There are so many invaluable contributions that the site has a little something for everyone to take away from for building up your arsenal.

BLUE2X Designs is another Fireworks focused website with loads of helpful content and shared insight from a designer who has been using this versatile design tool for years. By providing sample files and other various resources, not to mention tutorials, the site puts you in a position to dive right in to Fireworks and get started.

Caught In The Fire is another helpful site of tutorials to help you get your Fireworks skills leveled up, and even though it appears that they are no longer updating, there are still a number of useful tutorials there for you to work through.

Strictly Tutorials

Our next section starts that refined focus we discussed, as we close in on some wonderfully helpful tutorials dedicated to this dynamic program. Fireworks can be an awesome arsenal addition if it is used properly and to its fullest potential, however, some designers just are not as familiar with this tool as they should be. Never fear, the tutorials are here! From the basics and beyond, these gathered tuts should be able to improve your FW sessions and help you to get as much out of the app as you can.

Creating Web 2.0 elements is a must have tutorial to help your Fireworks designs stay ahead of the game as the web transforms and Web 2.0 takes hold. The web is going to continue to grow and clients are going to want their designs to shine among the new web. This tutorial can help take your Fireworks created design effects to the next level.

Adobe Fireworks Tutorials is a series of tutorials for advanced techniques so that you can easily learn how to better wield this design weapon of choice. This is not a place to start, but more a place to end up after you have a pretty solid grasp on the app, but make no mistake about it these are tutorials that you are going to want to check out.

Sixthings Rapid-Fire Tutorials is another Fireworks fixed series of detailed tutorials aimed at more intermediate and advanced users. This series really opens up the program, showing the versatility and full power of this dynamic design tool, while filling each tutorial with tips and tricks to give you the most from each session.

Firetuts is a fantastic place to turn when you are looking for to get your tut on. With a plethora of Adobe Fireworks tutorials geared towards all aspects of the program, this should certainly be added to your virtual toolbox if you are looking to get a firm grip on all of that this app has to offer.

Adobekurs is a great hub to keep on your radar if you are looking for Fireworks based tutorials. And given that you are browsing this section of the post, we can tell that you are. Get the best FW video tutorials the web has to offer. If you haven’t checked them out, make it a priority.

TutCity is another place on the Fireworks map that you should make it a point to stop by. Keen on showing the power of Adobe Fireworks as a design and graphics editor, the City is full of useful tutorials that every FW user should have in ready in their arsenal. Stop by today to get your comprehensive Fireworks learning experience started.

Vodix is yet another bookmark bound tutorial haven for anyone looking to really step up and take command of this dynamic design tool. With handfuls of useful tuts to keep you strengthening your skillsets, this site is worth surfing by.

Layers Fireworks Tutorials is a place that you probably have already headed to in your Fireworks searches, but just in case you hadn’t, we thought we would bring them to your attention. Given that Layers Magazine is considered the #1 authority on everything Adobe, how could we not include their FW tuts on the list?

Abduzeedo’s Fireworks Tag is another natural place to turn when you are looking for some truly top notch tutorials for expanding your FW skills. Known for delivering design excellence, we would not expect anything less when the Abdu-crew takes on delivering tuts to all the Fireworks junkies on the web.

30+ Tutorials that will Teach you Fireworks is part of the Abode tut series from the Arbenting duo. This list of bi-annually updated fireworks tutorials is designed to help teach you the program and is divided into beginner, intermediate, and advanced categories to easily progress you through the program.

Creating Smooth Edges in Adobe Fireworks is a screencast from Rogie King where he explains his technique for creating smooth edges that eliminate border doubling for your FW creations. This technique works wonderfully when you are employing multiple layers to achieve the desired lighting effects. So if you have not seen this tutorial, then you should put it at the top of your list.

All Vector Buttons in Fireworks CS5 is an interesting tutorial that offers an easier approach to complex button making in Adobe’s latest FW release. This approach came from the desire to craft a detailed button with nothing but two vector objects: a button and a text label. Follow the link to find out how they got it done.

Fireworks CS5 Tutorial is a tutorial for web designers looking to find their proverbial groove in this design programs arena. Here they have created a handy Fireworks CS5 tut that will teach you how to create a basic website layout and slice the images you are using in your web page to get them ready for use.

Export CSS and HTML Using Adobe Fireworks CS4 is another tutorial that we could not pass up when compiling this toolbox building post. This easy to follow instructional contribution from Colorburned teaches the user how to convert a finished fireworks web layout into a fully functioning html page that includes CSS.

How to create 3-D perspective boxes in Adobe Fireworks pretty much tells you all you need to know about this useful tutorial just in the title alone. With easy to follow steps, this tutorial walks you through one of the basic processes of Fireworks. Complete with a little added animation to boot. Not a bad place to start for beginners just getting going in FW.

The Abduzeetles Rockband Website in Fireworks is one of the FW tutorials that we felt we should highlight from all of the tuts tagged on Abduzeedo. Just in case, we did not want this awesome instructional resource slipping through the cracks, so we pulled it from their collection and put in here at the bottom of the listed tutorial musts so you would not miss out. This is a step by step website design tutorial that teaches lots of interesting fireworks effects.

Templates

In this next section of the toolbox builder we come to another refined search for Fireworks goodies, the templates. As most designers are more than familiar with, templates can be a mega time-saver, especially in the very beginnings of a new project. Not to mention the headaches they can spare you as they kick start your project off into the right direction, whilst easily helping you to avoid the sometimes monotonous or lengthy setup process. Good templates can get you going almost immediately, so take a look through the ones we have gathered below.

Mana Media is first up in our template section of the post as it compiles a large collection of free layered Fireworks CS3 files for anyone who is looking to get a jump start on their next FW based design project. This is a great resource to turn to when you start building up your toolbox.

Fireworks toolkit for creating iPhone UI mockups is another fantastic template gathering stop to make as you beef up your arsenal. After finding a lack of decent available iPhone templates for Fireworks on the web, the creator of these helpful mockups sought to solve this issue. Job well done.

Dragnet website wireframes kit v0.9 for Adobe Fireworks should also be in your bookmarks if you want a kick-start your FW designs with some handy templates. This useful kit contains a variety of common web design elements such as scrollbars, buttons, menus, alerts, and more.

Craig Erskine’s Blog is a fabulous place to turn to load up on template files for all of your Firework’s needs. In fact, it is a place that might just land you on template overload as new editable templates are added to the site weekly for free download. So if it is templates that you are looking for, then you might need to look no further than this blog.

Fireworks Web Templates also delivers when it comes to looking for templates to kick-start your design projects and get you right into the mix. The site focuses on layered source files, .png formats, only. These are not templates that include any slices or htmls, but don’t let that deter you from visiting this useful resource.

Fireworks 975PX Grid Systems is a handy template file to have in your personal arsenal for sure. This Adobe Fireworks file contains a grid system for a page that is 975px wide and that has been divided into 12 columns or 6 columns and rows. The template also includes a 16px baseline grid.

Fireworks template for Android is another template born out of necessity, when the designer searched the web for an existing file and could not find one. Handhelds are popular and if you are cracking into the Android interface design using Fireworks then you might want to get this template added to your toolbox today.

Social Media Icon Pack is a fantastic template that stood out from the BLUE2X blog so much so that we felt we should highlight it lest it slip under your radar. In total, this pack contains 28 icons focusing on the handful of standard ones that you see included on people’s sites, with seven varieties of styles and sizes for you to choose to build from.

Extensions & Styles

As we press on, moving through our toolbox building post, we arrive at a bit of a hodgepodge of a section, where our focus widens a bit to take in a variety of Fireworks offerings. In this section we focus on extensions and styles, oh my! And we have a few selections pooled together to assist in your arsenal construction. Below are the added extras that we could not let you escape out of the post without sampling. Enjoy.

Senocular Fireworks Extensions is one of the places that any FW enthusiast should turn when they are looking to expand on this versatile design program. With a wide range of useful extensions ready to plugin and open things up for you, this is certainly one of the must visit additions to the list.

Abeall Fireworks Extensions is another wonderful outlet to opt for when you are wanting to extend the usefulness of this design tool. Every extension that is developed and offered on the site is done so completely free of charge no matter if you are using them for personal or commercial projects.

John Dunning Fireworks Extensions is another must visit site to head for when extensions are your proverbial order of the day. Mostly what you will find here are Adobe Fireworks extensions geared more towards productivity enhancements, which most of us can admit freely that we need. When it is all about getting a more efficient experience this is where you want to go. Once again, they are all free downloads.

FWKit Fireworks Extensions is the last place for helpful program plugins that we are going to feature in this toolbox building post, but that certainly should not make you think any less of it. There are plenty of helpful app enhancements for you to expand on this design tool waiting for you at the other end of the link.

Sketchy Brush / Styles for Adobe Fireworks is a set of styles that can add a sense of personality to some of your FW objects. The crafter of these styles made them in response to the community critique about the lack of decent brushes in Adobe Fireworks. These styles were the end result.

Dynamic Bokeh styles for Adobe Fireworks is another set of styles that will liven up your objects in FW. Bokeh is a popular effect these days in web design, and you can bring that home to your Fireworks creations with this handy addition to your design arsenal.

3 Free Adobe Fireworks Style is the last resource to come at you from this end of the toolbox building post. If it is styles that you are needing for your FW workings, then head over and see if these three style selections might be just the thing you are looking for.

Further Reading

Here are a couple of articles from around the web that are specific to Fireworks, and that can aide you in deciding if Fireworks is in fact the design program for you. Or if you have already made that decision, then these informative posts can act as a re-enforcer for your decision to design for the web the Fireworks way!

7 Reasons Why I Choose Fireworks Over Photoshop is a thoughtful comparison of these two design tools to over at Web Designer Depot that might just lure you away from Photoshop, if you haven’t been yet.

The Features That Make Fireworks the Application of Choice for Web Designers breaks down the program to show the benefits that web designers get out of this versatile tool, and why it is gaining more and more of a following in the community.

Related Posts

• Adobe Fireworks: Is It Worth Switching to CS5 is another helpful post from Smashing that looks at the latest version of the app, and the improvements this version has brought with it.
• Tutorials and Resources for Adobe Fireworks is another collection of helpful Fireworks focused content from the archives.

It has been a while since we last compiled a good and inspiring collection of professional photography, making this round-up well and truly overdue. We have selected a varied batch of inspirational photography articles featuring high speed images, macro shots, documentary photographs, underwater snaps and much more.

Autumn Colours in Photography

Autumn Colours in Photography →

Brilliant Bokeh Photography

Brilliant Bokeh Photography →

35 Jaw-Dropping Examples of High Speed Photography

35 Jaw-Dropping Examples of High Speed Photography →

75 Beautiful Examples Of Documentary Photography

75 Beautiful Examples Of Documentary Photography →

Mindblowing Macro Photography

Mindblowing Macro Photography →

Collection of Expressive Photography

Collection of Expressive Photography →

Unbelievable Underwater Photography

Unbelievable Underwater Photography →

By Paul Andrew (Speckyboyand speckyboy@twitter).

Almost five years ago I posted an article titled Google, SEO and using CSS to hide text. In the article I brought up the possibility of getting in trouble with Google and other search engines for using CSS to hide text for accessibility reasons.

Both at the time and several years later the general reasoning among developers (at least as far as I am aware) has been that as long as your intent is not to fool the search engines you should be fine. But is that still the case?

Read full post

Posted in Accessibility, Search Engine Optimisation.

By Cameron Chapman

Generators can be a great way to save time in your web design projects. High-quality generators can create graphics or code or even layouts in a matter of seconds or minutes, things that might take an hour or more if done by hand. Below are some useful generators to help you speed up your web design process. There’s everything from color scheme tools to complete layout generators included. If you know of other useful generators out there, please share in the comments!

Color Schemes

A good color scheme is the cornerstone of a good website design. Coming up with unique and appropriate color schemes isn’t always easy. That’s where these color scheme generators come in handy.

Color Scheme Designer 3
Color Scheme Designer 3 has a really fantastic user interface that’s both attractive and easy to use. Just select a color, the type of color scheme you want to create (mono, complement, triad, tetrad, analogic, or accented analogic) and then make adjustments. It also lets you preview the color scheme right in light and dark website layouts.

ColorSchemer Online V2
ColorSchemer lets you create color palettes around RGB or HEX values, or using a color selector tool. It also has built-in tools for lightening and darkening the color schemes it generates. There are also downloadable versions for both Windows and OS X.

Kuler
Adobe’s Kuler is one of the best color scheme tools available, with multiple options for both creating and finding color schemes. To find a color scheme created by someone else, you can search or browse by newest, mot popular, highest rated, or random. They also include tools for creating a color scheme based on an image (Flickr search is built in, or you can upload your own image) or a starting color.

ColourLovers
ColourLovers offers more than just color and pattern generators; it’s an entire community based around a love of color and good design. Their color tools include basic and advanced palette generators as well as an option to create a color scheme from an image.

GenerateIt.net Color Scheme Generator
Here’s another basic color scheme generator that lets you create a scheme based around a specific color, with options to lighten or darken the scheme.

ColorBlender.com
ColorBlender.com offers both manual and automatic color palette creation tools, as well as the ability to export your palette to Photoshop or Illustrator (it also provides HEX and RGB values).

Color Palette Generator
This generator creates a color palette based on an image. Just enter any image URL and it will create two color schemes: dull and vibrant.

Layouts

If the layout you need to create is pretty standard, using a layout generator can save you tons of coding time. There are even layout generators for creating more complex grid-based layouts and for WordPress themes.

YAML Builder
Here’s a visual tool for creating a YAML (Yet Another Multicolumn Layout) design. It’s super easy to use and offers a lot of customization options.

Variable Grid System
This is a simple generator for creating grid-based CSS layouts. Just enter the column width, the number of columns, and the gutter width, and it generates a layout for you.

Blueprint Grid CSS Generator
If you like using Blueprint for your CSS layouts but want something more flexible, this generator is for you. Just enter the number of columns, column width, and margin width and it generates your CSS for you. One caveat, though: it’s no longer in active development and is not supported.

WordPress Theme Generator
This generator lets you create a WP theme, and while it’s not extremely powerful, it is a quick way to create minimalist themes (both in terms of style and functionality).

Templatr
Templatr is another simple generator for creating quick WordPress layouts. It lets you edit virtually every element in the design, all using a visual editor.

Grid System Generator
The Grid System Generator lets you create grid layouts using 960.gs, the Golden Grid, 1KB Grid, or Simple Grid. Just enter the variables for each one and it will generate a preview and give you a download link for the CSS and HTML files.

ColoRotate
ColoRotate lets you view and create color schemes in 3D. Being able to manipulate the color palette tool in 3 dimensions can lead to better understanding of how the colors in a palette relate to one another.

Wix
Wix is often thought of as just a Flash template customizer, but it can also be used to create Flash layouts from scratch, including Flash banners and widgets.

CSS

There are CSS generators for almost everything. Many of the ones featured below are for creating new CSS3 effects, but there are others for typography, setting up initial stylesheets, and creating CSS buttons.

CSS Type Set
CSS Type Set lets you create typography designs and generates the CSS for you. Just paste in text you want to modify, and then use the options at the bottom to customize it and it will generate the CSS in real-time.

CSS3 Generator v1.6
This CSS3 generator lets you generate cross-browser compatible CSS for things like rounded corners, box shadows, and @font-face. Just pick something from the drop-down menu and it shows you the appropriate generator.

CSS3.0 Maker
Here’s another CSS3 generator that lets you create a variety of different effects using CSS3. There are generators for border radius, gradients, animation, text and box shadows, and more.

CSS3 Please!
CSS3 Please! is a cross-browser CSS3 rule generator that works for things like box shadows, border radius and gradients. Just edit the underlined bits to get the appropriate code.

CSS3 Sandbox
This CSS3 Sandbox has five different generators: linear gradients, radial gradients, text properties, box properties, and transforms.

CSS3 Gradient Generator v2.0
This gradient generator lets you pick three or more colors to combine in your gradient, and uses sliders to allow you to adjust how much space each color occupies within your gradient.

PrimerCSS
Getting started on a new stylesheet can be one of the more time consuming parts of coding a website design. PrimerCSS creates a starter stylesheet for your from your HTML, with all the IDs and classes used in your design.

CSS Border Radius
Here’s a simple border radius generator that’s incredibly easy to use. All you have to do is enter the border radius for each corner. It automatically fills in all four when you enter the first one, but you can then change each one individually.

Button Maker
This button maker from CSS-Tricks lets you create custom CSS3 buttons with gradients.

Graphics

Most graphics in web design are created using Photoshop or similar photo editing programs. But creating certain kinds of graphics, like tiling background patterns that way is time-consuming and sometimes frustrating. Included below are a number of pattern generators, as well as generators for creating other kinds of graphics.

bgMaker
bgMaker is a background pattern tool that lets you create pixel-based pattern backgrounds.

Stripemania
Stripemania is a striped background image generator. Pick the strip width and spacing, the orientation, and the colors, and it generates a repeating stripe pattern.

Dotted Background Generator
This generator lets you create dotted, half-tone style backgrounds. All you have to do is put in the dot and background colors, along with the height of the pattern and it does the rest. There’s also a “random” button, which can create some truly hideous color combinations.

Striped Backgrounds
This generator creates boldly-striped backgrounds in any resolution. The randomize feature can create some interesting color schemes. Tip: for website backgrounds, download your stripes in the avatar size and then use the image as a repeating pattern.

BgPatterns
BgPatterns is possibly the most powerful repeating pattern creator online. You can choose from a variety of shapes and then customize size, rotation, placement, color, texture, and more.

Stripe Generator 2.0
Stripe Generator 2.0 lets you create repeating-stripe backgrounds. Just choose size and spacing, colors, stripe orientation, shadow, and background style (solid or two kinds of gradients). You can preview your background full-screen before downloading, too.

Tartan Maker
Plaid backgrounds aren’t often seen in web design, and part of that is likely due to the complexity of creating a tiling plaid pattern. Tartan Maker makes it as easy as choosing a few colors and using sliders to determine the size and boldness of your plaid.

Favicon Generator
This Favicon Generator lets you create a favicon from scratch or based on an image you upload.

Tabs Generator
Here’s a quick and easy generator for creating tabs for your navigation. You can choose height and width, border size, corner radius, background color and style, fill style and colors, and orientation.

CSS Menu Generator
This generator is great for when you just need a quick, simple drop-down menu. Just choose a style, create your menu items, and download.

CSS Sprite Generator
To create CSS sprites with this generator, just zip all your images and upload them. Specify the space you want between images, as well as the aspect ratio, build direction, and if there should be a background or transparency color, as well as your image specs and any CSS specs you want. It will output the sprite file, as well as the CSS for each image.

Pure CSS Menu
This site lets you create a menu with dropdowns that only uses CSS, no images. It’s simple, but it’s also quick to set up.

Typetester
Here’s a CSS typography generator that lets you test up to three fonts side-by-side, and then download the CSS for any or all of them.

Other Generators

The generators above aren’t the only online generators useful to web designers. There are generators for creating dummy text, creating forms, font kits and more. Here are some of the best:

Text Generator
Rather than using Lorem Ipsum for everything, why not get some randomly generated text? This text generator pulls text from a variety of sources. Just tell it how many paragraphs you want.

Web Form Factory
Web Form Factory takes care of the PHP programming of your web forms based on your HTML files. It can output forms that will email or submit to a database.

Faary
Faary lets you create forms quickly and easily, by just entering the form elements in a list format. Then click on generate and it will create a form you can download.

Showdown
Showdown is a port of Markdown in JavaScript. Just type in some markdown text and it will output HTML for you.

@Font-Face Kit Generator
This @font-face kit generator from Font Squirrel lets you create full kits for any font you can legally use with @font-face.

pForm
pForm is a free HTML form builder. Just choose from their pre-designed templates and then customize your form. It’s fast and they have a good selection of form designs to choose from.

Adhesiontext
Adhesiontext creates dummy text for various languages, including specific characters. In addition to Latin characters, you can also create dummy text in Cyrillic, Greek and Arabic.

Conclusion

If it will save you time and/or frustration in designing a website, why wouldn’t you use one of the generators above? Sure, there are plenty of instances where a generator won’t be useful in a particular project, but that doesn’t mean you should disregard them all together. If you know of other generators that would be useful, please share them in the comments!