Entries Tagged as 'Uncategorized'

Using PEAT To Create Seizureless Web Animations

April 2nd, 2017 by zoltan · No Comments

Photosensitive Epilepsy should be a concern to anyone creating any type of animated media. As a matter of fact, in order to pass WCAG Level A, a web page cannot “contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds”. Testing this requirement may seem a little daunting at first, but luckily there is a free tool called PEAT that web developers can use to test if their animations and videos can cause an epileptic attack. This blog post talks about how to use PEAT, what it’s limitations are, and how to work around them.

[Read more »]

Tags: accessibility · animation · Color · Cygwin · Uncategorized

Accessible Form Placeholder Text

February 20th, 2017 by zoltan · 3 Comments

Placeholder text is used quite a bit in modern HTML5 forms. It is not meant to replace form labels, but is intended to be a hint about the format of what the form field data should take. While checking the accessibility issues on a recent project, I noticed that placeholder text is sometimes indistinguishable with form field values when using certain screen reader/browser combinations. This post talks about how to work around this issue with just a little bit of JavaScript.

[Read more »]

Tags: accessibility · Forms · Uncategorized

Flex Layout Fail: Fixing Firefox’s Keyboard Accessibility Bug With The CSS order Property

January 28th, 2017 by zoltan · 2 Comments

Firefox, unlike every other browser on the planet, changes the way that keyboard navigation works in designs that use the CSS order property. Since a lot of developers use flexbox, this can create a lot of cross-browser accessibility issues. This article shows a fix for this problem using a small amount of Javascript.

[Read more »]

Tags: accessibility · CSS · flex-layout · order · Uncategorized

How To Fix Transformed Text in HTML5 Canvas In Firefox For Windows

May 10th, 2016 by zoltan · No Comments

The Firefox team has made some unique choices when rendering fonts in the Windows operating system. As a result, certain fonts under 16 pixels in size render really bad in HTML5 Canvas as well as CSS. This blog post shows how you can fix this issue and have clean, transformed typography in any OS.

[Read more »]

Tags: Uncategorized

Creating Alpha Channel JPEGs Using SVG

November 7th, 2015 by zoltan · 2 Comments

sun-alpha-thumb PNGs with alpha channels are great, but they can take up a lot of bandwidth. Alternative image formats such as JPEG-XR, JPEG 2000 and WEBP are more efficient, but they are not supported by FIrefox (and may never be). In comes a full cross-browser solution: SVG files that encapulate a JPEG with an alpha channel. This post will cover how to create these image files a number of different ways, and show how you can animate these images as well.

[Read more »]

Tags: Uncategorized

Augment Photos With CSS3 matrix3d() Transforms

July 16th, 2015 by zoltan · 1 Comment

teaser It’s possible to super-impose dynamic HTML content on top of a photos using 3D transforms to give the appearance that it is part of the picture. However, using a combination of translate3d(), scale3d() and rotate3d() functions to do this is difficult. This article discusses how to use the matrix3d() CSS transform with the Matrix Construction Set to get pixel-perfect 3D transforms easily and without any knowledge of matrix arithmetic. It also discusses the differences between matrix() and matrix3d(), as well as what fallbacks to use for browsers that don’t support transforms.

[Read more »]

Tags: 3d · CSS · CSS3 · matrix · matrix3d · transform · transform3d · transform3d · Uncategorized

Using WEBP/JPEG 2000/JPEG-XR/APNG Now With Picturefill and Modernizr

January 14th, 2015 by zoltan · 11 Comments

teaser WEBP, JPEG 2000, JPEG-XR, APNG … these image formats have features that are not available in the traditional GIF/JPEG/PNG/SVG image stack, like animation, lossy compressions paired with alpha channels and better quality at higher compression levels. However, each browser seems to support only some of these formats. With the <picture> element, along with the picturefill polyfill, you can use these great formats today while using the older formats for an old-fashioned fallback. This blog post will explain how to use picturefill or modernizr to use these formats, why you would want to use these image formats, and what tools you can use to generate them.

[Read more »]

Tags: Uncategorized

Fixing Typography Inside of 2-D CSS Transforms

May 4th, 2014 by zoltan · 2 Comments

If you’ve been using CSS3 Transforms, you have probably seen that sometimes, transformed text that is not spaced correctly, is rendered with jagged edges, and letters are placed correctly on the transformed baseline. Furthermore, transformed text becomes smoother when animating, but about a second after the animation stops, you’ll see it reverts back to its former jaggedy self. This effect is really pronounced in Windows, but also appears in Mac OS X and Linux browsers. What is a typography nut to do? In this article, I present three fixes to this issue using the CSS perspective, filter and outline properties.

[Read more »]

Tags: Uncategorized

Better Web Typography With font-weight, Autohinting and font-feature-settings

September 20th, 2013 by zoltan · 2 Comments

After playing around with the technology for the past two years, I have done research on how to improve the look and legibility of @font-face type. Faux-bolding and faux-italicizing (i.e. “obliquing”) can be easily avoided a lot more easily with new browsers (and in some cases, even older IE!). Fonts that look horrible in Windows can be improved with autohinting. And best of all, advanced features of OpenType fonts, like ligatures, alternative glyphs, and other character variations are almost in all the major browsers (Safari, the only holdout, will have it later this year). Let’s see how we can put this all into practice today.

[Read more »]

Tags: Uncategorized

Cross-Browser SVG Text-Paths Without JavaScript — Even In Older IE.

May 20th, 2013 by zoltan · No Comments

c-is-for-cookie Designers have been using textpaths for years in print, but doing this on the web is a little tricky. SVG, which supports textpaths in modern browsers, is not supported by IE <= 8. Older IE does, however, support VML, another vector markup format that can do textpaths as well. After playing around, I found it is possible to put both on a web page and even code common CSS to style them — all without JavaScript. I’ll explain how we can layout and style textpaths in all browsers (including IE <= 8) as well as what a Bézier Curve is, and a bit of a code that will show how to push text on a path as well tween a textpath.

[Read more »]

Tags: Uncategorized