今年もCSSの進化がすごいです! 次のプロジェクトに使ってみたくなるようなワクワクする素晴らしいアイデア満載のスタイルシートのテクニックを紹介します。 CSSアニメーションはより洗練され、単に要素を動かして楽しむだけでなく、意味のある動きとしてより効果的に利用されるものが目立ちました。 まずは、アニメーションの表現もここまでできるのかと驚いた「Marvel Logo animation」から。 ※一部は、実際に動作するデモのコードを埋め込んでいます(全部をコードにしたらページが重すぎました)。
今年に入って、CC0で利用できる新しい写真素材サイトがどんどん増えてます。 Webデザインや紙のデザイン、プレゼンや企画書などにも無料で利用できる高品質な写真素材がダウンロードできるストックフォトサイトを紹介します。 ちょっと写真素材を使いたい時など、クレジット表記の義務がないと気軽に使えて便利ですね。
ユーザーがフォームの入力欄をフォーカス・アクティブした際、アニメーションを加えて入力欄をちょっとだけ目立たせるスタイルシートを紹介します。 アニメーションでおっと思わせるだけでなく、入力欄が複数並んでいる時にアニメーションで目立たせるとフォーカスを失わずに入力できる効果もありますね。 Some :active & :focus effects 使い方は簡単、CSSファイルを外部ファイルとして記述し、input要素にclassを加えるだけです。CSSファイルは上記ページの下部「Download」からダウンロードできます。 エフェクトのカラーを変更したい場合は、CSSファイルで一括置換するだけでOKです。 HTML <head> ... <link rel="stylesheet" type="text/css" href="active_and_focus.min.css" media="a
ヘッダやフッタ、ナビゲーション、タブ、アコーディオン、カードコンテンツ、モーダル、パンくず、オーバーレイコンテンツなど、最近のサイトで見かけるかっこいいエレメントがコピペで実装できるコンポーネント集を紹介します。
今回はデザインの細部までこだわりを感じる、操作性が面白い、そんなアイデア満載のUIを備えた素晴らしいウェブサイトを紹介します。 コンテンツファースト、Off Canvas、1ページ垂直スクロールがキーワードです。 また各サイト、ナビゲーションが非常に変わっていますが、初めてでも迷うことなく操作できると思います。ゆっくり時間かけて楽しんでください! Amanda Gerhardsen ノルウェーの写真家さんのポートフォリオ、ダイナミックな四方向のナビゲーション、各UIエレメントの繊細な動きが楽しめます。左上の「Remix」で落書きもできるとても楽しいサイトです。 iArk ノルウェーのインテリアデザインのコーポレートサイト、サイト全体のトーン&マナーが非常にかっこよく、レイアウトやタイポグラフィ、写真全てが美しくデザインされています。右サイドのOff Canvasも面白い使い方です。
個人ブログでも商用サイトでも、そして紙やTシャツにも無料で利用できる、雰囲気のあるかっこいい、ライフスタイル、ファッション、フード、動物、自然、建物、人物などをテーマにした、さまざまな高解像度の写真がダウンロードできるサイトをMediumから紹介します。 Stock photos that don't suck 上記で紹介されているストックフォトのサイトは9つで、全て個人でも商用でも無料で利用できます。 以下、その9つのサイトです。一番オススメは、6番目のPicjumbo。
画像は一切使用せず、その文字をホバーするとパタっと開くエフェクトを実装するスタイルシートを紹介します。 単に開くだけでなく、シャドウも開きに応じて変化してるのがスゴイ! 日本語、しかも漢字でもOK 実装はこんな感じになります。 HTML 文字はspan要素で配置し、上に表示されるホワイトの文字はdata-letterに記述します。 <div class="foo"> <span class="letter" data-letter="A">A</span> <span class="letter" data-letter="B">B</span> <span class="letter" data-letter="C">C</span> ... ... </div> 日本語は、こんな感じです。 <div class="foo"> <span class="letter" data-lett
画像をホバーすると、スライドやフェードのアニメーションで表示する半透明のパネルを実装するjQueryのプラグインを紹介します。 パネルは実装もカスタマイズも簡単です。 HCaptions -GitHub HCaptionsの準備 HCaptionsのデモと実装 HCaptionsの設定 HCaptionsの準備 まずは、スクリプトを使う準備から。 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="js/jquery.js"></script> <script src="js/jquery.hcaptions.js"></script> Step 2: スクリプトの準備 キャプションを表示に付与するclassを定義します。 $(window).load(function(){ $('.hcaption').hcapt
シンプルなインターフェイスに、スライド時にさまざまなエフェクトが用意されたコンテンツスライダーを実装するjQueryのプラグインを紹介します。 下記キャプチャのエフェクトは3Dで、くるっぐい~ん、って感じです。 Adaptor, a jQuery 3D content slider Adaptorのデモ Adaptorの使い方 Adaptorのデモ コンテンツスライダーの対応ブラウザは、IE6を含むすべてのモダンブラウザです。 3DのエフェクトはFirefox, Chrome, Safariのみで、他のブラウザで表示した際はフェードのエフェクトになります。 スライドのエフェクト Adaptorの使い方 実装は3ステップです。 Step1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//code.jquery.com/jqu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く