mateaのブックマーク / 2017年5月17日

matea id:matea

2017年5月17日のブックマーク (4件)

アニメーションをWebサイトに導入するためのテクニック
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。機能的で楽しいアニメーションは、現代のWebデザインにおいて不可欠な要素の１つです。現代のWebサイトでは、細かなインタラクションのデザインが根本的な違いをもたらします。アニメーションはユーザーに現状を伝えたり、注意をうながしたり、ユーザーの行動の結果を伝えたり、ユーザーのふるまいに影響を与えることもできます。より良いUXを築くため、サイトにアニメーションを追加する例をいくつか説明していきます。進捗ローディングアニメーション Webアニメーションにもっとも共通する用途の１つは、ページの読み込み（ローディング）時にユーザーの気を紛らせることです。ローディングアニメーションはユーザーの感覚時間に影響し、実際より待ち時間を短く感じさせることができます。待ち
matea 2017/05/17
webデザイン
リンク
CSS：ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法 - NxWorld
ここ最近主にナビゲーションなどでホバー時にアンダーラインをアニメーションさせるエフェクトの実装要望が多いので、パッと使えるようによく利用するものをひと通りまとめたのでシェアします。また、大体この手のアニメーションを利用する際はサイト全体で動きを統一させることが多いのですが、たまに場所によって少し違いをつけたいということもあるので、そういったときにすぐ対応できるようにSassのmixinを用いて実装する方法も併せて紹介します。ここで紹介しているサンプルで使用しているHTMLは、すべて<a href="#">Lorem ipsum</a>のようなシンプルなa要素を使用した想定になっています。
matea 2017/05/17
css
リンク
[CSS]レイアウトでテキストは幅一定で、画像だけ幅いっぱいに表示させるスタイルシートのテクニック
テキストはスマホでは両横にマージンを保持しつつ幅いっぱいに、デスクトップでは指定した幅で表示し、常に画像だけ幅いっぱいに表示させるレイアウトを実装するスタイルシートのテクニックを紹介します。 floatやflexboxだと難しいレイアウトですが、CSS Grid Layoutを使うと非常に簡単に実装できます。 Breaking Out With CSS Grid Layout by Tyler Sticka CSSのレイアウトでありがちなバグ・仕様？実装のゴール CSS Grid Layoutを使った実装新しいテクニックの使い方実装の注意点 CSSのレイアウトでありがちなバグ・仕様？固定幅のコンテナ内からビューポートの幅いっぱいに配置するには、calc()を使うと簡単なコードで実現できます。参考: Breaking Out With Viewport Units and Calc
matea 2017/05/17
css
リンク
商用のデザインで使える建物や物件の写真素材が満載！東京・神奈川・千葉に実際にある不動産物件の無料写真素材
ちょっと珍しい写真素材の時間がやってきました。今回は、建物や物件の写真が商用でも無料で利用できる素材です。物件数は9108棟！写真は40,000枚以上で、思わず自分が前に住んでいたとこがないか探してしまいました。物件写真.net 建物の写真に著作権が発生することを知らない人は、意外と多く感じます。参考: 著作権・肖像権について、写真やイラストなどの素材を安全に使うために知っておきたいこと物件写真.netではそういった問題を解消すべく、すべての人が自由に使用できる物件写真素材を扱っており、不動産業界だけでなく、広告の素材やイラストの背景などにも無料で利用できます。利用にあたっては、完全無料で商用利用可。クレジット表記の義務無しで、登録も不要です。詳しくは、下記ページをご覧ください。初めての方へ -物件写真.net どんな建物・物件の写真素材があるか見てましょう。写真は、3つ
matea 2017/05/17
素材
リンク
- 2017年5月19日
- 2017年5月17日
- 2017年5月15日