タグ

CSSとsvgに関するy-103のブックマーク (2)

  • UI改善にキラリと役立つ! SVGアニメーションの作り方まとめ - ICS MEDIA

    SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう(参考「SVGで始めるマイクロインタラクション入門」)。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。 今回は、コーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、その特徴と具体的な実装方法について紹介します。 CSSSVGアニメーションを実現する方法(コーダー向け) コーダーにオススメするSVGアニメーション実現方法の1つは、CSSプロパティを使う方法です。 SVGCSSプロパティによってグラフィックの形状を変更できます。たとえば、次のコードでは、

    UI改善にキラリと役立つ! SVGアニメーションの作り方まとめ - ICS MEDIA
  • 2016年を先取り!コピペで学ぶ HTML/CSS スニペット60個まとめ

    ※ このページは読み込みには時間がかかる恐れがあります。少し待ってからスクロールすることで、スムーズに表示することができます。 今年もあと少しとなりましたが、ウェブデザイン技術の進歩はまだまだ続いていくようです。今回は、最新 Web テクニックを採用した HTML/CSSスニペット60個を、カテゴリ別にまとめてご紹介します。 詳細は以下から。 コンテンツ前半 : 目次 数が多いため、前後半2ページに分けています。 ホバー・エフェクト(7) SVG関連エフェクト(6) レイアウト関連エフェクト(8) ナビゲーション・エフェクト(8) 01. ホバー・エフェクト Floating Card ホバーすることでカード状レイアウトを、立体的に動かすことができます。 See the Pen Floating Card by Fabrice Lejeune (@fabricelejeune) on Co

    2016年を先取り!コピペで学ぶ HTML/CSS スニペット60個まとめ
    y-103
    y-103 2016/09/14
  • 1