All posts tagged ‘CSS 3’

File Under: CSS, HTML5

Amazon Embraces HTML5 for New E-Book Format

The new Kindle Format 8 uses HTML5 and CSS for better looking books and graphic novels

Amazon’s new full-color Kindle Fire tablet will arrive next month and with it will come a new e-book format that uses web standards to take advantage of the Fire’s new and improved features.

The new format, Kindle Format 8 (KF8), uses HTML5, CSS 3 formatting rules, embedded custom fonts and SVG graphics to create a richer toolset for book designers. It also means that if you can build a website, you can build a book.

KF8 isn’t the first e-book format to use HTML under the hood. Both EPUB and Mobi — the current Kindle format — are both built on HTML, but KF8 will be the first to embrace nearly all of HTML5 and its associated tools like CSS 3 and SVG.

With KF8 e-book designers can use the same tools web designers have long relied on to handle richer layout options like sidebars, pull quotes, callouts and other common print design elements that don’t translate well to the limited options of current e-book formats. The new tools will be particularly useful for creating better visuals in children’s e-books and graphic novels.

Interestingly, by making it possible to create e-books using the same tools you’d use to create a website, Amazon may be inadvertently making the web the new home of e-books. So far Amazon hasn’t released many specifics surrounding its KF8 format, but if KF8 is essentially a wrapper around HTML5 and CSS 3 then presumably it won’t be too hard to strip away that wrapper. What would be left behind will likely be a “e-book” that’s really just a single page of HTML and CSS — perfect for the web.

When browsers begin to support tools like the proposed Generated Content for Paged Media specification, it will likely be just as easy to markup and release the raw HTML version of an e-book — and let the browser paginate and format it — as it is to put it in Amazon’s storefront where the Kindle can paginate and format it.

Whether or not such an easy dual publishing route is actually possible will be clearer when Amazon releases its updated Kindle Publisher Tools. Amazon hasn’t set a date yet, but you can sign up to be notified when the new tools are available.

Amazon’s Kindle Fire will be the first Kindle to support the new KF8 format, but according to Amazon support for KF8 in the new e-ink Kindles and the various Kindle apps will be added “in coming months.”

See Also:

File Under: CSS

Creating Shapes in Pure CSS

One of the best things about CSS 3 is that it reduces the need to use images in your designs. That means fewer HTTP requests, few bytes to download and fewer files to keep track of. Need rounded corners? That’s pure CSS now. How about drop shadows? Yes, pure CSS. The infinity symbol? Actually yes, you can draw the symbol for infinity with nothing more than a few lines of CSS.

The web developers over at CSS-Tricks have put together a page showing off the basic shapes you can create using only a single HTML element and all the CSS you can eat. Everything from the obvious, squares and circles, to the somewhat trickier five-pointed star or infinity symbol (contributed by developers Kit MacAllister and Nicolas Gallagher respectively).

If you need to add some basic shapes to your site, but don’t want the overhead of image files, the code on CSS-Tricks might fit the bill. The page has been up for some time now, but it’s periodically updated with new shapes so it’s worth adding to your bookmarks. You should, however, keep in mind that not all of the code works in every web browser.

See Also:

File Under: CSS, HTML5, Web Basics

Popular HTML5 Boilerplate Releases v2.0

The developers behind HTML5 Boilerplate have released version 2.0 of their boilerplate HTML, CSS and JavaScript templates for quickly prototyping HTML5 designs.

You can grab a copy of HTML5 Boilerplate v2.0 from the HTML5 Boilerplate website.

Version 2.0 of HTML5 Boilerplate has several significant changes, including ditching the traditional reset stylesheet for normalize.css. Normalize is a bit different in that it retains useful browser defaults and only resets those elements necessary to achieve cross-browser default styling consistency. It’s a minor point, but my favorite part of normalize.css is that it doesn’t litter your dev tools (Firebug, WebKit Inspector, etc) with endless reset rules.

Other new features in HTML5 Boilerplate include support for Respond.js (which helps if your site uses a "mobile first" approach), faster build times (up to 80 percent faster according to the release notes) and, with v2, your IE 6 visitors will now be prompted to install Chrome Frame.

For more details on everything that’s new in HTML5 Boilerplate v2, head on over to the official site and read through the changelog. Perhaps the most refreshing thing about this release, is this note in the FAQs:

Do I need to upgrade my sites to a new version?

Nope. So far there have been no critical bugs within our code that we’ve fixed from version to version. There are some nice changes that reduce your stress, but updating your HTML or CSS to the new stuff is probably more effort than it’s worth.

However, the .htaccess and Build Script you probably didn’t edit and therefore can be dropped into your existing sites with little hassle and likely a significant reward. So feel free to update those, and also update your Modernizr and jQuery versions to the latest versions they have.

See Also:

Adobe Envisions Brave New World of Web Layouts With ‘CSS Regions’

The CSS Regions Galaxy Tab demo

It’s cold here in the Webmonkey offices, Adobe has unveiled a web browser. No, Adobe isn’t really getting into the web browser game, but it does have a few tricks it would like to show off to the world. Adobe’s new demo web browser exists solely to demonstrate the company’s proposed CSS Regions layout tool.

If you’d like to check out the demo browser, head over to Adobe Labs and download a copy. Be sure to open up the included sample pages to see how the HTML and CSS is structured.

Adobe has been working on CSS Regions for some time, trying to develop a set of CSS layout tools that make it easy to build complex, print-style layouts on the web — think text that flows around circular regions, or text structured into shapes. If Adobe can convince browser makers and the W3C to get onboard with the idea, web design might be about to make a huge leap forward. Or backward, depending on how you look at it.

Adobe’s CSS Regions proposal is a back-to-the-future effort to bring some of the layout tools print designers have enjoyed for years to the web.

Typography on the web has improved by leaps and bounds since the dark days of the blink tag and six universal fonts, but it’s still a long way from ideal. Sure there are great ways to serve custom fonts, and you can even use JavaScript libraries like Lettering.js for even more control over your layout. But when it comes to the flow of text around images, pull quotes and other block level elements, well, web typography falls apart.

While web developers have hacked together grids and other print-style layout tools for years, such tools are essentially hacks and limited in their capabilities. But that will change in the near future. The W3C is currently toying with no less than four new grid-based standards designed to handle multi-column text, wrapping text around images and other fancy layout techniques. We’ve looked at the Flexible Box Model, Template Layout (based on Mozilla’s XUL syntax), and Grid Positioning modules before, but so far none are finalized.

Adobe’s CSS Regions is the new entry in the list of layout schemes under consideration. Adobe submitted its CSS Regions proposal to the W3C early this year and it has subsequently been split into two separate but related drafts, the CSS Regions Module Editor’s Draft and the CSS Exclusions Module Editor’s Draft.

CSS Regions shares some similarities with the other proposals (and from what I can tell would play nice with them if multiple proposals end up becoming finalized specs), but goes a good bit further, by abstracting sections of an HTML page into “regions.”

Regions can be both positive and negative space. In other words, you can write CSS rules to flow text into a region — say, as below, a pie graph — or around a region (as in the image of Arches National Park at the top of this post).

Inserting text into regions

Among the interesting layout tools in the CSS Regions proposal are Story Threading, Region Styling and the arbitrary shapes and exclusions concept. Story Threading allows text to flow in multiple disjointed shapes (not just columns) which you can define in CSS and HTML. That means you could easily flow two side-by-side columns of text around an image or a pullquote the way print magazines often do.

The second interesting element is Region Styling, which allows content to be styled based on the region it flows into. For example, if the first few lines of your text fall into one region, you could style it with a different font than the rest, which falls in a different region. Curiously, this part of the proposed Regions spec is not currently implemented in Adobe’s demo browser.

The arbitrary content portion of the draft spec is what allows the layout shown in the screenshots above — flowing content into or around arbitrary shapes.

Lest you think that Adobe is simply trying to improve the web — which may well be true — nevertheless, it’s worth bearing in mind Adobe’s own agenda. We suspect it’s no accident that the company has used WebKit to power the CSS Regions testing browser. WebKit is, after all, the engine that powers the iPad’s web browser.

With Apple banning Flash from its iOS devices, Adobe has little in the way of iPad-friendly tools to offer its big magazine clients. Given that publishers are betting heavily on the iPad’s ability to save their business model, the more iPad tools Adobe can offer, the happier magazine publishers will be. By rolling CSS Regions into WebKit for a demo, Adobe is already one step closer to a toe-hold on iOS devices.

Still, in this case, assuming the W3C pushes forward with the Regions spec, and that browser makers include support in future releases, what’s good for Adobe may end up being good for the web as a whole.

Of course whether or not multi-column layouts on the iPad (or any other web browser) are a good idea is open to debate. Multiple columns combined with scrolling often makes for a reading nightmare. Certainly in the hands of poor designers the results will be ugly, but that doesn’t mean the tools themselves are to blame.

See Also:

File Under: CSS, Visual Design

CSS 3 Brings Iconic Mad Men Titles to Life on the Web

Web developer Anthony Calzadilla has recreated the opening title sequence of AMC’s Mad Men using only CSS 3 animations and some carefully crafted images. The result is an impressive showcase of what you can do with the animation powers available in CSS 3.

Head on over the official Mad Manimation demo and click the “Watch” link. Mad Manimation works well in WebKit browsers, including the iPhone. We also had no trouble watching it with Firefox’s new Aurora channel release.

If you’d like to know how Calzadilla pulled it off (with help from Geri Coady and Andy Clarke), be sure to read his write up on the process behind the animation.

Calzadilla points out that the not-yet-released Animatable would have made the staging and animating process easier. Animatable looks impressive — an online IDE for CSS 3 animations — but sadly it’s not available to the general public just yet. You can see a preview of the project in this video.

And just to head off the Flash fans who will note that they could have built the Mad Manimation demo in 1995 using only gotoAndPlay() and some duct tape, sure, we all know that, but the web has moved on.

See Also: