Introducing CSS FilterLab

In October 2011, Adobe proposed CSS Shaders as a way to bring cinematic effects to the web. Effects like saturation, gamma, burn, fold, curl, and even dissolve and explode could be applied with CSS to regular HTML elements. That proposal has evolved. It has been openly debated, updated, and merged with the CSS Filter Effects specification. It is now on its way to a browser near you. CSS Shaders now go by the name of CSS Custom Filters but they’re just as expressive.

CSS FilterLab

CSS FilterLab is a browser-based tool that lets you play with CSS filters, tweak them, and see the effects in real time (see Figure 1). You can use the tool to combine multiple filters and animate them to create rich cinematic effects.

Figure 1. Creating and applying filters in CSS FilterLab.
At the time of writing, this is really cutting-edge technology, so only a few browsers support it. So, when you open up CSS FilterLab in your browser, you’ll be prompted with instructions on what to do to get the best experience. We took great care to make those instructions simple and easy to follow.

Getting started

It’s easy to start experimenting with CSS FilterLab. Once you open it up in a browser, you can start adding filters from the Add Filter menu.

You can choose to apply built-in filters or custom filters:

Built-in filters are the ones that come by default with the browser. They bring basic color effects such as grayscale, sepia, saturation or contrast.
Custom filters take effects to a whole new level. Some examples that have been built include effects like burn, curl, fold, dissolve, explode, and many more. Custom filters don’t come with the browsers; they’re written by developers themselves. They make use of shaders, which are small programs that enable fine-grained control over color and geometry. Shaders take advantage of hardware acceleration and are commonly used in visual effects for gaming. They might look alien to CSS developers, and they generally require a strong grasp of math.
Fortunately, CSS FilterLab comes bundled with a few great examples of custom filters with underlying shaders. One such example is Fold, which gives an HTML element the 3D aspect of a folded piece of paper (see Figure 2).

Figure 2. The Fold custom filter applied to the HTML element in CSS FilterLab.
The filters that have been applied expose their parameter controls. This makes it very easy for you to fine-tune them to get the effect you’re looking for. In addition, multiple built-in and/or custom filters can be applied together to get stunning results.

Once you’re happy with the result, save your changes as a preset. This allows you to reuse the configuration later.

Animating effects

Effects don’t just happen. They come into being, transitioning from one state to another. This is what makes them expressive.

CSS FilterLab comes with a basic set of animation controls that help you create smooth transitions between filter parameter values.

Notice the timeline and controls at the bottom of the screen. Click at any point of the timeline, and then change the parameters of the active filters. This creates a new keyframe on the timeline. Hit the play button to see the animation run through (see Figure 3).

Keyframes can be added, dragged around the length of the timeline or removed so you can tweak the animation to get it just right.

The duration of the animation can be changed from the input to the right of the timeline. It’s measured in seconds.

Quick walkthrough of creating a fold animation with CSS FilterLab. (0:19)

Code syntax

CSS FilterLab enables you to create rich visual effects. It’s important to know that this is done with plain CSS, albeit cutting-edge CSS.

At Adobe, we’ve worked hard, together with our partners, to bring this technology to the open web. We’re not about to hide it behind a tool.

CSS FilterLab shows the exact code that’s being used to achieve an effect or animation. The CSS Syntax and CSS Animation Syntax panels, just above the timeline, show just what you’d expect. You can copy this code into your own projects to make use of the effects. Keep in mind that CSS Filters are just starting to become available in browsers.

Creating new custom filters

This is where things can become challenging. However, if you find complex math and writing shaders particularly appealing, you’ll be glad to know that CSS FilterLab includes a fully-fledged shader editor (see Figure 4).

To create a new custom filter, start by forking an existing custom filter from the ones provided under the Add Filter menu. You’ll notice that your forked filter appears in the Forked tab of the menu. Click the “customize” icon and you’ll get to the core of a custom filter.

From this point on, you have full control over the parameters used, their types, as well as the fragment and vertex shader source. Your changes are automatically saved and stored locally, in the browser.

Shaders are written in OpenGL Shading Language (GLSL). The topic of writing shaders is beyond the scope of this introduction, but you can learn more from the GLSL documentation. Be sure to read about the types, methods, and features of the language to get the best out of your shaders.

Figure 3. The error panel highlights issues.
The error panel highlights any issues with your shader code, in real time. This is really useful because it keeps you in the same context while developing and previewing. You also get to see the results of your shader code in real time.

Sharing and importing custom filters

Share your custom filters by publishing them from CSS FilterLab as a gists on GitHub. The controls for doing this are found in the shader editor panel.

Once published, share the link with others. They’ll be able to import your custom filter in CSS FilterLab and use it on their own content. To import a custom filter go to the Add Filter menu, choose Import and use the gist URL.

Open source

All of the code for CSS FilterLab is freely available on GitHub under the Apache License v2. We’re looking forward to your thoughts, feedback, and contributions to the project.

If you write shaders that you’d like to distribute with CSS FilterLab, please contribute them to the project. Before checking in any code, take a moment to make yourself familiar with the contribution guidelines outlined on GitHub.

Where to go from here

CSS Filters and Custom Filters open up a wealth of creative effects for web content. CSS FilterLab gives only a hint about what’s becoming possible. But the true value is in your hands and in what you create with this technology.

Give some thought to the new opportunities for interaction and expressiveness that filters, geometry manipulation and cinematic effects can bring to your work. Think about what this means for your content on a large screen, on a mobile device, and in so many new contexts.

Use CSS FilterLab to learn about the capabilities of the modern graphical web and share your thoughts with us. We’d love to know what you create with them.

Adobe’s Alan Greenblatt has created a short video walkthrough of CSS FilterLab. If you’re keen to learn more, that is a great place to start.

You can also find out more about Adobe’s contributions to make the web even better by visiting html.adobe.com.

+

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.

Comments are currently closed as we migrate to a new commenting system. In the interim, please provide any feedback using our feedback form. Thank you for your patience.

100 Great CSS Menu Tutorials

Navigation is such an important part of your website. It’s how your visitors navigate to the main areas of your site and makes it easy for them to find your good content.

CSS is of course the perfect language for designing beautiful navigation menus. It can be applied to any type of website and is very flexible. Don’t be alarmed if your own CSS skills are fairly limited as there are a lot of great tutorials out there that walk you through how to add clean and professional looking CSS menus to your website. You can either copy and paste the code into your own design or modify the menu to suit your needs.

Today we would like to show you 100 of these tutorials; 75 horizontal CSS menu tutorials and 25 vertical CSS menu tutorials.

[Note: Have you already ordered your copy of our Printed Smashing Book #3? The book is a professional guide on how to redesign websites and it also introduces a whole new mindset for progressive Web design, written by experts for you.]

Horizontal CSS Menu Tutorials

1. Advanced CSS Menu Trick

Advanced CSS Menu Trick

View Tutorial | Demo

2. Elegant Drop Menu with CSS Only

Elegant Drop Menu with CSS Only

View Tutorial | Demo

3. Bulletproof CSS Sliding Doors

Bulletproof CSS Sliding Doors

View Tutorial & Demo

4. Tabbed Navigation Using CSS

Tabbed Navigation Using CSS

View Tutorial | Demo

5. Create an Advanced CSS3 Menu – Version 2

Create an Advanced CSS3 Menu – Version 2

View Tutorial | Demo

6. Create a Slick Menu using CSS3

Create a Slick Menu using CSS3

View Tutorial | Demo

7. How to Make a Smooth Animated Menu with jQuery

How to Make a Smooth Animated Menu with jQuery

View Tutorial | Demo

8. How to Make a CSS Sprite Powered Menu

How to Make a CSS Sprite Powered Menu

View Tutorial

9. Simple jQuery Dropdowns

Simple jQuery Dropdowns

View Tutorial | Demo

10. Designing the Digg Header: How To & Download

Designing the Digg Header: How To & Download

View Tutorial | Demo

11. Dynamic Page / Replacing Content

Dynamic Page / Replacing Content

View Tutorial | Demo

12. Create a Fun Animated Navigation Menu With Pure CSS

Create a Fun Animated Navigation Menu With Pure CSS

View Tutorial | Demo

13. How-to: DropDown CSS Menu

How-to: DropDown CSS Menu

View Tutorial | Demo

14. Flexible CSS Menu

Flexible CSS Menu

View Tutorial & Demo

15. Creating a glassy non div navigation bar

Creating a glassy non div navigation bar

View Tutorial | Demo

16. CSS Sliding Door using only 1 image

CSS Sliding Door using only 1 image

View Tutorial | Demo

17. CSS UL LI – Horizontal CSS Menu

CSS UL LI - Horizontal CSS Menu

View Tutorial

18. How to Build a Kick-Butt CSS3 Mega Drop-Down Menu

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu

View Tutorial | Demo

19. A Different Top Navigation

A Different Top Navigation

View Tutorial | Demo

20. Create a Cool Animated Navigation with CSS and jQuery

Create a Cool Animated Navigation with CSS and jQuery

View Tutorial | Demo

21. Navigation Bar

Navigation Bar

View Tutorial & Demo

22. CSS: drop down menu tutorial

CSS: drop down menu tutorial

View Tutorial | Demo

23. RocketBar – A jQuery And CSS3 Persistent Navigation Menu

RocketBar – A jQuery And CSS3 Persistent Navigation Menu

View Tutorial | Demo

24. A Great CSS Horizontal Drop-Down Menu

A Great CSS Horizontal Drop-Down Menu

View Tutorial & Demo

25. Overlay Effect Menu with jQuery

Overlay Effect Menu with jQuery

View Tutorial | Demo

26. Grungy Random Rotation Menu with jQuery and CSS3

Grungy Random Rotation Menu with jQuery and CSS3

View Tutorial | Demo

27. Rocking and Rolling Rounded Menu with jQuery

Rocking and Rolling Rounded Menu with jQuery

View Tutorial | Demo

28. Slide Down Box Menu with jQuery and CSS3

Slide Down Box Menu with jQuery and CSS3

View Tutorial | Demo

29. Advanced CSS Menu

Advanced CSS Menu

View Tutorial | Demo

30. CSS3 Dropdown Menu

CSS3 Dropdown Menu

View Tutorial | Demo

31. How To Create A Simple Drop Down Menu With CSS3

How To Create A Simple Drop Down Menu With CSS3

View Tutorial | Demo

32. Pastel color menu with dynamic submenu using CSS

Pastel color menu with dynamic submenu using CSS

View Tutorial | Demo

33. Creating an Animated CSS3 Horizontal Menu

Creating an Animated CSS3 Horizontal Menu

View Tutorial | Demo

34. Tutorial to create a Beautiful, simple, horizontal CSS menu

Tutorial to create a Beautiful, simple, horizontal CSS menu

View Tutorial & Demo

35. CSS Sprites2 – It’s JavaScript Time

CSS Sprites2 - It’s JavaScript Time

View Tutorial | Demo

36. Image Menu with Jquery

Image Menu with Jquery

View Tutorial | Demo

37. How to Code an Overlapping Tabbed Main Menu

How to Code an Overlapping Tabbed Main Menu

View Tutorial | Demo

38. Pure CSS Horizontal Menu

Pure CSS Horizontal Menu

View Tutorial | Demo

39. Pure CSS Menu With Infinite Sub Menus Tutorial

Pure CSS Menu With Infinite Sub Menus Tutorial

View Tutorial | Demo

40. Animated horizontal tabs

Animated horizontal tabs

View Tutorial & Demo

41. CSS Sprite Navigation Tutorial

CSS Sprite Navigation Tutorial

View Tutorial | Demo

42. Create your own drop down menu with nested submenus using CSS and a little JavaScript

Create your own drop down menu with nested submenus

View Tutorial | Demo

43. CSS Drop Down Menu Tutorial

CSS Drop Down Menu Tutorial

View Tutorial & Demo

44. Nicer Navigation with CSS Transitions

Nicer Navigation with CSS Transitions

View Tutorial | Demo

45. CSS Navigation Menus

CSS Navigation Menus

View Tutorial

46. Pure CSS Fish Eye Menu

Pure CSS Fish Eye Menu

View Tutorial | Demo

47. How to Create a CSS3 Tabbed Navigation

How to Create a CSS3 Tabbed Navigation

View Tutorial | Demo

48. Create an apple style menu and improve it via jQuery

Create an apple style menu and improve it via jQuery

View Tutorial | Demo

49. Create a multilevel Dropdown menu with CSS and improve it via jQuery

Create a multilevel Dropdown menu with CSS and improve it via jQuery

View Tutorial | Demo

50. Sweet tabbed navigation using CSS3

Sweet tabbed navigation using CSS3

View Tutorial | Demo

51. Create an Advanced CSS Menu Using the Hover and Position Properties

Create an Advanced CSS Menu Using the Hover and Position Properties

View Tutorial | Demo

52. Sexy Drop Down Menu w/ jQuery & CSS

Sexy Drop Down Menu w/ jQuery & CSS

View Tutorial | Demo

53. How to Create a Horizontal Dropdown Menu with HTML, CSS and jQuery

How to Create a Horizontal Dropdown Menu with HTML, CSS and jQuery

View Tutorial | Demo

54. CSS Express Drop-Down Menus

CSS Express Drop-Down Menus

View Tutorial | Demo

55. Professional Dark CSS Menu

Professional Dark CSS Menu

View Tutorial | Demo

56. Creating a Simple yet Stylish CSS Jquery Menu

Creating a Simple yet Stylish CSS Jquery Menu

View Tutorial | Demo

57. jQuery Drop Line Tabs

jQuery Drop Line Tabs

View Tutorial & Demo

58. Animated Menus Using jQuery

Animated Menus Using jQuery

View Tutorial | Demo

59. Make a Mega Drop-Down Menu with jQuery

Make a Mega Drop-Down Menu with jQuery

View Tutorial | Demo

60. Animated Navigation with CSS & jQuery

Animated Navigation with CSS & jQuery

View Tutorial | Demo

61. Horizontal Subnav with CSS

Horizontal Subnav with CSS

View Tutorial | Demo

62. Mega Drop Down Menus w/ CSS & jQuery

Mega Drop Down Menus w/ CSS & jQuery

View Tutorial | Demo

63. CSS dropdown menu without javascripting or hacks

CSS dropdown menu without javascripting or hacks

View Tutorial & Demo

64. CSS Drop Down Navigation Tutorial

CSS Drop Down Navigation Tutorial

View Tutorial

65. Sleek Pointer Menu 2

Sleek Pointer Menu 2

View Tutorial & Demo

66. CSS Overlapping Tabs Menu

CSS Overlapping Tabs Menu

View Tutorial | Demo

67. Horizontal CSS Menu With Icons

Horizontal CSS Menu With Icons

View Tutorial | Demo

68. Creating a Multi-Level Dropdown Menu using CSS and jQuery

Creating a Multi-Level Dropdown Menu using CSS and jQuery

View Tutorial | Demo

69. Create The Fanciest Dropdown Menu You Ever Saw

Create The Fanciest Dropdown Menu You Ever Saw

View Tutorial | Demo

70. Create A Speaking Block Navigation Menu Using Pure CSS

Create A Speaking Block Navigation Menu Using Pure CSS

View Tutorial | Demo

71. Horizontal CSS List Menu

Horizontal CSS List Menu

View Tutorial | Demo

72. CSS3 dropdown menu

CSS3 dropdown menu

View Tutorial | Demo

73. Making a CSS3 Animated Menu

Making a CSS3 Animated Menu

View Tutorial | Demo

74. How To Create A Clean CSS3 Navigation Bar

How To Create A Clean CSS3 Navigation Bar

View Tutorial | Demo

75. How to Create a Modern Ribbon Banner Navigation Bar with Pure HTML/CSS3

How to Create a Modern Ribbon Banner Navigation Bar with Pure HTML/CSS3

View Tutorial | Demo

Vertical CSS Menu Tutorials

76. CSS Pop-Out Menu Tutorial

CSS Pop-Out Menu Tutorial

Tutorial | Demo

77. CSS graphic menu with rollovers

CSS graphic menu with rollovers

Tutorial | Demo

78. Vertical CSS Menu With a ‘Behavior’ File

Vertical CSS Menu With a ‘Behavior’ File

Tutorial | Demo

79. Super Fantastic CSS Navigation Image Rollovers

Super Fantastic CSS Navigation Image Rollovers

Tutorial | Demo

80. Vertical Menu with Hover Effect using CSS

Vertical Menu with Hover Effect using CSS

Tutorial | Demo

81. How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

Tutorial | Demo

82. Simple CSS Vertical Menus

Simple CSS Vertical Menus

View Tutorial | Demo

83. Create a Social Media Sharing Menu Using CSS and jQuery

Create a Social Media Sharing Menu Using CSS and jQuery

Tutorial | Demo

84. CSS3 Minimalistic Navigation Menu

CSS3 Minimalistic Navigation Menu

Tutorial | Demo

85. Beautiful Slide Out Navigation: A CSS and jQuery Tutorial

Beautiful Slide Out Navigation: A CSS and jQuery Tutorial

Tutorial | Demo

86. Awesome Cufonized Fly-out Menu with jQuery and CSS3

Awesome Cufonized Fly-out Menu with jQuery and CSS3

Tutorial | Demo

87. Two CSS vertical menu with show/hide effects

Two CSS vertical menu with show/hide effects

Tutorial | Demo

88. Animated Drop Down Menu with jQuery

Animated Drop Down Menu with jQuery

Tutorial | Demo

89. Clean and Attractive jQuery Vertical Menu Tutorial

Clean and Attractive jQuery Vertical Menu Tutorial

Tutorial | Demo

90. Nested Side Bar Menu

Nested Side Bar Menu

Tutorial & Demo

91. CSS menus

CSS menus

Tutorial | Demo

92. Simple Vertical CSS Menu

Simple Vertical CSS Menu

Tutorial

93. Sliding Jquery Menu

Sliding Jquery Menu

Tutorial | Demo

94. Reinventing a Drop Down with CSS and jQuery

Reinventing a Drop Down with CSS and jQuery

Tutorial | Demo

95. Drop-Down Menus, Horizontal Style

Drop-Down Menus, Horizontal Style

Tutorial | Demo

96. CSS Vertical Navigation with Teaser

CSS Vertical Navigation with Teaser

Tutorial | Demo

97. jQuery style menu with CSS3

jQuery style menu with CSS3

Tutorial | Demo

98. Green Vertical Navigation Menu

Green Vertical Navigation Menu

Tutorial | Demo

99. CSS: Sexy Vertical Popup Menu with CSS

CSS: Sexy Vertical Popup Menu with CSS

Tutorial | Demo

100. Uberlink CSS List Menus

Uberlink CSS List Menus

Tutorial | Demo

Overview

We hope you have enjoyed this list of CSS navigation menus and found something useful for your site (We made a point of including a mix of different menu styles: basic menus, flashy menus, menus which use jquery, menus that use pure CSS etc). If you know of any other great CSS menu tutorials, please feel free to share them in the comment area. 🙂

50+ Useful CSS Tools And Generators for Developers

50+ Useful CSS Tools And Generators for Developers

Advertisement

Easiest way to Usability Testing

CSS tools are essential for web developers because they act like a sort of magic lamp that can simplify the job at hand. Most development tools are time savers that are there to help developers create stylish, functional and optimized websites with a few shortcuts.

 

CSS tools and generators are available in such large numbers that a developer can choose from a range of them to make their projects go smoother. Here is the collection of around 50 useful and handy CSS tools and generators that every developer should know about. Enjoy!

[Note: Have you already ordered your copy of our Printed Smashing Book #3? The book is a professional guide on how to redesign websites and it also introduces a whole new mindset for progressive Web design, written by experts for you.]

CSS Colors Tools

Color Scheme Designer
This tool provides colors in the form of a color wheel that offers mono, complement, traid, tetrad, analogic and accented analogic color variations in the percentage ratio; and it also highlights the same with the suitable scheme chosen.

Screenshot

Ultimate CSS Gradient Generator
It is a CSS gradient editor and generator that lets you create CSS gradients having cross-browser support.

Screenshot

CSS Color Codes
This tool offers two options for furnishing the hexadecimal and RGB color codes. You can pick the color from the color picker and then copy its hexadecimal value from the bottom field.

Screenshot

Colors Pallete Generator
This is a powerful tool that generates a color palette derived from the primary colors of the image that you upload. It is a useful tool for rapidly grabbing a particular color within an image for inspiration. With this, you can also generate Photoshop swatches and CSS styles.

Screenshot

CSS Colors
This color chart offers more than 16 million colors with both RGB and hexadecimal color modes.

Screenshot

Gradient Image Maker
This tool allows you to easily generate a gradient image of 3 types with on the spot previewing. With this tool you can create gradient images that you can use everywhere in your web page design.

Screenshot

CSS Layouts Tools

templatr
It is a template generator that lets you create beautiful templates for your blog and web design without requiring any HTML and CSS knowledge.

Screenshot

Free CSS Template Code Generator
It is a free HTML – CSS template generator that generates a three column layout without using any Tables. This template generator produces a custom-made template that can be used to control the look and feel of an entire website.

Screenshot

Firdamatic: the Design Tool for the Uninspired Webloggers
This tableless layout generator lets you easily create and customize layouts by simply completing a form.

Screenshot

CSS Layout Generator – CSS Portal
Another layout generator with which you can create a fluid or fixed width column layout, with up to 3 columns, header, footer and menu.

Screenshot

CSS Layout Generator
Another CSS Layout Generator that allows you to create your own template by using HTML and CSS. You can create a template with up to 3 columns and a header and footer.

Screenshot

Layout Generator
This tool generates multi-column and grid layouts with CSS 2.0 techniques by using pixels, percentage or em.

Screenshot

CSS Layout Generator
With this tool, you can modify the header, footer, sidebars and layout width and can set the document type as XHTML or HTML strict or transitional to see the preview in the same page.

Screenshot

YAML Builder
This tool is designed for visual development of YAML based CSS layouts.

Screenshot

CSS Grids Tools

The 1KB CSS Grid
It is a lightweight tool with which you can streamline page templates for content management systems.

Screenshot

Variable Grid System
It is a quick way to generate an underlying CSS grid that is based on the 960 Grid System.

Screenshot

GRIDINATOR
This tool allows you to generate grids for the 960.gs, Golden Grid, or 1KB Grid. You can even generate a basic generic grid.

Screenshot

Blueprint Grid CSS Generator
With this tool, you can generate more flexible versions of Blueprint’s grid.cs and compressed.css and grid.png files.

Screenshot

CSS Grid Calculator
This calculator allows you to envision page layouts and draw grids in a variety of ways. You can have an accurate visual feedback on how text blocks and page divisions will appear within a browser window. You can also return style declarations for divisions and text to copy and paste into style sheets.

Screenshot

Grid Designer
This tool allows you create design grids by giving you options to customize Columns, Pixels, Gutters and Margins.

Screenshot

Em Calculator
Em Calculator is a JavaScript tool that lets you design scalable and accessible CSS design. This tool converts pixels to their relative em units based on a text size.

Screenshot

CSS Menus and Buttons

CSS Menu Maker
This tool allows you create custom, cross browser compatible website menus.

Screenshot

CSS Menu Generator
This menu generator lets you generate CSS and HTML codes which you need to create an appealing set of text based navigation buttons.

Screenshot

My CSS Menu
This tool provides an easy way to create cross browser compatible CSS menus. With this tool, you can create Horizontal, Vertical, Drop-down web navigation.

Screenshot

Tabs Generator
Another CSS navigation Tab Menu generator that allows you tweak size, colors, corners and more to generate unique designs that can be downloaded for your use.

Screenshot

List-O-Matic
With this tool, you can choose the content, layout and presentation of your list-based navigation menus.

Screenshot

Button Maker Online
This tool creates XHTML valid micro buttons (80×15). You can also create larger 88×31 buttons.

Screenshot

CSS Button & Text Field Generator
This tool is a CSS button and text field generator that lets you easily create with just a click of the mouse.

Screenshot

Fonts and Text CSS Tools

Fonttester
This is an amazing tool that lets you edit loads of CSS properties including inline height, font weight, font style and variant, text indent and transform, and word and letter spacing.

Screenshot

CSS font style
You can use this tool to set the style of the font to italic or oblique.

Screenshot

Typetester
This application provides a comparison of the fonts for the screen. Since the new fonts are packed into operating systems, the list of the common fonts will be updated.

Screenshot

CSS Font and Text Style Wizard
You can use this wizard if you want to experiment with the fonts and text styles in order to generate sample CSS style source code. Dynamic HTML is used in this wizard that changes the style of the table in-situ, without loading another page.

Screenshot

CSS Type Set
This is a typography tool that allows designers and developers to test and learn the ways to style their web content.

Screenshot

CSS Generator & Optimizer

CSS Generator
This tool lets you choose a style for your web page. You can select different Cascading Style Sheet properties with live preview. You can choose color, HTML tag, click the field you would like to insert color into and color them.

Screenshot

CSS Generator
This tool gives you a live preview of the color that you select from the palette. You can directly specify colors and other design attributes. This tool helps you select a face color for your new web project straight away!

Screenshot

Cascading Style Sheet CSS Generator
This is a free tool that lets you create cascading style sheets for your web page. You can add as many style sheets as you want.

Screenshot

quickCSS – Online-CSS-Generator
With this tool, you can generate CSS with just one click.

Screenshot

Spiffy Corners – Purely CSS Rounded Corners
It is a simple tool to generate the CSS and HTML required to generate anti-aliased corners without using images or javascript.

Screenshot

Clean CSS
This is a CSS optimizer and formatter that takes your CSS code and makes it cleaner and more concise.

Screenshot

Simple CSS
This tool lets you create unique Cascading Style Sheets from scratch. You can also modify your existing CSS.

Screenshot

Regex Patterns for Single Line CSS
While formatting your CSS Style sheet single-line, you may find Dan Rubin’s Textmate macro useful if you group your ruler and add white spaces that makes scanning through the web page easier. You can also use a regular expression if you don’t want to use Textmate.

Screenshot

CSS Sprite Tools

CSS – Sprit.es
With this tool, you can easily generate CSS and HTML code by uploading the file you want to use in your CSS sprite and then click the button that join all your images into a single file. With this tool, you can also achieve any rollover effects.

Screenshot

Spritegen CSS Sprites
This tool allows you create your sprite by letting your upload your image and then add more images. You can also set the output of your images as in PNG, JPEG or GIF.

Screenshot

CSS Sprites
With this tool, upload any number of images and click Generate button to create your CSS sprites with ease.

Screenshot

Website Performance (CSS Sprite Generator)
It is a tool that allows you to upload your source file in order to create the sprite image and CSS. This tool works by ignoring duplicates, resizing the source images, setting the sprite and other CSS options like horizontal and vertical offset, background color, class prefix, CSS suffix etc.

Screenshot

Spritebox
It is a WYSIWYG tool that is helpful for the web designers who want to quickly create CSS classes and IDs from a single sprite image. This tool works on the principle of using the background-position property to line up areas of a sprite image into block elements of a web page.

Screenshot

Other CSS Tools

SlickMap CSS
This tool displays your site maps directly from HTML unordered list navigation. This is appropriate for the websites that want to accommodate up to three levels of page navigation and extra utility links that can be easily modified to meet personal requirements, branding, or style preferences.

Screenshot

CSS3 Please!
This tool displays the output of your code instantaneously. It is a simple yet powerful tool for the web designers and developers.

Screenshot

CSS Sorter
CSS Sorter is a tool that sorts CSS files and rules alphabetically so that you can easily manage your CSS files.

Screenshot

Sky CSS Tool
Sky CSS lets you create CSS classes without requiring any manuscript code. In order to work properly, it needs a JavaScript compatible browser.

Screenshot

CSS Table Wizard
This wizard helps you generate style source code and allows you to do experiments with table border styles.

Screenshot

Csstxt
Csstxt is a powerful tool that illustrates numerous ways to add a style to a text with ‘a’, ‘p’ or div tag.

Screenshot

MinifyMe
It is a small AIR application that packs together multiple CSS and JavaScript files into one and runs on your desktop.

Screenshot

Password Generator
This tool generates all the compulsory codes required to password protect a directory, or selects files within it on your site by means of .htaccess. This tool works by encrypting your desired password and then put the outputs inside your .htaccess and .htpasswd files.

Screenshot

XHTML/CSS Markup Generator
This is a simple tool that lets you quickly generate XHTML Markup and a CSS frame; shorten syntax so that you can directly jump to the elements styling. This tool significantly speeds up your work.

Screenshot

freebiees

50 Free and High-Quality Icon Sets

Advertisement

A beautiful and elegant icon set is an asset to any good web design. Creative use of an icon set can help make or break the overall look of the design. Freebie design components, especially beautiful icon sets can be found in nearly every designer’s toolbox, or if not already among their tools, then certainly on their wishlists. Which is what brings us here today…adding to that tool kit!

 

In this post, we are presenting an awe-inspiring collection of 50 magnificently designed, free and professional high-quality icon sets. All of the icon sets featured are free. Nevertheless, please be sure to read the license agreements carefully before using all icons since this can change from time to time. Enjoy!

[Note: Have you already ordered your copy of our Printed Smashing Book #3? The book is a professional guide on how to redesign websites and it also introduces a whole new mindset for progressive Web design, written by experts for you.]

Free and High-Quality Icon Sets

Symbolicons: Transportation
A free set of stylish transportation icons from the full Symbolicons set.

Screenshot

Multimedia Icon Set
The set is called the ‘Multimedia Icon Set’ and, as the name suggests, contains 14 multimedia icons in PNG format. You will also find included in the download the AI source files. You are free to use this icon set for both personal and commercial projects.

Screenshot

Exclusive Free Icons: “Appliance Icons”
The set includes 10 super cute looking icons of all types of household appliances.

Screenshot

A Set of 15 TV Icons
A fresh set of 15 TV icons of varied designs, available in 256 x 256 pixels.

Screenshot

App Icons
It includes 28 icons for various applications, available in both png and ico format, from 128 to 16px.

Screenshot

iPad 2 Icons
The set includes 18 beautifully rendered icons of the iPad 2 with varying colored covers.

Screenshot

Cute Twitter Icons ~ Chrome
A new range of twitter icons in 256 x 256 pixels. Liven up your website with one of these little cuties.

Screenshot

Leather briefcase PSD & icon
A set of briefcase icons available in 512×512, 256×256, and 128×128 pixels.

Screenshot

Style Guides: A Free Icon Set for Writers
This high-quality icon set features 5 icons, all in PNG format, ranging from 32×32 px to 512×512 px.

Screenshot

Follow Me Icons
4 png icons for your blog design projects which include Twitter, Facebook, Feed and Favorite.

Screenshot

RSS Icons
A choice of 16 chic RSS icons to liven up any site.

Screenshot

Brand New Social Icons ~ Teacups
A cup of tea, anyone? 6 social icons that look simply delicious!

Screenshot

Minimalistica Icon Set
This simple two-toned collection is available in PNG: 16×16, 24×24, 32×32, 48×48, 64×64, 128×128

Screenshot

Awesome book icon
Awesome icon of a set of books, viewed from the spines as though they were on a shelf. 512px, 256px, 128px and 64px versions of the icons available in one archive.

Screenshot

Button-style Social Icons
A simple and clean set of social media based icons in 256 x 256 pixels.

Screenshot

Shopping Icons ~ Brand new set!
A set of beautiful icons for any web based shop or retail needs.

Screenshot

Purse icon
Beautiful leather purse, filled with large bills. Open it, take it

Screenshot

65 Classic Cocktails
A cool and stylish range of icons that one might find quite refreshing.

Screenshot

48 pixels web iconset
Includes a total of 226 icons related to websites, design, e-commerce.

Screenshot

Credit Card icons
A gorgeous set of 31 credit card icons.

Screenshot

Dreadhead Creatures
10 cute and coiffed original vector creature icons.

Screenshot

Things Icon
A random set of six .png’s ranging from 512px to 16px.

Screenshot

Comic Icons
A set of outstanding comically illustrated Icons.

Screenshot

Junior Icons
The sharp set includes 146 beautiful icons.

Screenshot

Rabbit Icons
An intriguing special Easter Bunny icon set which comes in 4 sizes as transparent PNG files available: 64x64px, 128x128px, 256x256px

Screenshot

Kraftwerk
This collection contains 13 icons with large resources for Windows & Mac OS X.

Screenshot

Classic Cars Icons
The set includes 6 beautiful icons of some classic cars.

Screenshot

HYDROPRO ICON PACK
HydroPRO Icon Pack contains 50 high quality (256×256 pixels) icons; PNG and ICO formats. This package includes: HDD Icon, My Computer Icon, Keyboard Icon, Mouse Icon and more…

Screenshot

Smooth Metal Software Pack
A set of 50 wonderfully illustrated icons for apps.

Screenshot

GPS navigation icons Part-2
This set includes GPS navigation icons in 4 colors and each icon comes in a 128×128 pixels fully layered PSD file.

Screenshot

Farm Fresh Icons
A set of beautiful and clean icons that contains an astounding 2000 application and mini icons.

Screenshot

Social Media Icons by Iconshock
This set includes 12 fantastically designed Social Media Icons.

Screenshot

PSD Shopping Bag Set
This set containes 9 beautifully crafted shopping bag icons.

Screenshot

Free credit card Icons
The most complete credit card icon set ever, 457 payment and credit card icons packed in this fantastic collection, it includes 9 sizes, pixel perfect icons for smaller sizes and vector for larger sizes.

Screenshot

Home icons
A set of home icons available in 512×512, 256×256 and 128×128 pixels with psd files.

Screenshot

High detail social icons
A set of visually stunning social media icons.

Screenshot

User icons
This set include 55 awesome user icons.

Screenshot

3D Download Icon
This set containes 4 transparent PNG files (64px; 128px; 256px; 512px) to help meet your project download needs.

Screenshot

Blue Icons by Shek
A set of 5 beautiful icons in a blue hue.

Screenshot

PSD Thank You Bubble Set
A wonderful set of 9 attractive bubbles that can be used for any purpose.

Screenshot

Free Briefcase Icon
A highly detailed briefcase icon presented in 3 different dimensions.

Screenshot

iPhone & iPad PSD templates & icons
A beautiful set of PNG icons in sizes 256×256, 128×128 and 64×64 pixels for use in your web projects.

Screenshot

Twitter Icons
A well designed set of Twitter Icons in vector format.

Screenshot

World globe PSD & icons
A set of different world globe icons with fully layered Photoshop files. Icons in various standard sizes such as 512×512, 256×256, 128×128, 64×64 and 32×32 pixels.

Screenshot

Ice candy PSD & icons
A set of tasty looking frozen dessert treat icons available in 512×512 and 256×256 pixels.

Screenshot

Free iMac Icon
Free iMac icon that will perfectly suit your creative headers, presentations, business cards, portfolio websites and print works. This quality illustration has been resized in three different dimensions to be useful for various needs.

Screenshot

GPS navigation icons Part-1
Each icon comes in a 128×128 pixels fully layered PSD file and isolated on a transparent background for the use in web projects as icons.

Screenshot

Html5 icons
A set of beautiful icons inspired by the html5 icon.

Screenshot

Battery Icons
This set includes PNG icons in sizes 512×512 and 256×256 pixels complete with psd.

Screenshot

Monochromatic Iconset
A simple, yet classic, set of monochromatic icons with an available PSD file.

Screenshot

Leaf Mimes Icons
A unique set of icons that can add a bit of style to your project.

Screenshot

(rb)

Set Text on a Circle – CSS Tricks

by: Chris Coyier

Jul92012

There isn’t any super simple standardized way to set web type on a circle (or any kind of curve). But it can be done! We’ll explore one way to do it here. But be forewarned, we’re going to use some CSS3 and JavaScript and not give two hoots about older browsers that don’t support some of the required tech. If you’re interested in this for a real project, this kind of thing is probably still best served by and image with proper alt text, or proper feature detection which can flip out the image for this fancy technique in browsers that can handle it.

An Example

View Demo   Download Files   Go Play on CodePen

Let’s proceed with something a bit simpler.

The Entire Process

Let’s take simple phrase for example:

Imagine if we took the words we were trying to set in a circle and broke them apart into individual letters.

Let’s make sure each box is the same exact size by using a monospace font.

Now let’s make each of those boxes long, like a bicycle wheel spoke.

Then we bundle up all those spokes so they are all right on top of each other.

Now imagine we afix the ends of those spokes to a central hub. We rotate each spoke just a little bit more than the last one.

If we rotate the parent element counter-clockwise and remove our red guides, we have some text on a circle!

Technical Bits

To be able to manipulate each letter like that, you have to wrap them in another element.Lettering.js can do that for you easily (jQuery and plugin dependency).

So you have this.

<h1>Established 2012</h1>

You load jQuery and Lettering.js and then call this:

$("h1").lettering();

And it turns into this in the DOM:

<h1> <span class="char1">E</span> <span class="char2">s</span> <span class="char3">t</span> <span class="char4">a</span> <span class="char5">b</span> <!-- you get the idea --> </h1>

This really only works well with monospaced fonts. Even if you force monospaced-ness by setting each span to a fixed with, the space between each letter will be wrong and it will look weird. You could manually kern it by manually adjusting each rotation if you were nuts.

For each span, you want to set the height, position them all in the same spot, and then set the transform-origin to the bottom of the box (so they rotate around that hub. Vendor prefix that).

h1 span { font: 26px Monaco, MonoSpace; height: 200px; position: absolute; width: 20px; left: 0; top: 0; transform-origin: bottom center; }

Now you need a whole bunch of class name selectors, each that rotates by a bit more.

.char1 { transform: rotate(6deg); } .char2 { transform: rotate(12deg); } .char3 { transform: rotate(18deg); } /* and so on */

But imagine that with every vendor prefix as well, pretty messy. With Sass and Compass it’s a three-liner:

@for $i from 1 through 100 .char#{$i} +transform(rotate(($i*6)+deg))

Demo and Download

View Demo   Download Files   Go Play on CodePen

Taking things a bit further, we could get a little more finicky and fancy:

Or how about setting text on a spiral?

Update

Here’s a Sass (.sass) mixin from Chris Eppstein for a more extensible text rotation mixin:

=rotated-text($num-letters: 100, $angle-span: 180deg, $angle-offset: 0deg) $angle-per-char: $angle-span / $num-letters; @for $i from 1 through $num-letters .char#{$i} +transform(rotate($angle-offset + $angle-per-char * $i))

CSS3 – Gradients

Speed Up with CSS3 Gradients

 

Safari 4+, Chrome 1+, Firefox 3.6+, and Opera 11.10+ are all now supporting CSS3 gradients. This wide browser support makes using them for progressive enhancement all the more appealing. More good news, CSS3 gradients fall into the camp where you can specify fallbacks (i.e. images) so that browsers that don’t support them just use the image instead.

But wait… if you need to use an image anyway, why bother with declaring the gradient with CSS? That is kind of how I felt for a long time, but there is one important aspect that makes it worth it:browsers that support them don’t load the image fallback. One less HTTP Request = all the faster your site will load.

How it’s done

Cutting to the chase, here is the CSS for the most simple possible top-to-bottom linear gradient:

.gradient-bg { /* fallback/image non-cover color */ background-color: #1a82f7; /* fallback image */ background-image: url(images/fallback-gradient.png); /* Safari 4+, Chrome 1-9 */ background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1a82f7)); /* Safari 5.1+, Mobile Safari, Chrome 10+ */ background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7); /* Firefox 3.6+ */ background-image: -moz-linear-gradient(top, #2F2727, #1a82f7); /* IE 10+ */ background-image: -ms-linear-gradient(top, #2F2727, #1a82f7); /* Opera 11.10+ */ background-image: -o-linear-gradient(top, #2F2727, #1a82f7); }

You could add the non-prefixed version too, but since that’s not yet supported in anything I typically opt out of that, in case there are last minute changes to spec.

And once more with better formatting and without the comments:

.gradient-bg { background-color: #1a82f7; background-image: url(images/fallback-gradient.png); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1a82f7)); background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7); background-image: -moz-linear-gradient(top, #2F2727, #1a82f7); background-image: -ms-linear-gradient(top, #2F2727, #1a82f7); background-image: -o-linear-gradient(top, #2F2727, #1a82f7); }

CSS3 Please! is a good resource for snagging up-to-date syntaxes as well.

View Demo   Download Files

Different syntax for different rendering engines

Mozilla (Firefox, Flock, etc)

Mozilla’s syntax (more detail here) is like this:

-moz-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>])

The simplest way to declare a gradient is to just list a comma separated list of colors. That will start at the top and gradient to the bottom with equidistant color stops for each color. In the demo code above, we use a point and an angle (90deg) to it go bottom-to-top instead. For radial gradients: -moz-radial-gradient

WebKit (Safari, Chrome, etc)

WebKit’s syntax (more detail herefor Chrome 1-9 and Safari 4-5 is like this:

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

They have now deprecated the old syntax and moved toward something simpler. As of Chrome 10 and Safari 5.1 it’s now like this:

background-image: -webkit-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Chrome 10+, Saf5.1+ */

Opera

As of Opera 11.10, Opera supports CSS3 gradients in the same format as Mozilla and the latest WebKit.

background-image: -o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */

Trident (IE)

Trident’s syntax (not really CSS3… more detail here) is like this:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB); -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";

“filter” should work in IE6-IE8 (haven’t tested IE9), but it’s not “valid” code. “-ms-filter” is valid, but only works in IE8+.

Unfortunately, we can’t invite IE to the party! Using these filter properties does indeed work, and it would allow us to programmatically declare gradients which is cool. But, instead of using the filter first and the image as a fallback, declaring a background-image overrides the filter and it uses that. Since we definitely still need image fallbacks, we might as well not use this at all.

If you don’t need image fallbacks (just a solid color will do), using filter probably is a good idea.

Reader Ed Lerner writes in to say that even though filters only work with hex values, you can still get alpha transparency by prefacing the hex value with the amount of transparency from 00 (0%) to FF (100%). Example:

rgba(92,47,90,1) == #FF5C2F5A
rgba(92,47,90,0) == #005C2F5A

“Stops”

The WebKit and Mozilla syntax for gradients both incorporate “stops”. A stop is an optional additional declaration that includes a point and a color. This means the gradient wont just start at one color and end at the other, it will fade to the stop color first, and that stop color will fade to the end color. More than one stop can also be used.

Saving HTTP requests

Using Firebug and looking in the Net tab to see all the resources used by the page, we can see the advantage.

The above screenshot is Firefox 3.6. We can see that the gradient fallback images are NOT loaded, which saves an HTTP request.

However using Firefox 3.5.8, the fallbacks are loaded.

We don’t save any HTTP Requests in olders version of Firefox (This is 3.5.8 on Vista). The gradient fallback images are still being loaded (and used).

It gets a little more iffy in WebKit browsers.

WebKit browsers WILL use the CSS3 property to render the gradient, but at the same time, still load the fallback images, so no HTTP requests are saved. The only advantage is the programatic declaration of color.

UPDATE (August 9th, 2010)
As of this date, Safari 5.0.1 is still loading the fallback images, but Chrome 6.0.472.25 dev now joins the party of browsers that (awesomely) don’t load the fallback image.

UPDATE (April 1st, 2011)
Safari is at 5.0.4 and is still loading fallback images. Opera 11.10 does the right thing out of the gate by not loading fallbacks.

UPDATE (July 20th, 2011)
Safari 5.1 no longer loading fallbacks =)

Doing it by the numbers

The speed gained by losing an HTTP request, to me, is the biggest advantage. The more I learn about web performance it seems to me keeping those down is the #1 way to improve page load time. However there is another advantage to using CSS3 gradients, and that is that these gradients are created programmatically through numbers. Need to adjust some colors? Just adjust some numbers. No need to bring a big image editing program into the picture. This makes maintaining the site easier, as well as opens up doors for adjusting values on-the-fly. I imagine JavaScript libraries will begin to get the ability to animate these values soon enough, which will be pretty darn cool.

Ooooh Stretchy

When using an image for a gradient, it is declared as a CSS background-image and then repeated (you can often get away with a 1px slice, which is very efficient, size wise). The result though is that a static portion of the background is gradientized, and any overflow to that is flat color. Sometimes that works perfectly. Sometimes though it would be cool if the gradient stretched the entire height or width of the box. That is another thing CSS3 gradients can possibly be useful for:

So the big question is… is it really worth doing right now?

My answer on March 2nd, 2010: I’m thinking it’s pretty darn close. If the numeric representation is a big deal to you, then I say yes you should start using them. If the speed is the only reason you would, then just realize that the only browser that it will help in is Firefox 3.6+, so you might wanna wait a bit on that.

My answer on April 1st, 2011: Pretty much yes, go for it, especially linear gradients. Linear gradients are more solid cross browser and browsers that don’t support them are dropping in usage relatively quickly. Of course it depends on the exact use case, but typically a gradient is a visual nicety and thus a fallback of a solid color or image isn’t such a big deal.

Additional Resources

Wire Frame – Web

Library Site Design: Wireframes

 

Nov18by Thanks – Joseph Gilbert

Our design principles for the Library site restructuring left us with a lot of tricky design issues to tackle, and we also needed to make sure we were addressing organizational stakeholder needs in addition to our researched user needs.  Reviewing the ways that other websites approach similar problems proved informative (such as those in eduStyle’s Noteworthy Sites list), though most other library sites contained the same complex, tabbed search boxes, obscure navigational labeling, and physical location focus that we hoped to avoid.  After many conversations with Erin, reviewing organizational needs based on Erin’s interviews, considering our user personae, and studying our analytics data, I produced the following wireframes and presented them to our stakeholder community (Nov. 16, 2011).

Home

Library Home Wireframe

The home page design has obvious paths for the “library as research hub” and “library as service space” user populations, a streamlined four-item main navigation (replacing a building-based navigation), content for first-time or curious users, and a cross-cutting series of “utility” navigation menus in the footer.

Home (with menu)

Library Home with Menu

“About the Library” employs a “mega-menu” that helps us structure content in ways that a traditional drop-down menu does not. Here, we guide most users to their likely destination of “Libraries & Labs”.

Libraries & Labs

Libraries & Labs Wireframe

The Libraries & Labs page puts the focus on space vitals (like hours and contact info) while allow each space to embed a blog feed or similar content for space-specific and time-sensitive user communication. The user is able to filter spaces by certain criteria, such as which libraries are open.

 Exhibits & Collections

Exhibits & Collections Wireframe

The Collections page puts a strong, renewed emphasis on our named and thematic collections, per our design principles, to encourage not only easy access by our local research community, but also visibility to scholars and enthusiast around the world.

Services

Services Wireframe

The Services page meets our design principle goal of providing cross-organizational access to services. The hierarchical headings help us avoid a “laundry list” approach to services while still highlighting the breadth and depth of expertises offered by the Library.

Our Organization

Organization Wireframe

The “Our Organization” page, replacing departmental listings, gives users (more likely to be at other university libraries or prospective employees than our local students) to get the same sense of activity and personality that our Libraries & Labs page employs for those units not linked directly to physical spaces.

 

offline

Hot in web standards: May 2012

Hot in web standards: May 2012

By Lea Verou on May 31, 2012 | 3 comments

In the first of a regular series of reports, Lea Verou summarises the latest need-to-know developments in the fast-moving world of the Working Groups …

May 2012 brought many exciting developments in web standards, across a number of different Working Groups. Here, in the first of a regular series of reports, I’ll sum up the hottest topics and emerging trends every professional web designer needs to know about. If any of the concepts seem unfamiliar, you can might want to begin by reading the 8 biggest web standards myths, debunked. Otherwise, let’s get started!

ADVERTISEMENT

Blending modes and filters are coming to CSS

Ever wanted to blur an HTML element? Greyscale its contents? Use Photoshop-style blending modes on it, like “Multiply”? There are two new proposals that do exactly this:

These are not entirely new concepts, they have been possible in SVG for a long time. However, these new specifications bring those effects to HTML content as well. In addition, they are introducing a couple of simple shortcuts, that eliminate the need of linking to an SVG file that contains the effects. For example, to blur an element, you simply do:

  1. filter: blur(10px);

Filters also solve the common problem with CSS box-shadows which don’t follow the transparency of the element, but are always rectangular (see image). CSS filters can produce true drop shadows that fully follow the form of the element, accounting for non-solid borders, semi-transparent fills, pseudo-elements etc. You can play with a dabblet comparing the differences here.

 

Blending modes are equally simple to apply: 

  1. blend-mode: multiply;

There are going to be ways to selectively apply blending modes to parts of the element, such as only the background or shadows, but the syntax for this is still under discussion.

Filters are already supported by Chrome (behind a -webkit- prefix), so you can experiment with them all you want. Blending modes are newer and have no implementations yet. However, once they get a few implementations you can start using them immediately, as they both degrade quite gracefully.

Both specs are developed in the FX task force (FX TF), which is a joint effort between theCSS WG and the SVG WG. The FX TF focuses on developing new specifications that apply to both CSS and SVG as well as merging and simplifying existing technologies that could apply to both (such as transforms).

The responsive images saga

“Responsive images” is a term used to describe a number of approaches to conditionally load different image files on an <img>, based on the capabilities of the client (eg screen size, pixel density etc).

Lately, there has been a lot of discussion around standardising responsive images. After a misunderstanding in the WHATWG mailing list, a group of developers formed a W3C Community Group to discuss the issue. After a lot of back and forth, they decided that the best solution would be a <picture> element, containing one or more <source> elements, as well as an optional fallback (eg an <img>). One of the biggest benefits of this approach is consistency, as it’s on par with other HTML5 media elements, such as <video> and <audio>. According to most authors, it’s also a more elegant and easy to understand syntax.

Unfortunately, it turned out that, despite the aforementioned benefits, their proposed solution was harder to implement as it conflicts with the work performed by the lookahead pre-parser, a technique employed by every rendering engine to download assets faster, before even proper parsing of the content. In addition, it was advocated that media queries are not the best way to select which assets to load. For example, if we have an iPhone 4 Retina display with a high pixel density, but said iPhone is currently on a data roaming internet connection that costs €3/MB, do we load high- or low-res images? Media queries won’t help here and as someone who uses data roaming a lot, I don’t think such use cases are negligible.

For these reasons, WHATWG settled on a srcset attribute instead. A lot of author outragefollowed that news, but at the time of writing, WHATWG is still reluctant to reverse their decision. Furthermore, rumours are circulating that Apple has already implemented srcset in WebKit, pushing WHATWG towards it.

 

There’s been a big spat over responsive images but WHATWG is unwilling to reverse its decision
There’s been a big spat over responsive images but WHATWG is unwilling to reverse its decision

 

CSS Alignment module

In the past few years, it became clear that CSS layout was lacking. Floats and CSS tables were not built for laying out web applications. To deal with this, the CSS WG authored a number of different layout modules, such as Flexbox and Grid Layout.

These new modules are finally on par with the layout managers traditionally used in native applications. However, fantasai noticed that they each introduced different mental models and syntax for alignment, even though this could be shared across all layout-related CSS modules. To rectify this, she started a new draft that attempts to merge all these different models into one: CSS Box Alignment Module Level 3. It’s still at a very early stage, but it’s showing a lot of promise.

Flexbox is on its way to Last Call, a milestone that will also incorporate the new alignment properties.

CSS prefixes, again

A few weeks ago, Opera’s leaked decision to actually implement some -webkit- featuresstirred the CSS prefixes drama again. The issue is multi-faceted and it could even be said that it’s one of the worse situations the CSS WG has ever faced. The main problem is that every proposed solution suffers from at least two of the following four problems:

  1. Does not allow the CSS WG to get enough author feedback on experimental features (eg constraining experimental features only in non-stable browser builds)
  2. Does not allow the CSS WG to change the features because any change will break too many existing websites (the current situation)
  3. Does not allow authors to target specific implementations, which is a problem since experimental implementations can (and should) be vastly different (dropping the prefixes falls in this category)
  4. If authors are allowed to target specific implementations in an opt-in fashion, they don’t handle it responsibly, turning the system into a popularity contest (the current situation).

At the moment, it seems almost impossible to find a holy grail solution that will address all of the above. Florian Rivoal from Opera took a shot at it, with a proposal that gained some traction, as it almost eliminates both #3 and #4. Unfortunately, it still suffers from issue #2, so it was rejected.