html5

Create slick HTML5 animations | Tutorial

Sep 162013

In 2013, it’s time to sit back and relax. Modern browsers have several dedicated animation technologies built in, which run at 60 fps. Now is the time to forget about the past and start building UI experiences with tasteful animations that help the user feel at home. I would like to take you on a guided tour of the four animation technologies the modern web has to offer to help you decide which one is right for your project.

Let’s start with the easiest to use declarative technology: CSS3. No need for JavaScript here, just plain old CSS, with a few modern tricks.

CSS can be used to declare animations using two basic properties: transition and animation. The transition property tells the browser to compute intermediate frames between two states, each defined by its own CSS. The animation is triggered when the CSS of the element changes. For example, because you programmatically changed its class or because a :hover CSS has kicked in.

MORE: Create slick HTML5 animations | Tutorial | .net magazine.

Turn Your Browser into a Notepad With a Single Line of HTML5

interface, Tech News 288 Responses »

Feb 052013

If you ever need a quick scratchpad to just write, not save what you write, but just write, you can quickly turn your web browser into an ultra-basic notepad with a single line of HTML.

This clever trick comes from developer Jose Jesus Perez Aguinaga who says that “sometimes I just need to type garbage. Just to clear out my mind. Since I live in the browser, I just open a new tab and type”

data:text/html, <html contenteditable>

Thanks to the HTML5 contenteditable attribute and the modern browser’s ability to handle data URIs, your browser is now a notepad — just click to type.

MORE: Turn Your Browser into a Notepad With a Single Line of HTML5

Adobe’s New ‘Edge’ App Suite Doubles Down on HTML

Tech News, Web Design 393 Responses »

Sep 262012

Adobe may be best known among web developers for its much-maligned Flash Player plugin, but in recent years the company has begun shifting its efforts away from Flash to open web tools like HTML, CSS and JavaScript. Now Adobe is launching a new suite of apps for web developers working with the latest web standards.

The new Adobe Edge suite of HTML5 development tools includes Edge Animate 1.0, a tool to create HTML, CSS and JavaScript-based animations, and Edge Inspect (formerly known as Adobe Shadow), a handy tool for testing your sites on multiple devices at once. There’s also Edge Code, a fork of the Brackets code editor that’s now included in Adobe’s Creative Cloud suite.

As part of the announcement at Adobe’s Create the Web conference in San Francisco the company also showed off a demo of the still-in-development Edge Reflow, a new tool for working with responsive design layouts.

MORE: Adobe’s New ‘Edge’ App Suite Doubles Down on HTML | Webmonkey | Wired.com.