Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
21st March 2014

Next-gen CSS: How to use CSS filters, CSS shaders and CSS text effects pt1

Even though HTML5 and CSS3 still haven’t landed fully in all browsers, the W3C and browser developers are already looking to the future

Next-gen CSS: How to use CSS filters, CSS shaders and CSS text effects  pt1

Even though HTML5 and CSS3 still haven’t landed fully in all browsers, the W3C and browser developers are already looking to the future. Historically, the web has always been a work in progress, and code stability and true cross-browser standardisation have always been more of an exception than a hard-and-fast rule.  

“Don’t think of the future as an excuse for more and better eye candy – think of CSS as part of a standard web toolkit you can use to build all kinds of new experience”

From that angle, the current proposals are more of the same. The difference is that the emphasis is shifting from fixed media decorated with CSS effects, to open-ended designs that are rendered live and look suspiciously like low-level game coding and animation – but instead it’s applied to text and images, rather than game characters.

So the big change is that CSS is no longer just about design. Google and Mozilla Corp are touting full browser-based operating systems, and products such as the Google Chromebooks are breaking web technologies out of the desktop and mobile browser ghettos and into much more custom hardware. There will be more of this in the future, and CSS will become even more of a generic app development environment than it is already. So don’t think of the future as an excuse for more and better eye candy – think of CSS as part of a standard web toolkit you can use in order to build all kinds of new experiences.

The catch is that for now, it’s not so standard. Some of the possible developments are still being drafted and debated. Browser support is somewhere between experimental and non-existent – and with many designers still playing catch up with CSS3 and HTML5, there’s still plenty of scope for creative surprises with established technologies that have been around for a couple of years.
To give you both sides, we’ll look at the best of the old and the new.

There are three main areas to watch with CSS; 3D effects and image filtering, text effects, and layout. 3D has already made an appearance with CSS3 3D transitions – and the good news is that WebGL and browser support for these transitions is good.  Although, WebGL is still catching up, because it’s technically tricky and waiting for rock-solid driver support.

CSS 3D effects embeds a WebGL API in CSS to give you powerful new possibilities. The programming model will be unfamiliar to most web designers, so the learning curve isn’t trivial. But once you master it you can animate, explode, relight and distort entire <div>s, or warp entire pages. You can also create unique custom transitions and animations, and embed them in the usual CSS/DOM event framework to create new UI models. CSS filters give you a set of 2D image effects, such as blurring, brightness and contrast, and hue/saturation, for images. These effects are virtually identical to many of Photoshop’s most basic filters, but with only some slightly tricky programming, you are able to animate them. On top of that, you can combine them with various other next-gen CSS techniques to give yourself countless more options to experiment with.

The latest text effects expand the potential for stylish typography and more sophisticated letter stylings. For example, now designers are able to create cool 3D and embossed/debossed looks. You’ll have seen some of these online already, but they’re so good they’re always worth a deeper look. Because this is CSS, you can apply animated effects to individual letters buried in a <span> to create slicker and more sophisticated versions of those old animated Flash text effects.
The new layout options are possibly the most experimental of all, and as a result have the least reliable browser support. The aim is to make layout code smart and responsive, removing the need for pixel-level position hacking. Elements place themselves around a page with built-in intelligence and with platform-specific awareness. You can start to write CSS that fits the content into many different mobile and desktop form factors with automated reflow and positioning.

Browser support race

Next-gen CSS: How to use CSS filters, CSS shaders and CSS text effects  pt1

Red = No | Yellow = Partial | Green = Yes

What are CSS Filters and Shaders?

Next-gen CSS: How to use CSS filters, CSS shaders and CSS text effects  pt1

CSS filters have been in WebKit since 2011. They’re an easy way to create basic photo editing effects with a few of lines of code. You can control blur, grayscale, drop-shadow, sepia, brightness, contrast, hue, saturation, opacity, and colour inversion. If you’re new to filters, visit the Adobe CSS FilterLab at adobe.ly/14IiMQd to experiment live with filters, and to see how little CSS you need to create impressive results.
CSS shaders take filters a step further by giving you an entry point for you to create your own custom filter code. Instead of one of the pre-made filters, you use a new kind of filter called custom. Embedding the filter is easy – you add some boilerplate code to set it up, and it should work in most WebKit browsers.

Chrome, which now uses Blink, needs some special setting up before you can get any custom filters to work. Type chrome://flags into the address bar, and enable everything you can find that mentions WebGL or experimental CSS. The flag names change between releases, so there’s no standard go-to way to make sure that shaders are working. Even then, support also depends on your graphics card and drivers – some smaller Macs don’t support shaders, even though in theory Chrome does.

But what are shaders? How do you create code for them? You need to embed links into two files to set them up. 3D coding is complex, but the simple summary is that everything is made of a mesh of triangles. The .vert or .vs vertex shader calculates the positions of each triangle vertex. It uses a 4D vector format that simplifies rotations. The .frag or .fs fragment shader adds textures, colours, and lighting to the triangles. The CSS blends the two and the browser does the difficult calculations needed to create a 2D view into a 3D scene.

001    /* Simple overdone WebKit filter example     */
002.anelement {
003 -webkit-filter:
004 saturate(1000%)
005 blur(20px)
006 drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5))
invert(100%);
007 }
008 /* Custom opacity filter example */
009.anelement {     
010 -webkit-filter: custom(url(shaders/    vshader.    vert)    /* The vertex shader file */ 
011 mix(url(shaders/fshader.frag)         
012 /* The fragment shader file */
013 normal source-atop),             
014 /* Don’t change this */    
015 50 50, /* The number of     triangles */
016 opacity 1);            /* You can change this */
017 }
018 /* Save this as vshader.vert  it does     nothing     to the vertices */ 
019 void main() {
020 gl_Position = projectionMatrix *
021          modelViewMatrix *
022          vec4(position,1.0);    /* Don’t     change the     position */
023 }
024 /* Save this as fshader.frag  it reads     the     opacity and applies     it to the color     matrix */
025 uniform float opacity;        /* A     uniform is applied to     the whole scene */
026 void main() {
027      gl_FragColor = vec4(1.0,  / R028

Working with text effects

Next-gen CSS: How to use CSS filters, CSS shaders and CSS text effects  pt1

Although you could potentially use custom shaders to texture text, the effort would not be a small one. Likewise, you could pre-render the text in Photoshop and drop it in as an image but keeping the text as text. Applying a texture will score you a number of wins, not least in responsive designs.

The secret is to create a PNG24 file with transparency and apply it as an empty <span> on the <div> with the text. The rendering engine doesn’t clip the span, as you’d expect. Instead it loads the image and blends it with the text, because it’s actually rendering the two superimposed elements twice, in order. If you use a PNG with black/white and no grey, the text is textured, but the background isn’t. Otherwise, you get an interesting blend.
The image can be expanded to fill the text box, but if it’s too big it will show over the edges of the text unless you clip it. The code here uses simple absolute pixel dimensions. Production code would include extra logic to make it intelligent and responsive.

001 /* First the HTML, with a dummy span */
002 <div class=”textured”>
003    <h1><span></span>Textured</h1>
004 </div>
005 /* Now the CSS *
006 .textured {
007    background: #000;
008    width: 700px;
009 }
010 .textured h1 {
011    font: bold 1000%/100% “Helvetica”, Arial,     sans-serif;
012    position: relative;
013    margin: 0;
014    color: #fff;
015    letter-spacing: -6px;
016 }
017 .textured h1 span {
018    background: url(text2.png);    /* Load     the texture PNG */
019    position: absolute;
020    display: block;
021    width: 700px;
022    height: 160px;
023 }    
Tags:
  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.