Introduction to CSS FilterLab

In October 2011, Adobe launched CSS Shaders as a way to implement special film effects on the Web. With CSS, you can apply effects such as saturation, grayscale, fade-down, folding, curl, and even dissolution and explosion to regular HTML elements. This motion has been developed. It has been discussed, updated, and incorporated into CSS Filter special effect specifications. Now it will be added to your browser. CSS Shaders is now called css m Filters, but this is just a different expression.

CSS FilterLab

CSS FilterLab is a browser-based tool that allows you to adjust various CSS filters and view special effects in real time. See figure 1 ). You can use this tool group to combine multiple filters and create animations for them to create a wide array of film effects.

Figure 1. create and apply a filter in CSS FilterLab.

This is indeed a cutting-edge technology when writing this article, so only a few browsers support it. When you open CSS FilterLab in your browser, you will be prompted about how to get the best experience. We spent a lot of effort to make these instructions easy to understand.

Getting started

CSS FilterLab is easy to get started. Open it in the browser and you can Add a Filter from the Add Filter menu.

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

The built-in filter is the default built-in filter of the browser. They provide basic color effects, such as grayscale, dark brown, saturation, or contrast.

The custom filter brings the effect to a new height. Some examples that have been built include effects such as fade, curl, fold, dissolve, and explosion. Custom filters are not included in the browser; they are written by developers themselves. These filters use various filters, which are small programs that support fine-grained control over colors and ry. The shader makes full use of the hardware acceleration function and is often used in the visual effects of games. CSS developers may be unfamiliar with it, and generally need to have a solid mathematical knowledge to develop the coloring tool.

Fortunately, CSS FilterLab comes with some excellent examples of custom filters with the basic shader. One example is Fold, which provides 3D origami effects for HTML elements. See figure 2 ).

Figure 2. Apply the Fold custom filter of HTML elements in CSS FilterLab.

Applied filters expose their parameter controls. This allows you to easily tune various parameters to get the special effects you want. In addition, you can apply multiple built-in and/or custom filters to achieve amazing results.

After you are satisfied with the results, you can save the changes as a preset value. In this way, the configuration can be reused later.

Create special effect Animation

The special effect will not happen on its own. They will appear, from one state to another. In this way, they will be expressive.

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

Pay attention to the timeline and controls at the bottom of the screen. Click any position on the timeline and change the parameters of the filter. This creates a new key frame on the timeline. Click the play button to view the animation running effect. See figure 3 ).

You can add, drag, and drop key frames within the timeline length range, and adjust the animation to get the desired effect.

You can change the animation duration to the right of the timeline by entering the content. It is measured in seconds.

Use CSS FilterLab to create a quick walkthrough of a folding animation. (0: 19)

Code syntax

CSS FilterLab supports creating rich visual effects. You must know that this is done through common CSS, although CSS is very advanced.

At Adobe, we have made great efforts with our partners to provide this technology to open networks. We will not hide it behind a tool.

CSS FilterLab displays the exact code used to implement special effects or animations. The CSS Syntax and CSS Animation Syntax panels at the top of the timeline display what you expect. You can copy this code to your own project to take advantage of these effects. Remember that the CSS Filter has just been applied to the browser.

Create a new custom filter

This is a challenging task. However, if you find complex mathematical operations and coloring devices attractive, you will be very happy to know that CSS FilterLab contains a full-featured coloring tool editor. See figure 4 ).

To create a new custom Filter, first extract an existing custom Filter from the Filter provided in the Add Filter menu. You will notice that the filter of your expenses is displayed in the Forked tab of the menu. Click the "Custom" icon to enter the core of the custom filter.

Now you have full control over the parameters used, their types, and source code of the segment and vertex shader. Your changes will be automatically saved and stored locally in the browser.

You can use OpenGL Shading Language (GLSL) to write these pasters. The content of the coloring tool is not covered in this section, but you can learn more from the GLSL document. Be sure to check the types, methods, and features of the language to maximize the effect of your coloring tool.

Figure 3. The error Panel highlights the problem.

The error Panel highlights in real time any issues in your shader code. This is useful because it allows you to stay in the same context during development and preview. You can also view the running result of the colorant code in real time.

Share and import custom filters

To share custom filters, publish them as gist) from CSS FilterLab to GitHub. The control that executes this operation can be found in the coloring er editor panel.

After the release, share the link with others. They can import your custom filter to CSS FilterLab and use it on their own content. To Import a custom Filter, go to the Add Filter menu, select Import, and use this subject URL.

Open source code

All CSS FilterLab code is available on GitHub for free based on Apache License v2. We look forward to your thoughts, feedback, and contributions to this project.

If you have compiled the shader that you want to distribute through CSS FilterLab, please contribute them to this project. Before checking in any code, take a moment to familiarize yourself with the contribution Guide listed on GitHub.

Next reading

CSS filters and custom filters provide rich creative effects for Web content. CSS FilterLab is just a reference to the possibility of existence. The real value lies in your hands and the special effects you create using this technology.

Think about the new opportunities and expressiveness that filters, ry operations, and film effects can bring to your work. Think about the significance of this for your presentation of various content on large screens, mobile devices, and so many new contexts.

Use CSS FilterLab to learn about modern graphics Web functions and share your thoughts with us. We look forward to learning about the special effects you have created using them.

Adobe's Alan Greenblatt creates a short CSS FilterLab video walkthrough. If you are eager to learn more, this is a good start.

You can also visit html.adobe.com to learn more about Adobe's contribution to make the Web better.