CSSでの画像切り替えトランジションをいろいろ試せる「Item Transition Inspiration」をご紹介。

画像遷移のためCSSトランジションが用意されており、サイトで使えそうな動きを試す事が出来ます。

小さな画像のスライド・ショー、背景一杯の画像の霧化などデモで確認する事が出来ます。

実際の動作は下のリンクからどうぞ。
http://tympanus.net/Development/ItemTransitions/

本日はフラットデザインするときに役立つCSS「Bootflat」をご紹介。

「Bootflat」はBootstrap 3.1.0を使用したCSSフレームワークです。

↑こんな感じのデザインが簡単に使えるようになります。

PSDファイルもダウンロード出来るので、デザインの変更やアプリ開発での使用も出来ますね。興味のある方は下のリンクからダウンロードしてください

Gridpak

自分好みのグリッドが作れるWEBサービス

Responsive Grid System

レスポンシブ対応のCSSフレームワーク

Semantic Grid System

シンプルな記述で扱えるless記述のグリッドシステム

Simple Grid

画面サイズに合わせて最適なグリッドを構築するスタイルシート

Golden Grid System

黄金比をサイトに取り入れるためのCSSグリッドシステム

Gridset

オンラインでグリッドセットを作れるWEBサービス

SUSY

レスポンシブwebデザインとグリッドシステムを簡単に装備できるCSSフレームワークSusy

320 and Up

『レスポンシブ・ウェブデザイン 標準ガイド』でも紹介されたCSSフレームワーク。

jQuerin Grid Builder

グリッドレイアウトを作れるジェネレーター
詳しくはKachibito.netさんのブログに紹介されています。

以上、レスポンシブ対応を簡単にしてくれるCSSフレームワークとグリッドシステム色々でした。

フラットデザインのボタンを押すと、3Dのアニメーション効果をするCSSをご紹介。フォームの送信ボタンとして使えそうです。

↑通常時のボタン

↑クリック時。ローディングバーが表示されます。

↑完了するとチェックが表示されます。

Safariでサポートされていない擬似要素使用しているため使用には注意が必要ですが、こういった読み込み中の表示をする事で２重送信の防止に使えそうですね。

以上、フラットデザインのボタンを押すと3Dのアニメーション効果をするCSSでした。

本日CSSで画象を切り抜く方法を教えてもらったのでメモ。

CSSのclipを使う事で上下左右の位置を指定してくり抜きが出来るようになります。

これは知らなかったです。
サムネイルの作成に使えそうですね。

サンプル

使い方

■HTML

<div class="thumb">
	<img src="/sample.jpg" />
</div>

■CSS

.thumb{
  position: relative;
  height: 400px;
  width: 400px;
  border: solid 1px #ccc;
  }
	.thumb img{
	  position: absolute;
	  clip: rect(55px 320px 360px 120px);
	  margin: 0;
	  }

clipの位置の指定の仕方は若干わかりずらいので、リファレンスを参考にしてみてください。
clip－スタイルシートリファレンス

OverFlow:hiddenで切り抜く方法

また、OverFlow:hiddenで切り抜くテクニックもありました。

CSSのOverflowを応用して画像を綺麗にリサイズ表示するサンプル

こちらも参考にどうぞ！

マウスオーバーした際に、ボーダー処理をCSSでつける作業をしていた所、
画像の内側にもボーダーをつけたいと言われてやり方を調べました。

誰かの参考なれば幸いです。

↑このような状態が理想です。

結論を言うと、画像にネガティブマージンを適用すればOKのようです。以下のようなコードで実装できました。

a {
    overflow: hidden;
    float: left;
}

a:hover {
    border: 5px solid #000000;
}

a:hover img {
    margin: -5px;
}

以下のサイトを参考にさせて頂きました。感謝。
Image Rollover Borders That Do Not Change Layout

classを指定するだけでGoogle+風のボタンを実現できるCSS。

Google+風のデザインを実現できる24種のボタンが使えますよ。

有名なWebサービスのデザインはUIも非常に凝っているので、参考にできますね。

ライセンスはCreative Commons CC-BY。IE6でも動作するようになっているとの事。

詳細&ダウンロードは下のリンクからどうぞ。

Macの新OS Lionがリリースされてから暫く立ちますが、
Lion風UIをCSSスプライトで使えるようにした方がいましたのでご紹介。

以下のようなボタンが簡単に使えるようになります。

HTMLもシンプルな構造でclassを指定するだけで使えます。

Label

Mac風のデザインにしたい際に良いですね。

詳細&ダウンロードは下のリンクからどうぞ。

CSS3でプログレスバーを実装する際に使える「CSS3 Progress Bars」をご紹介。

そのまんまなのですが、プログレスバーがCSS3で実装されています。

これをJSで読み込み処理中に使ってあげると、プログレスバーが実装できるようになりますね。

ダウンロードは下のリンクからどうぞ。

ヨーロッパの地図をCSSとjQueryでクリッカブルマップにしてしまったすごいデモをご紹介。
Europe, CSS & jQuery clickable map by Winston Wolf

地図にマウスオーバーすると、ポップアップで地名を表示してくれるようになります。クリックすると、地名を選択可能に。

これ、すごいですね。

HTMLは単純な<li>タグで国名を一覧にしているだけなのですが、
以下のような画像を使って、うまくCSSで表現しています。

IE6以外のほとんどのブラウザで表示できるようになっています。
興味のある方は下のリンクからどうぞ。