タグ

2016年6月21日のブックマーク (7件)

  • もはや芸術!SVGアニメーションの巧みな活用方法20選

    更新日: 2017年3月1日公開日: 2015年10月9日もはや芸術!SVGアニメーションの巧みな活用方法20選 なんだか最近ハイセンスなwebサイトで見かけることが増えてきた「SVGアニメーション」。動画やGIF、CSSでは表現できないような“動き”を軽やかに演出しています。そこで今回はSVGアニメーションを使っているサイトや参考になるソースをピックアップしてご紹介していきたいと思います。 イベント要素をプラスした「BoonconPIXELS」 BoonconPIXELS グラフィック・デザイナー集団の booncon PIXELS。ページトップのアニメーションがキュートですが、さすがと思わされるところに、SVG アニメーションの中にイベント要素を盛り込んでいます。左上の文字と左方の PC 画面らしき画像をクリック or タップすると文字やカラーが変わります。なかなか遊び心があって、参考

    もはや芸術!SVGアニメーションの巧みな活用方法20選
  • アイコン素材。CSS

    With different speeds & easings Different size & animation on hover If you enjoyed these effects you might also like:

  • 初心者向けリセットCSSを自作する手順まとめ

    スタイルシートに記述したコードを読み込ませる前にブラウザがデフォルトで持つCSSをリセットする用途でリセットCSSは用いられています。 今回はリセットCSSの基的なことから自作する手順まで説明します。リセットCSSでリセットされているセレクタが「なぜ・どのように」リセットあるいは再定義されているか知ることによって、スタイルシートの理解をより深めてみましょう。 リセットCSSとは リセットCSSとは、冒頭でも述べたとおり各ブラウザがデフォルトで持つCSSをリセットするために用いるCSSのことです。 リセットCSSが必要になる理由 なぜリセットCSSが必要になるかというと、ユーザーがChrome・FireFox・IEといったブラウザのどれを使ってもこちらが意図した表示を提供するためです。「リセットCSSを使うと制作が楽になるから」という理由ももちろんありますが、ブラウザ配慮はユーザー配慮であ

    初心者向けリセットCSSを自作する手順まとめ
  • クリエイターなら知っておきたいクリエイティブコモンズライセンスの使い方【徹底解説】

    著作権法とは、文学から絵・音楽・写真・映像などの「作品」は作り手に全て権利があることを明確にしたものでした。日の場合は作品を作ったと同時に著作権が発生します。 著作権で保護された作品には「ALL rights reserbed」が記載されています。「ALL rights reserbed」を作り手の許可なく勝手に自分のサイトなどで使うのは著作権法違反です。 それに対し、著作権が期限切れになった作品、権利が放棄された作品は「パブリックドメイン」と呼ばれ、世界中の誰もが使える権利を持ちます。 これがザッとした著作権法のおさらいです。 (出典:https://creativecommons.jp/) しかし、インターネットが発達して誰もが自分の作品を世界中に発信できるようになった結果、この二つの著作権だけでは対応することができなくました。 クリエイティブコモンズライセンスは著作権保護とパブリッ

    クリエイターなら知っておきたいクリエイティブコモンズライセンスの使い方【徹底解説】
  • 育てるを考える 子育て情報メディア「KIDSNA STYLE」

    子どもたちの新たな遊び場所「メタバース」【前編】 2022年のバズワード「メタバース」。今後5~10年後に確実に私たちの生活の一部となっていくものであり、未来を生きる子どもたちを育てるうえで無関係ではいられないことはご存じだろうか。今回はメタバースとは何か?という基礎知識から、それがわれわれの生活にどう関わり、どう変化していくのかを探っていく。 大人びていく友だちに影響され「メイクをしたい」と言いだした娘。親としてどう向き合う?【彼女はNOの翼をもっている#3】 高校生のつばさは、恋愛やメイクなど大人びていくクラスメイトたちを見て「自分は子どもっぽいのでは……」と焦りを感じ、メイクに挑戦することに。そんなつばさの変化に、スタイリストの父は、なぜメイクをしたいと思ったのか、自分で選ぶことの大切さについて話す───「No」の翼の物語、第三回!

    育てるを考える 子育て情報メディア「KIDSNA STYLE」
  • 日本語フリーフォント、これだけは持っておきたい厳選22個まとめ

    中の書体デザイナーさんの努力によって、素敵な日語フリーフォントが数多く公開されるようになったいま、複数の書体をインストールしているひとも多いでしょう。しかしデザインのとき、いつも同じ書体ばかり使ってしまう、という人もいませんか? 公開されているフォントの数が増えたことで、どれも利用してよいか悩んでしまうこともしばしば。特に、デザインコンセプトにあった、商用利用にも対応できる素材を探すのは、時間のかかる作業のひとつかもしれません。 今回は、無料ダウンロード可能で、商用ライセンスにも対応した日語フリーフォントという条件で、幅広いデザインに利用できる、万能アイテムのみをまとめてご紹介します。

    日本語フリーフォント、これだけは持っておきたい厳選22個まとめ
  • ゲームデザインプロセスにおける「100:10:1」の方法

    By Hldrmn プログラマーとして企業に勤めるかたわら多くの自作ゲームを15年間作り、過去にはゲームデザインのコンペティションで優勝したり、Catch UpやOddというゲームを作ったりしているニック・ベントリーさんが、ゲームを開発するときに使う独自のメソッド「100:10:1」を公開しています。3つのステップ通りに進めば、ゲームのデザインプロセスを劇的に改善できるという内容で、ゲーム開発以外でも役に立ちそうな内容になっています。 The 100:10:1 method – the heart of my game design process | Nick Bentley Games https://nickbentleygames.wordpress.com/2014/05/12/the-100-10-1-method-for-game-design/ ◆ステップ1:100のアイデ

    ゲームデザインプロセスにおける「100:10:1」の方法