CSS

HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利

2014/07/07(Mon) 12:18

HTML5やCSS3のブラウザサポート状況が確認できるcaniuse.com

http://parashuto.com/rriver/development/can-i-use-beta-integration-with-google-analytics

CSSで2カラムを作ってみる

2014/07/07(Mon) 12:16

CSSで2カラムといっても、その作成方法は様々です。多くのパターンを理解することは、CSSに柔軟性を持たせることに、つながります。

http://kojika17.com/2014/07/two-column-css-layout.html

[CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック

2014/07/02(Wed) 11:47

背景画像をブラウザいっぱいに表示するスタイルシートのシンプルなテクニックを紹介します。

http://coliss.com/articles/build-websites/operation/css/css-responsive-full-background-image-by-sixrevisions.html

コピペで使える！ CSSで凝った背景を作るサンプル集

2014/07/01(Tue) 11:54

CSSの「background-blend-mode」を活用した背景サンプルをたくさん紹介しているサイトです

http://www.lifehacker.jp/2014/06/140630css_gradients.html

タッチデバイス対応CSSボタンのジェネレータ

2014/06/30(Mon) 11:48

以前より、マウスクリックに合わせて動くボタン風のUIを利用していたのですがタッチデバイスにおいてはそうした動作がかえって邪魔になってしまうことやボタンの色やサイズを変える度にアイコン画像が増えてしまうことなどが問題でした。

2.5dBUTTONはそうした問題に対応するために作成しました。フラットな状態をベースに、マウス操作時はhoverででっぱってon_clickでへっこむ動作で、タッチデバイスにもmodernizr.jsを読み込むだけで簡単に対応可能です。

アイコンはフォント(http://kudakurage.com/ligature_symbols/)を利用しているため、retina対応を考える必要もなく、色やサイズの変更も容易です。また、従来のアイコンフォントはセマンティックでないことが一つの欠点でしたが、今回利用しているLigature Symbolsは合字の仕組みを利用しているためその欠点も解消されています。

Takuma.Fさん紹介

http://noht.co.jp/2_5dbutton

[CSS]レスポンシブ対応、スクリプト無し、完成度も非常に高いタブコンテンツを実装するテクニック

2014/06/30(Mon) 11:44

スクリプトは一切使用せず、デスクトップ時はタブコンテンツ、スマフォ・タブレット時はタブをスケールダウンに変更してコンテンツを表示するスタイルシートのテクニックを紹介します。

http://coliss.com/articles/build-websites/operation/css/css-tabs-no-js-by-jakealbaugh.html

[CSS]簡単な記述でアコーディオンコンテンツを実装するフレキシブルボックスを使ったテクニック

2014/06/26(Thu) 11:27

リスト要素で実装した複数のカラムを水平に配置し、各カラムをホバーすると滑らかなアニメーションで伸縮させるflexboxを使ったスタイルシートのテクニックを紹介します。

http://coliss.com/articles/build-websites/operation/css/css-accordion-content-used-flexbox-by-dp_lewis.html

[CSS]動画を背景として表示させ、オーバーレイでコンテンツを配置するテクニック

2014/06/16(Mon) 11:56

動画をブラウザいっぱいに背景として表示させ、その上にコンテンツをオーバーレイで配置するテクニックを紹介します。

http://coliss.com/articles/build-websites/operation/css/fullscreen-html5-page-background-video-by-demosthenes.html

動くCSSのためのメモ。

2014/06/09(Mon) 12:03

なんだかCSSでできる事がどんどん増えてきましたね。以前はJavaScriptを使って実装していた動くコンテンツも、CSSだけで表現されてるのをよく見ます。

http://lopan.jp/css-animation/

[CSS]OS X Yosemiteのように背景が透ける美しいパネルを実装するスタイルシート

2014/06/05(Thu) 11:51

2014年秋リリースのOS X 10.10 Yosemiteで採用予定の背景を半透明のブラーで透けさせる美しいパネルを実装するスタイルシートを紹介します。

http://coliss.com/articles/build-websites/operation/css/css-os-x-yosemite-style-ui-by-fallenartist.html