CSS3のスタイルやアニメーションを使って、ユーザーが使いやすい美しいボタンを実装するスタイルシートのチュートリアルを紹介します。 Styling Button Links With CSS3 [ad#ad-2] 下記は各ポイントを意訳したものです。 Step 1:ボタンの実装 Step 2:ホバーのスタイル Step 3:アクティブのスタイル オプション:テキストの選択を不可に まとめ:全スタイルシート Step 1:ボタンの実装 ボタンの実装には、シンプルなテキストリンクを使用します。 HTML テキストリンクにclassを付与します。 <p><a class="button-link" href="#">Button Link</a></p> テキストリンクをボタンに見えるようスタイルしていきます。 ボタンがクリックしやすいように、paddingの値を充分に設定します。 .butto
サブメニュー Get the RSS Browse the Archive Random post Mobile version 当ブログの人気エントリ ★はてブ1500超えのエントリ 120131_52_フリーランスとか大手とか言ってないで「ソニーの開発18か条」を今こそ振り返ってみよう! ★はてブ500超えのエントリ 121015_78_音楽業界周辺で「CDがなぜ売れないのか」と未だに議論している人がいるので実際に最近CDを買った人の話を交えながら考えてみる ★筆者オススメのエントリw 120104_45_2012年の音楽業界のWeb&ソーシャルまわり動向予想と3つの変化について(前編) 111229_41_スタートアップに挑戦し、シリコンバレーを目指す若き日本人たちへ思うこと(ランディ・パウシュのスピーチを紹介しつつ) フォロー Wednesday, February 1, 2012
turn.js - The page flip effect for HTML5 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ドラッグ&ドロップでべらっとめくるあのインタフェースがHTML5で実現でき、iPadやiPhoneなどでも動作します。 電子書籍ビューアとして使えそうですね ページに立体感を出すために影なんかも描画されてます。 マークアップや初期化も超簡単です。<div>を並べて初期化するだけ。 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル モバイルブラウザでのHTML5対応状況が一目瞭然の「Mobile HTML5」 HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」
TOP > Design > 立体感のあるUIが手軽に利用できるフリーUIキットまとめ「New Creative UI Kit Free Download」 webサイトやスマートフォン特有のUIデザインは、視認性とクリエイティブ性の両方が求められるクオリティのパーツ制作が必要不可欠となってきます。そこで今回は、立体感のあるUIを手軽に利用できるフリーUIキットをまとめた「New Creative UI Kit Free Download」を紹介したいと思います。 Simple UI Kit – Icon Deposit カラートーンの異なるUIキットが、いくつも紹介されています。中でも気になったものいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Vector UI Bundle – Icon Deposit シンプルなカラーリングのUIキットです。落ち着
2030年までに技術革新によって全ての仕事の50%が消滅する!!社会の変化と「消える仕事」「新しい仕事」をまとめてみた Tweet 技術というもの進歩は目覚しく、その影響はあらゆる分野に及んでいます。そして、技術革新によって多くの仕事が機械化・自動化され人間の仕事はなくなっていきます。 トルコのイスタンブールで開催された「TEDxReset」の講演の中で披露されたトーマス・フレイ氏のスピーチに、技術革新によって2030年までに現在存在している仕事の50%が消えてしまうという衝撃的なものがありました。今後、消える仕事、新たに生まれる仕事とはいったい何なのでしょうか。 1.電力業界 現在の発電は、高価な上に非効率で一方向へのエネルギー供給しか行えません。しかし2030年では、既存の大規模発電所からの送電電力にほとんど依存せずに、エネルギー供給源と消費施設をもつ小規模なエネルギー・ネットワーク「
2012年2月3日、“シリコンバレー流”のユーザー・インタフェース(UI)やユーザー体験(UX)、ブランドのデザインをテーマにしたトークセッションが、デジタルガレージ本社で行われた。 登壇したのは、米エバーノートでクリエイティブディレクターを務めるゲイブ・キャンポドニーコ氏(写真1)。米アップルでの勤務経験も持つ同氏は、この数年にわたるエバーノートのアイコンのデザインからブランド構築までの数々の経験談を語った。 同氏が講演で指摘したUIとUX、ブランド構築のポイントは、以下の9点にまとめられる。 1)最初から編集に着手してはいけない 最初の教えは、「いきなり編集に着手してはいけない」。同氏がデザインする際に心がけているのは、できるだけたくさんの情報を収集すること。そのために同氏は、たくさんの人に会うのだという。 エバーノートには創業時から参加することになったので、同氏はまず企業ロゴを考える
最近今あるサイトをスマートフォンに対応させるべく、コツコツがんばっているわけですが、その際に気になったことや知っておきたいポイントをまとめてみました。基本的な内容も多いと思いますが、ご参考になればと思います。 1. スマートフォンに対応させるには? ウェブサイトをスマートフォンに対応させるには2つのパターンがあると思います。 PCにもスマートフォンにも対応したページを作成するか、PC用ページとは別にスマートフォン専用ページを作成するかです。 1つ目のPCにもスマートフォンにも対応したページは、Media Queriesを使う場合が多いと思います。 Media Queriesを使うと画面のサイズの違いによって適用するCSSを変更することができます。 例えば、CSS-Tricksというサイトは画面サイズによってレイアウトが大きく変わってます。 Media Queriesについては後で簡単に紹介
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く