README.md CSS EXPLAIN Think of it like SQL EXPLAIN, but for CSS selectors. Usage cssExplain("li .item") { "selector": "li .item", "parts": ["li", ".item"], "specificity": [0, 1, 1], "category": "class", "key": "item", "score": 6 } Results sel... 続きを読む
iPhone, WebApp, CSS, 開発iOS6も発表されて、あとはNew iPhoneのリリースが待たれる季節ですね。私は3Gの発売時に買い替えて、2年後iPhone4にし、また2年が経とうとしているので今年は新しいのに買い換えようという気持ちです。世間ではAppleのマップでいろい... 続きを読む
Using CSS 3d to make every website into 3d(kind of). It is a bit buggy but you can bookmark the script to your bookmark bar and have some 3D fun on any websites by one single click! The get offset function is not accurate, it looks weird then... 続きを読む
An experiment on creating volumetric clouds with CSS3 3D Transforms and a bit of Javascript. Works on Firefox and Chrome. Move the mouse to rotate around the clouds and mouse wheel to zoom in and out. 続きを読む
Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies Which features do you choose to add to this list? I use the following criteria: Useful to web designers/developers Likely to be eventually implemented b... 続きを読む
counter-incrementを利用しての加算演算。 加算演算といっても加算した数値を表示するだけです。 iPhone Safariでも動くようにlabelにクリック属性を加えました。 Chrome15 : ok Firefox8 : ok Opera11.5 : ok Safari5 : 演算が動かない(原因不明) iOS5 Safar... 続きを読む
CSSの記述法として、ブラウザごとの違いを「Reset」して一から指定するという方法が長らくマジョリティを占めていました。まだまだその方向で書いている人が大半ですが、「Normalize」するという方法を採る人達も増えています。なぜリセットではなくノーマライ... 続きを読む
ブラウザ動作の理解の2回目です。今回はレンダリング・ツリーの更新に絡む、リペイント (要素の大きさ、位置などの再計算) とリペイント (描画) に関する解説を、「High Performance Web Pages – 20 new best practices」 の著者 Stoyan Stefanov のブログ... 続きを読む
ブラウザーは垂直スクロールバーの有無でコンテンツ・エリアの幅が変化するので、常に垂直スクロールバーを強制する需要は結構あり、結構昔から決定版とも言えるテクニックが存在する。 http://www.splintered.co.uk/experiments/49/ がその決定版で、 html { m... 続きを読む
LayerStyles v 0.1 just like your favorite graphics editor but in your browser. And it creates CSS. 続きを読む
PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features. Learn More Try the Demo This quick demo shows just a few of the CSS3 properties PIE can render. Use the controls to adjust the CSS3 appl... 続きを読む
wonder webkit wondering uses for CSS3 3D transformations A tribute to the awesome wonder-wall by tha.ltd. And a demo of WebKitCSSMatrix. The wonder-wall effect is inspired by this great example, the Javascript Matrix library used is this, and... 続きを読む
Design is based on the inspiration of past accomplishments. On that foundation, we can build upon those achievements to shape the future. Design is about life — past, present and future — and the learning process that happens between birth ... 続きを読む
Another CSS framework?! Yup, ’fraid so, but this one’s different… It combines years of my best dev tips, tricks and practices in one handy file. inuit.css keywords Progressive Flexible Mobile Tablet Sensible Extensible Accessible Pragmatic... 続きを読む
An alternative theme for gitweb, strongly inspired by GitHub Dependencies git web interface version 1.7.4.2 (though it may work in older versions, too …) Install Just copy the CSS-file gitweb.css into the gitweb folder. Best practise is to r... 続きを読む
Dismiss Octotip: You've activated the file finder by pressing t Start typing to filter the file list. Use ↑ and ↓ to navigate, enter to view files. 続きを読む
CSSでDOM要素に対してアルファフィルターを適用させたいときは、クロスブラウザを意識すると次のような記述になると思います。 もうすこし古いMozilla系ブラウザを対象にするなら-moz-opacityの定義も追加してあげるとことになりますが、 今回はIEに絞った話の... 続きを読む
ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行の... 続きを読む
ミニブログの隆盛以降ウェブ上でよく見かける吹き出しをCSSで作るお話。単色のものはかなり前に書いた。今回はそれに枠線をつけてみよう!みよう!みよう! View Demo: Bordered Speech Bubble 枠線は単なるsolidなborderで少し角を丸めただけ。 尻尾を付ける :... 続きを読む