The SVG Working Group has published a Working Draft of Scalable Vector Graphics (SVG) 2. This specification defines the features and syntax for Scalable Vector Graphics (SVG) Version 2, a language for describing two-dimensional vector and mixed vector/raster graphics. Although an XML serialization is given, processing is defined in terms of a DOM. Learn more about the Graphics Activity.

One of the most exciting perks of using Adobe’s Edge Animate is the seamless integration with new, exciting CSS features that I didn’t even know existed until exploring Edge Animate further. This tutorial shows you how to make a 3D particle effect, using just a few ellipses, no additional plugins and a special “blur” filter made accessible in Edge Animate and CSS3.

This tutorial explains how to utilise a number of features in Edge Animate, from creating shapes and manipulating them using filters, to grouping them as Symbols to move multiple elements quickly and efficiently, rather than tweening individual particles.

Once you’re done, you can use this as a background for a web-based gallery banner, and perhaps layer content between your new particles; or even as a full-screen background for your website, constantly moving slowly to give your design a really subtle yet dynamic feel!

What effects have you created in Edge Animate? What would you like to be able to build? Let us know in the comments.

Featured image/thumbnail, particle image via Shutterstock.

The WordPress Admin Customizer – only $16!

In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about accessibility, CSS architectures, and web printing.

Here are the links for the week:

The Treehouse Show on iTunes!
https://itunes.apple.com/us/podcast/the-treehouse-show-hd/id623064192

Pixi.js
http://www.goodboydigital.com/pixi-js-is-out/

Sublime Web Inspector
http://sokolovstas.github.io/SublimeWebInspector/

Intro.js
http://usablica.github.io/intro.js/

CSS Architectures: New Best Practices
http://www.sitepoint.com/css-architectures-new-best-practices/

Desant
http://desantapp.com/

Color Oracle
http://colororacle.org/

Printing the Web
http://drublic.de/blog/printing-the-web/

Each week, we’ll release:

- New episodes of ‘The Treehouse Show’ – up to date news and tips on web design, coding, and more.
- ‘Quick Tip’ videos – these are short how-to videos on today’s most relevant web technologies.
- and much more!

The post Accessibility, CSS Architecture, and Web Printing | Treehouse Show Ep 34 appeared first on Treehouse Blog.

There are several ways to make navigation responsive, and usually the solution we need is quite straightforward. But despite the apparent simplicity, there are many underlying factors which, when thought through and implemented properly, can make a simple solution even better without adding more complexity to the user interface.

One of the problems I’ve encountered while building responsive navigations is that browsers currently don’t support CSS3 transitions to a height which is defined auto. Most of the time, we shouldn’t use fixed height either because the height of menu items might not be the same in all browsers, and the number of items may change. I also always try to reduce the weight of pages I build, so I’ve been wanting a solution that doesn’t require a big library such as jQuery to work.

Today, I’m pleased to introduce Responsive Nav, a free and open-source JavaScript plugin that solves these problems and more in one tiny package. It’s released under the MIT License, so you can use it in all of your projects for free and without any restrictions. The solution is not one size fits all, nor is it meant to be. But for those who are looking for a solution that does one thing well, it’s definitely a good choice.

The official site, view live at responsive-nav.com.

Features

Responsive Nav is a tiny JavaScript plugin which weighs only 1.6 KB minified and Gzip’ed, and helps you to create a toggled navigation for small screens. It uses touch events and CSS3 transitions for the best possible performance. It also contains a “clever” workaround that makes it possible to transition from height: 0 to height: auto, which isn’t normally possible with CSS3 transitions.

• Simple, semantic markup.
• Weighs only 1.6 KB minified and Gzip’ed.
• Doesn’t require any external library.
• Uses CSS3 transitions and touch events.
• Removes the 300 ms delay between a physical tap and the click event.
• Makes it possible to use CSS3 transitions with height: auto.
• Built with accessibility in mind, meaning that everything works on screen readers and with JavaScript disabled, too.
• Works in all major desktop and mobile browsers, including IE 6 and up.
• Free to use under the MIT license.

The official demo, View live at responsive-nav.com/demo.

How It Works?

Responsive Nav is the successor of TinyNav.js which was released in 2011. While TinyNav worked so that it converted a regular navigation to a select menu, Responsive Nav only hides the original navigation and adds a toggle which opens and closes it. Responsive Nav doesn’t basically alter the html structure of the document at all, so it’s in that sense a much simpler solution.

Responsive Nav works by calculating in the background the max-height needed to fit all the menu items. When the user taps the navigation toggle the plugin uses CSS3 transitions to transition from a height that is set to 0 to the max-height it calculated earlier. Responsive Nav also attaches a touchstart event listener to the toggle, which makes it possible to remove the default 300 ms delay that happens when using click events.

Why Choose This Over Another Solution?

Responsive Nav is lightweight and doesn’t depend on any external library. The navigation opens instantly on touchstart — no more 300 ms delay on touch devices. It’s also (as far as I know) the only responsive navigation plugin out there that uses CSS3 transitions with variable height (although correct me if I’m wrong). Responsive Nav is also built with accessibility in mind, meaning that everything works on screen readers and with JavaScript disabled, right out of the box. Finally, Responsive Nav has been tested to work on 60+ mobile and desktop browsers, so that you would’t have to worry about browser support. See the full list of tested platforms.

Demo And Download

• Official website, including instructions (works as a demo, too!)
• Live Demo
• Download (ZIP archive includes seven examples)
• GitHub repository

(al) (ea)

© Viljami Salminen for Smashing Magazine, 2013.