Preview & compare Go! Duration: 1 second Library Import Export Click on a curve to compare it with the current one. To import curves, paste the code below and click “Import” Copy the code and save to a file to export Import Close

pointer-events は要素がいつポインタイベントの対象であるかを制御するプロパティです。このプロパティは dynamic pseudo-classes(:hover, :active, :focus)、リンクおよび Document.elementFromPoint() など他の hit testing に適用されます。 CSS Basic User Interface Module Level 3 Editor's Draft 29 September 2011 前回の記事同様、Editor's Draft からなのでここに記された情報は最新でないかもしれないので注意してください。 さて、このプロパティの説明を最初に書きましたが、何のことだか良くわかりませんよね。それもそのはず、このプロパティの値のほとんどが SVG only ということで SVG にしか設定することができませ

background: linear-gradient(); /* W3C, IE10+, FF16+, Chrome 26+, Opera 12+, Safari 7+ */

はじめに iPhoneやiPadなどiOSに組み込まれているmobile SafariでJavaScriptを使ったアニメーションを動かすと動作が遅くなる事があります。 そこで、CSS3のアニメーションを利用して軽快なUIを実装しようという風潮が高まっているのですが、実はすべてのCSS3アニメーションがmobile safariで軽快に動くという訳ではないようです。 CSS3のアニメーションが軽快に動く(と言われている)理由 結論からいうと、safariというソフトウェアの力だけでなく、iPhoneやiPadのハードウェアの力を借りられるからです。 そういった、ハードウェアのことをアクセラレーターと呼ぶようです。詳しくは参考ページをご覧ください。 ※参考 Hardware acceleration – Wikipedia, the free encyclopedia アクセラレータとは

404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved

Ever since Lea Verou mentioned about the possibilities of CSS3 Gradients, I have been using them in various shapes and sizes as a replacement for background images. I recently worked on a project which uses a bunch of circles as a decorative background. gf3 suggested that the circles would look much better like bokeh. Today, I finally got down to creating them. Result Design of the Bokeh I referre

表を見てもらえばわかると思いますが、IEはほとんどサポートされていません。CSS3を使用するにあたって一番の壁がIEです。IE9でHTML5とともに対応させるとのことですが、それでもバージョンのシュアがあがってくるまでは扱いが難しいと言わざるをえません。 しかし、最近になって『Progressive Enhancement』という考え方が広まってきています。これは『新しい技術を積極的に利用してサポートブラウザのインタラクションの強化、ブラウザを使うユーザー体験の向上』を重要視した考え方です。新しい技術をブラウザのサポート不足のため導入できない、同一表示や機能を前提に制作しなければならない、といったクロスブラウザ考え方は、プラットフォーム（デバイス）の多様化している現在にはそぐわない、ということから広まってきたようです。 しかし、アクセシビリティが無視される制作方法も問題となることでしょう

border-imageプロパティは、画像ボーダーについてまとめて指定する際に使用します。 border-imageプロパティでは、 border-image-source、 border-image-slice、 border-image-width、 border-image-outset、 border-image-repeatの各プロパティの値を、まとめて指定することができます。 省略された値はそれらの初期の値に設定されます。 現在のところ、個別のプロパティをサポートしているブラウザは無いようなので、画像ボーダーを実現する際には、border-imageプロパティを利用するのが一般的です。 border-imageプロパティでも、border-image-outsetの値はブラウザでサポートされていないようです。 画像は上下左右それぞれのボーダー用に４枚必要となるわけではなく、１枚

先日、CSS3入門の手始めとして、border-radius を使ってみた。今日はその続き。border-image を試してみる。 border-image は border-radius と同様、CSS3の新しいプロパティで、ボーダーに画像を適用する。「ボーダーに画像」というのがいまいちピンとこなかったのだが、使ってみるとこれはなんとも便利だ。 デモページはこちら。 今回は素材として画像を使うが、適当な画像ではちょっとわかりにくいと思ったので、なるべくわかりやすいサンプル画像を用意した。 基本的な使い方 基本的な使い方は次のようにする。 .borderimg01{ border-image: url("border-image.gif") 40 / 40px stretch; -moz-border-image: url("border-image.gif") 40 / 40px st

Create now your custom border image CSS Border image generator allows programmers and developers to draw an image on the borders of an element. It provides room for efficient and perfect design. It is very complex to do it by yourself, you need this generator to assist you and it is a bit frustrating to properly take by hand. Though it is tricky, it allows users to create flexible borders with a s