[CSS]アニメーションのエフェクトが抜群にかっこいい、レスポンシブ用ナビゲーションのデモ -Off Canvas Menu
[CSS]アニメーションのエフェクトが抜群にかっこいい、レスポンシブ用ナビゲーションのデモ -Off Canvas Menu
レスポンシブ ウェブ デザインの基本 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 モバイル デバイスを使用したウェブ ブラウジングは、天文学的なペースで増え続けています。こうしたデバイスはディスプレイ サイズに制約があることが多く、画面上でのコンテンツの配置方法について異なるアプローチが必要になります。 元々 Ethan Marcotte in A List Apart によって定義されたレスポンシブ ウェブ デザインは、ユーザーのニーズとユーザーが使用しているデバイスに対応します。レイアウトはデバイスのサイズと機能に応じて変わります。たとえば、スマートフォンではコンテンツが 1 列で表示されますが、タブレットでは同じコンテンツが 2 列で表示されます。 この動画では、利用可能な画面のスペースに合わせて、デザインが狭いビューポートから広いビューポートへ
画像を使用せずに、シンプルなHTMLで美しいパンくずを実装するスタイルシートのチュートリアルを紹介します。 CSS3 breadcrumbs [ad#ad-2] デモ 実装 デモ デモはCSS3、疑似要素を使用しているため、IE9+, Firefox, Chrome, Safari, Operaでご覧ください。 4つデモは、全て画像を使用していません。 デモページ:ホバー時 実装 HTML HTMLは非常にシンプルで、リスト要素を使用します。 ul要素にid、現在位置にclassを記述します。 <ul id="breadcrumbs-one"> <li><a href="">Lorem ipsum</a></li> <li><a href="">Vivamus nisi eros</a></li> <li><a href="">Nulla sed lorem risus</a></li>
Creating a Radial Menu in CSS マウスのホバーで、「扇形のツールチップ」がアニメーションで表示されます。 続いて、二つ目のデモ。上記にインスパイアされたもので、動きが絶妙ですごいです! Circular Tooltip こちらはクリックで、「扇形に広がるツールチップ」がアニメーションで表示されます。 実装はデモページにも掲載されていますが、下記のようになっています。 HTML !-- content to be placed inside <body>…</body> --> <a class='button ctrl' href='#' tabindex='1'>★</a> <ul class='tip ctrl'> <li class='slice'><a href='#'>✦</a></li> <li class='slice'><a href='#'>✿
Ginza.rb 第27回 Web APIの四方山話に参加してきました! 内容を簡単にレポートしたいと思います。 Ginza.rbとは 銀座周辺のRuby技術者たちのmeetupイベントです。最初はソースコードリーディングの会が多かったそうです。 そこから今回までに開発環境の話やAPIの話など沢山の面白い企画が作られてきました。 過去のイベント一覧 自己紹介 各自作成したmarkdownのプロフィールを写して、自己紹介を簡単にしていきました。 自己紹介タイムでは参加者の最近気になることが知れて面白いです。やはりJSはReactが人気、サーバサイドはElixirが注目されていました。 JSON APIのお話 講演者として今回招かれた川村 徹(@tkawa)さんのお話からスタートしました。 川村さんはRESTful Web APIs 読書会、Sendagaya.rbの主催者の方です。 当日の資
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く