CSSのすごいアイデアが満載！実用的なものからスゴ技までスタイルシートのテクニックのまとめ素晴らしいアイデア満載のクリエイティブなスタイルシートのテクニックを紹介します。 これからのプロジェクトに使ってみたくなるような実用的なものから、CSSでこんなこともできるのか！という驚きのテクニックまで、今年もCSSに注目です。
[JS]操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト -animatedModal.js
最近のUIの傾向として、ユーザーが操作して楽しくなるようなアニメーションは大切なポイントです。そんな気持ちいいCSS3のアニメーションでモーダルウインドウをページ全体に表示するjQueryのプラグインを紹介します。 横からアニメみたいにひゅっとスライドさせたり、ぼい～んとバウンドさせたり、気持ちよくて面白いものが簡単に実装できます。 animatedModal.js animatedModal.js -GitHub animatedModal.jsのデモ animatedModal.jsの使い方 animatedModal.jsのデモ デモでは、3種類のアニメーションを使ったモーダルウインドウを試せます。 アニメーションはanimate.cssを利用しているので、80種類以上のエフェクトが利用できます。 デモページ：Demo 3 In: bounceIn, Out: bounceOut a
![[JS]操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト -animatedModal.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/0f2e1605b94bb486d46cd42dbd392f8733958bcc/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015030405.png)
[CSS]特定のエリアだけをアニメーションで一瞬目立たせるテクニック
編集可能なページなどで変更した箇所を分かりやすくするために、ターゲットされるとそのエリアだけをフェードのアニメーションで一瞬目立たせるスタイルシートのテクニックを紹介します。 Yellow Fade Technique with CSS Animations [ad#ad-2] このテクニックが広まったのは「Basecamp」のイエローフェードが有名で、JavaScriptを使用して特定のエリアをイエローにハイライトして目立たせます。 Basecampの紹介記事： Web Interface Design Tip: The Yellow Fade Technique 同様のテクニックをCSS3で実装する方法を紹介します。 ターゲットされるとそのエリアの背景色が黒から、透明に変更します。 /** * Quick fade on target to attract user attention
[CSS]カードをぺろっと裏返すエフェクトを実装するスタイルシート
CSS3のアニメーションや回転機能を使用して、カードをぺろっと裏返すエフェクトを実装するスタイルシートを紹介します。
透過がサポートされたnode-webkit（NW.js）でガジェットを作ろう
こんにちは、古見澤（コミザワ）です。 今回は、前回記事にした node-webkit が透過をサポートし始めたので、HTML5やJavascript、CSSなどのWeb系の言語でガジェットのようなモノを作ってみようという内容となります。 ↓ツイッターから情報を取得して表示するだけの単純なものですが、こんな感じのものを作れます。 動画 node-webkitって何？という方は、前回の記事も合わせてお読みください。 HTML5＋CSS3＋JSでネイティブGUIアプリが作れる、node-webkitを触ってみる ※本エントリーはWindows環境（Win7 Professional x64）での話になります。 （透過機能はMacやLinuxでも使えます、後述するマニュアルを参照ください。） また、Windows環境では、デスクトップウィンドウマネージャーが有効である必要があるため、 Aero機能
[CSS]対応ブラウザはWebkit系だけだけど、美しいエフェクトを備えたラジオボタン
見た目だけでもCSS3で美しくスタイルされたラジオボタン、クリックすると更に美しいアニメーションのエフェクトが仕込まれています。 光点がアニメーションで移動 ラジオボタンの選択が移動するのは、分かりやすいですね。 実装は下記のようになっています。 HTML <input type="radio" name="name" checked /> <input type="radio" name="name" /> <input type="radio" name="name" /> <input type="radio" name="name" /> <input type="radio" name="name" /> CSS body { padding: 50px; background-color: hsl(0,0%,20%); } input { -webkit-appearance:
Modern UI（旧：Metro）デザインのボタンやフォームを簡単に実装できるライブラリ -CSS3 Microsoft Modern Buttons
週末に発売予定のWindows8で採用されているModern UIの大きな特徴であるボタンやフォームを超軽量の外部スタイルシートファイルと簡単なclass指定で実装できるCSS3のライブラリを紹介します。 Modern Buttons CSS3 Microsoft Modern Buttons -GitHub ※キャプチャはWindows8のModern UI Modern Buttonsの特徴 Modern Buttonsのデモ：ボタン Modern Buttonsのデモ：フォーム Modern Buttonsの特徴 Modern Buttonsは、ボタンやフォームをCSS3で美しくスタイルした軽量（5.5KB gzipped）で使いやすいCSS/JavaScriptのライブラリです。 Modern Buttons クロスブラウザ対応 IE8をはじめ、最新のChrome, Firefox
さりげないアニメーションがいい感じ、HTML/CSSでシンプルに実装するタブコンテンツ
コマ数を落としているから、アニメがうまく見えてないかも タブコンテンツはシンプルながら、さりげないアニメーションが仕込まれておりいい感じです。上記はgifアニメーションで、実際のデモは下記ページで確認できます。 Pure CSS Tabs タブ切替のトリックは、ラジオボタンです。タブとして表示されているラベルをクリックするとラジオボタンがチェック状態になり、コンテンツが表示されます。 HTML タブとコンテンツは1セットでリスト要素で実装します。 <ul class="tabs"> <li> <input type="radio" name="tabs" id="tab1" checked /> <label for="tab1">タブ 1</label> <div id="tab-content1" class="tab-content"> <p>コンテンツ 1</p> </div> <
ズルいデザインテクニックを生かして作る、汎用性のあるズルいボタンデザイン
さて今回は、ズルいデザインテクニックの集大成ともいえる「ズルいボタン」です。これまでの連載で取り上げた数々のズルいデザインテクニック、「ズルいテキストシャドウ」「ズルいグラデーション」「ズルい角丸」、そして前回解説した「ズルいボックスシャドウ」を用いたズルいボタンの作り方を解説します。 今回のズルいボタンに関しては、以前にズルいデザインテクニックのスライドで紹介したものから大幅に改定を加えて、より汎用性があり、さまざまな場面で使い勝手の良いものに刷新しました。 改良のポイントは次の通りです。 文字サイズの変更、またそれに併せてボタンサイズの変更に対応しています iタグを使ったアイコン用のWebフォントに対応しました。今回はfont-awesomeを使って解説しています フラットデザインの流行に伴うデザイン傾向に合わせ、立体感やグラデーションをより控えめに、かつpaddingを大きめに取った
box-shadowで表現する、「セミフラット」なズルいデザインテクニック
box-shadowで表現する、「セミフラット」なズルいデザインテクニック：ズルいデザイン（3）（1/2 ページ） 世の中、フラットデザイン流行りですが…… iOS 7がフラットデザインを採用したのを皮切りに、Webデザインのトレンドがフラットデザイン一色になってきましたが、立体感を完全に排した色面と空間、シンプルな描画の組み合わせだけのデザイン表現は、ある種ごまかしが効かず、また適切な利用方法を喚起させるようなUIも表現がなかなか難しいものです。 例えば、「ボタンは押せるもの」であると表現するための「押したくなる感じ」を喚起させる立体感は、ユーザビリティ面でもまだまだ有効です。今回は、流行のフラットデザインの中でも違和感なく使えて、また適切なアフォーダンスの表現が可能になる、「やりすぎていない立体感」を目指した、box-shadowを活用した各種ボックス表現の作り方を紹介します。 NGな
カード状のドロップダウン
上記はデモをアニメーションgifにしたもので、初期はアイテムがカード状に重なっており、クリックすると中身がするすると表示されます。 最初にぱかっと開くの面白いですね、各アイテムはホバーでハイライトもします。 実際の動きは、下記ページでご覧ください。 CSS3 Card Deck Drop Down HTML 各アイテムはリスト要素でシンプルな実装です。 <div class="card-drop"> <a class='toggle' href="#"> <i class='icon-suitcase'></i> <span class='label-active'>Everyting</span> </a> <ul> <li class='active'><a data-label="Everyting" href="#"><i class='icon-suitcase'></i> Ev
Googleから学ぶ ヌルヌルサクサクなスライドメニュー - Qiita
スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生！ 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 スライドのアニメーションがとても滑らか・ちらつかない ボタンの反応にストレスを感じない メイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用利用無料！ミニマルにデザインされたUIエレメントやコンポーネントが揃ってるCSSのライブラリ -Papier
http://boxtuffs.com/
ちょっと使ってみたくなるHTML5/CSS3のUIエレメント集 -Boxtuffs
新着記事 | PhotoshopVIP
これは楽しい！巻き簾のようにくるっとはらりとなるCSS 3Dのドロップダウン
デザインの勉強にもなる、CSSで実装するパンくずのまとめ
アイデアの宝庫！CSS3を使ったUI表現・テクニック集
Site Under Maintenance
