Tag Archives: HTML5

Introducting Adobe Animate CC, a new era for Flash Professional

Adobe Flash becomes Animate CC and allows output to HTML5 Canvas

 

 

For nearly two decades, Flash Professional has been the standard for producing rich animations on the web. Because of the emergence of HTML5 and demand for animations that leverage web standards, we completely rewrote the tool over the past few years to incorporate native HTML5 Canvas and WebGL support. To more accurately represent its position as the premier animation tool for the web and beyond, Flash Professional will be renamed

Adobe Animate CC, starting with the next release in early 2016.

Read more from the source: Adobe Flash Professional Team Blog

A Visual Guide to CSS3 Flexbox Properties

CSS flex-box sounds like a lot to learn, but we need to start using it right now

 

The Flexbox Layout officially called CSS Flexible Box Layout Module is new layout module in CSS3 made to improve the items align, directions and order in the container even when they are with dynamic or even unknown size. The prime characteristic of the flex container is the ability to modify the width or height of its children to fill the available space in the best possible way on different screen sizes.

Many designers and developers find this flexbox layout easier to use, as positioning of the elements is simpler thus more complex layouts can be achieved with less code, leading to simpler development process. Flexbox layout algorithm is direction based unlike the block or inline layout which are vertically and horizontally based. This flexbox layout should be used for small application components, while new CSS Grid Layout Module is emerging to handle the large scale layouts.

Read more from the source: Scotch

The Gooey Effect AKA Shape Blobbing using SVG

Try this cool effect that uses SVG Gaussian blur, a color matrix and color blend to make two circles join together like drops of liquid

Lucas Bebber is the originator of some of the most creative effects I’ve ever seen on the web. So much so I couldn’t resist

SVG filters have good support, but not all browsers support them being applied to regular DOM elements, notably Safari. However, they do work at least on Firefox and Chrome, even the Android version, and the filter degrades nicely if it doesn’t work. If you absolutely need the effect to work, consider using SVG elements instead of DOM elements.

Read more from the source: CSS-Tricks

HTML5 Boilerplate version 5.0 release notes

HTML5 Boilerplate is out with some great improvements and support dropped for IE6 and IE7

 

HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.

Highlights of version 5 changes:

– Update to jQuery 1.11.2.

– Update to Modernizr 2.8.3.

– Add /.editorconfig file (#1561, #1564).

– Remove IE 6/7 hacks from main.css (#1050).

– Remove IE conditional classes (#1187, #1290).

Read more from the source: html5boilerplate.com

Apple Shows Love for HTML5 with iOS 8

iOS 8 brings critical new features to Apple mobile device browsers including WebGL, Promises, IndexedDB and SPDY

 

Sencha breaks down the new JavaScript and HTML features in latest iOS 8 release.

Apple has been secretive about upcoming features and it is hard to tell if the web really will move forward with these new JavaScript and HTML APIs. What does it mean? Well features like WebGL and SPDY have had uncertain futures. Firefox and Chrome implemented those features over two years ago and no one was certain if Apple would follow suit.

iOS 8 is also significantly faster than iOS7 in every area with a 4x improvement in document.querySelectorAll. iOS 8 also adds better support for GPU rendering which boosts performance of intensive graphical applications by almost double.

Read more at sencha.com

Building Interactive HTML5 Videos with the element

Use chapter markers, preview thumbnails and timeline search to give a rich experience with HTML5 video

 

The HTML5 element makes embedding videos into your site as easy as embedding images. And since all major browsers support since 2011, it’s also the most reliable way to get your moving pictures seen by people.

A more recent addition to the HTML5 family is the element. It’s a sub-element of , intended to make the video timeline more accessible. Its main use case is adding closed captions. These captions are loaded from a separate text file (a WebVTT file) and printed over the bottom of the video display. Ian Devlin has written an excellent article on the subject.

Beyond captions though, the element can be used for any kind of interaction with the video timeline. This article explores 3 examples: chapter markers, preview thumbnails, and a timeline search. By the end, you will have sufficient understanding of the element and its scripting API to build your own interactive video experiences.

Read more from the source: Mozilla Hacks – the Web developer blog