はてなブックマーク

You would then just set the data-polyclip attribute to those points: <img src="image.jpg" data-polyclip="487, 4, 500, 239, 19, 239, 43, 195" /> Note that the point co-ordinates are comma delimited. If you don’t want to calculate these numbers by hand, you can use your favorite imagemap generation tool to do generate the list of coordinates. Just remember to take the coordinates out of the imagemap

Update (March 9, 2012): I have updated this document to include styling information for Internet Explorer 10. Screenshots of HTML5 progress bars with different styles applied. Details given below. As a web application developer, progress bars are great when you want to show the user that some action is happening, especially when it can take a long time. They can be animated (like the one in Gmail

The above is not an image. It uses Allen R. Walden’s Neon Lights font and cssSandpaper to simulate CSS3 text-shadowing in IE. The box shadows are made with pure CSS in all browsers. CSS3 Box-Shadows are a great to quickly decorate the outside of block-level elements. There are many CSS box-shadow recipes you can use to produce a variety of effects, including simple, glowing and blurred shadows. An

IE's CSS3 Transforms Translator Turn your CSS3 transforms syntax into something IE can understand—without using JavaScript—to get effects like rotation, scaling, and skewing. CSS3 2D transforms allow you to manipulate boxes for effects like rotating, scaling, and skewing, without using images, Flash, or JavaScript. Sadly, IE 8 and earlier don't support CSS3 transforms—but you can get the same resu

Update: April 24, 2011 Since writing this article, I have also discovered a way to implement blurred text-shadows in IE9+. Update: July 13, 2011 You may want to read my subsequent article, which covers using my cssSandpaper JavaScript library to produce multiple blurred and un-blurred text-shadows in IE7+. When IE9 was released, I was really happy to see all the great CSS3 features it supported. 2

The CSS3 matrix() Transform for the Mathematically Challenged Notes: This article was not rendering correctly in Firefox 4.x due to a change in how that browser handles MathML. This issue has now been fixed as of May 1, 2011. If you are not familar with 2D-Transforms, take a look at my other article Cross Browser CSS Transforms – even in IE The CSS3 transform property can do some really cool thing

Using 3D transforms will allow greater control over the transform, but fonts may appear blocky compared to 2D transforms unless the object you are transforming is physically bigger that the size you are transforming to. The show vendor prefixes option will guarentee your transforms will work even on older browsers and devices (e.g. old iPhone and Android browsers). Change HTML and CSS will allow y

When talking about Ruby Annotations, I don’t mean Ruby on Rails, or anything related to the Ruby programming language. I am talking about ruby characters which are used to annotate text with supplementary information. For example if some readers wouldn’t know what the term “WWW” means, we can use ruby annotations to help them out like this: The ruby base (in this case “WWW”) is annotated by ruby t

Updates: May 10, 2013: This article has been translated into Serbo-Croatian language by Anja Skrba from Webhostinggeeks.com. Feb 3, 2009: A bug in Webkit seems to be the culprit in the permissions form example below not working correctly in Safari 4. The code has been updated to work around this bug and the article below has been updated. Thanks to russbuelt for pointing this out. Feb 3, 2009: App

Working example HTML5 Form using Modernizr, webforms2 and my new script, html5Forms. Go ahead … try them out. You know you wanna! Calendars, colour swatches, sliding widgets, client side validation: this is the nirvana that the HTML5 forms module promises. Some would say “So what? I’ve seen this on the web for years!”, and they’d be right. There have been some really brilliant people coding some r

The cssSandpaper JavaScript library looks at the stylesheets in an HTML document and, where possible, smooths out the browser differences between CSS3 properties like transform, opacity, box-shadow and others.  This script is not only useful for developers who want to support CSS3 in IE (which doesn’t support it in IE natively) but in other browsers which implement their own vendor-specific varian

Updates: (March 7, 2013) The examples on this page were missing due to a migration issue when upgrading my blogging software. Thanks to James Wages for pointing this out. (August 11, 2012) The skew() transform no longer works in Firefox, due to not being in the CSS3 specification anymore. Developers must use the skewX() and skewY() functions instead. The examples in cssSandaper, as well as this do

Update: Jan. 11, 2012 This script has been used as the basis of a Modernizr plugin by Jasper Palfree. Examples of font-smoothing and subpixel-rendering as performed by technologies like ClearType. Image Credit: Wikimedia Commons users Pandries and Kalan In an earlier article, I mentioned that Boing-Boing had a few issues when they wanted to use @font-face embedding inside their website. In short,

Updates (Aug 11, 2012): This article has been given a long overdue update to reflect the current state of browser support of @font-face. (Oct 13, 2009): I have written a follow up article which explores SVG fonts, Opera 10 issues, and more (Oct 28, 2010): This article has been translated into Belorussian by movavi. When I told one of my co-workers how excited I was that almost all the major browse