Many of these text properties have been part of CSS since CSS1. Multi column text is currently supported by webkit and mozilla browsers with vendor specific prefixes, and Opera 11+ and Internet Explorer 10 without. @font-face font embedding is supported in IE5+ (EOT format only) IE9+ (WOFF format), Safari 3.1+ (TT and OT formats), Safari 5.1+ (WOFF), Chrome (TT, OT and WOFF), Opera 10+ (WOFF, TT/O

Yes, we <3 Android, too! One of the challenges of an ever-changing digital channel, is that we find ourselves spending more and more time designing for various platforms and form factors. One such platform is Google Android. This doesn’t come as much of a surprise: a survey conducted in June, 2011 found that among consumers who plan on buying a smartphone in the next 3 months, 32 percent prefer an

License: The sole purpose of this file is to help you pitch, design and build amazing software. It can't be repurposed as your own, nor can it be broken apart and used to create similar tools. This iOS 5 Photoshop template makes it easy to mockup retina display iPhone apps. This file now includes countless changes and additions to align to iOS 5. As usual, we’ve painstakingly recreated everything

CSS3アニメーションをはじめ、グラデーションやシャドウやボーダー、テキストやボックスをかっこよくしたり、レスポンシブデザイン用のグリッド、セレクタの使い方など、スタイルシートの制作時に役立つオンラインツールを紹介します。 Animate.css classを付与するだけで、さまざまなCSS3アニメーションが実装できます。 初っ端からオンラインツールじゃないですが、簡単にCSS3アニメーションが利用できるということで。

CSS3 Media Queries 下記は各ポイントを意訳したものです。 はじめに CSS2のMedia typesではscreen, printなどのように特定のメディア用のスタイルシートを設定することができました。CSS3ではクエリを加えることで、さらに効率的にスタイルシートを使用できます。 Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。例えば、大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。 Media Queriesの使い方 まずは、デモページをみてください。 ブラウザのサイズを変更すると、スタイルが変更されます。

width, heightのサイズが分からない要素を天地左右の真ん中に配置するスタイルシートのテクニックを紹介します。 Centering in the Unknown [ad#ad-2] 下記は各ポイントを意訳したものです。 要素のサイズが分かっている場合 要素のサイズが分からない場合 まとめと対応ブラウザ 要素のサイズが分かっている場合 「真ん中に配置するエレメント」と「その親エレメント」両方の高さと幅のサイズが分かっているのであれば、エレメントを真ん中に置くのは簡単です。 「真ん中に配置するエレメント」を「position: fixed;」にし、topとleftを50%、marginのtopとleftをエレメントの半分のサイズでネガティブマージンで配置します。 CSS .centered { position: fixed; top: 50%; left: 50%; margin-t

IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。

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