フラット、サークル、ブラー、ビッグ、ダークなど、2013年のウェブデザインのトレンドを探るかっこいいUIデザインをインスピレーションの宝庫Dribbbleから紹介します。
ソーシャルサービスのボタンを配置したリストがアニメーションで蛇腹状に折り畳まれるスタイルシートを紹介します。 デモページ:開いた状態 実装 外部ファイル jQueryとModernizrを</body>の上に外部ファイルとして記述します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script> HTML 一番上のグレーはh2要素で、各ソーシャルボタンを配置するパネルはリスト要素で実装します。 <h2 class="connect">Connect with me:</h2> <ul class
ページ内のどこにいるかを分かりやすくナビしてくれるjQueryプラグイン「scrollNav.js」 2013年01月29日- scrollNav.js ページ内のどこにいるかを分かりやすくナビしてくれるjQueryプラグイン「scrollNav.js」。 ページの見出しを<h1〜6>のタグで定義しているとして、見出しを自動でサイドバーに固定で出してくれて、カレント位置の見出しを太字にしてナビゲーションしてくれます。 当然、ナビ部分をクリックすれば指定位置までアニメーションしながらスクロールしてくれます。 コンテンツを追加した際も、ナビゲーションを変えなくていいので、とっても便利ですね jQueryプラグインなので初期化するだけで利用もとっても簡単。 関連エントリ レスポンシブなナビゲーションの見本やチュートリアル ページ上部に隠れるナビゲーションバーが実装できるjQueryプラグイン「j
twitter facebook hatena google pocket リストを表示していくと長くなって見難くなることがあります。 そこでjQuery List Pluginを利用するとiOSみたいに上部で各見出しを固定してくれるので、自分がいまどの項目を見ているのか見やすくなります。 sponsors 使用方法 jQuery List Pluginからファイルをダウンロード。 <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="jquery.list.js"></script> <script type="text/javascript"> $(function () { $('#id名').list(); }); </script
2020年2月25日 CSS どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな?と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。 ↑私が10年以上利用している会計ソフト! 目次 ちょっと予備知識 文字色をふんわり変える 背景色をふんわり変える 文字をぼかす 光を放つグロー効果 背景を角丸に レインボーカラーに 拡大・縮小 角度を変える くるっと回転 1. ちょっと予備知識 今回はjQueryなどのJavaScriptを使わず、CSSのみで実装できる小技を集めています。その中でどの小技にも採用しているのが transition プロパティです。transitionプロパティは、時間の変化を操作するもので、
ブラウザを検出出来る、というWordPressプラグインのご紹介。紹介というか、メモです。まだ時間なくて触ってないので動作テストしていませんが、使いそうなので備忘録。 ブラウザの種類を検出して条件分岐させる事が出来るWPプラグインです。結構面倒な作業だったのでこれなら楽になるかも、と期待を込めて。まだ時間が取れなくて触ってないので、正常動作するかは分かりません。 PHPで検出して分岐可能にする、というもの。1つ2つなら自分でコード書きますけど、必要検出ブラウザの量が多いならプラグインに仕事してもらったほうが合理的かも。 is_firefox($version) 有効化すれば上記のような関数を使えるようになるみたい。 場合によっては無駄にCSSやJSを読み込む必要がなくなりそうですね。 PHP Browser Detection
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く