CSSだけでドット絵（Pixel Art）を描く・アニメーションさせる方法を紹介する。ただ、バニラCSSだけでも大丈夫なのだが、よりメンテナブルにするためSassで描く方法も併せて紹介する。 ちなみに下図のようなドット絵がつくれる。 マリオとMinecraftの土ブロックは、CSSアニメーションをつかって動かしている。もちろんJavaScriptは使っていない。 box-shadowプロパティについて ドット絵を描くためには、CSSのbox-shadowプロパティを使う。 そもそもbox-shadowプロパティは、要素にドロップシャドウ効果（影をつける）を与えるのが本来の使い方なので、まずは基本的な使い方からまとめる。 いくつかの構文がある。 box-shadow: offset-x offset-y color box-shadow: offset-x offset-y blur-rad

明けましておめでとうございます。 アニメーションの実装に抵抗を覚えている方、多いのではないでしょうか？ 特に昨今ではサーバサイド出身で最近フロントエンドを触り始めたという方も多いと思います。私が属している組織でもそんな流れは少なからずあるのですが、そういったバックグラウンドの方の声として聞くことが多い声はやはり「CSSは触りたくない、アニメーション怖い」というものです。 私も少し前まではちょっと複雑なアニメーションを見ると「えぇ…」と思っていたものですが、今ではCoolなアニメーションを見ると「どうやって実現しよう」とワクワクするようになりました(とても正直に言うとあまりに激しめなことされると今でも「えぇ…」とはなります)。 この記事ではあるアニメーション要求がある時に、どうやってそれを実装に落とし込むか、その考え方を私なりに整理したものをまとめてみました。アニメーションに抵抗がある方や、

どんなものが出来るのか このgif画像を参考にしてください。 「あの動き」では困るので「カバーアニメーション」と命名します。正式名称があったら誰か教えてください。 基本の形の作り方 アニメーションは広く普及しているanime.jsで記述します。 環境 CSSリセットとしてress、アニメーションはanime.jsで記述していきます。 お使いの環境に合わせて適宜変更していってください。 コーディング HTML .wrap { position: relative; padding: 8px; } .wrap > .cover { position: absolute; z-index: 1; width: 100%; height: 100%; top: 0; left: 0; background: #03a9f4; } .wrap > p { position: relative; z-

昨日、クラスメソッドさん主催の勉強会『iOS 9 週連続 Bootcamp！2週目』にて登壇させていただきました。 Core Image Tips & Tricks in iOS 9 from Shuichi Tsutsumi タイトルにある "Tips&Tricks" はWWDCのセッション名でもたびたび使われている用語で、Tricksというのは「コツ」とか「うまいやり方」みたいな意味らしいです。 こういうタイトルにしたのは、（資料冒頭にもある通り、）新しく追加されたフィルタを紹介したところで *1、カメラアプリとかつくってる人でもないとあまり使う機会がないわけで、定員150名という大きい勉強会で話す内容じゃないよなぁ。。と悩み、なるべく多くのアプリ開発において普遍的に役立つような内容を、とアレコレ考えた結果、次のような切り口で話すことにした次第です。 Apple も UI で多用する「

In the previous table, think of a mental model of the two in terms of existing software. Canvas resembles MSPaint, where you can draw and create images by using shapes and other tools. SVG resembles a Office PowerPoint slide that has programmable support and the ability to add a theme. When to Use <canvas> and when to Use SVG: The Scenarios This section describes the technical benefits and limitat

みなさんは、CSSアニメーションどのように使っていますか？　ウェブサイトのちょっとした演出でCSSトランジションを使用している方が多いと思いますが、類似のCSSアニメーションはどういった使い道があるのかよくわかっていない方も多いのではないでしょうか。実は、CSSアニメーションを使うとキャラクターアニメーションを作ることができます。 今回はシンプルな変形アニメーションを組み合わせて、1枚の画像で実現できるキャラクターアニメーションを制作しました。オリジナルのキャラクターをアニメーションさせていますが、CSSのコードのコピー&ペーストで他のキャラクター（画像）にも簡単に適応できます。 商用・個人問わず無料で利用できるMITライセンスで公開していますので、ウェブサイトやコンテンツ制作に是非ご活用ください。 伸びるアニメーション 上方向に「ぷるんっ」と伸びるアニメーションです。scale()でタイ

2005年 ゲスト 江川達也 板野一郎 他

多くのサイトは脱Flashの流れのなかにあり、従来Flashで作られていた表現の多くはHTML5へ移行が進んでいます。使われている技術は変われど、アニメーションを心地よく見せる技やユーザーを楽しませる要素は普遍的なもの。かつて話題になったFlashサイトから得られるものは多いはずです。 2017年7月26日（水）、ブラウザプラグインのFlash Playerが2020年末に終了すると、アドビが発表しました（参照「Flash とインタラクティブコンテンツの未来 | Adobe.com」）。Flashサイトがブラウザで見られなくなってしまうまでに見納めするべきサイトをまとめました。 FONTPARK 2.0 | MORISAWA 別ウィンドウで開く フォントメーカー「モリサワ」のウェブサイト（2008年公開）。文字のパーツを組み合わせてオリジナルのイラストを作成し、作品として投稿・共有できます

POSE STUDIOとは？ POSE STUDIO（ポーズスタジオ）は、3Dモデルを使って難しいポーズの描画をサポートするための作画支援ソフトウェアです。「ボーン（骨組み）」の入った 3Dモデルの読み込みに対応しており、「ポーズを付ける」操作にしぼったシンプルな設計になっているため、3Dソフトの使用経験がない方でも直感的に操作ができ、思い通りのポーズを作ることができます。 また、IllustStudioおよびComicStudioEX、ComicStudioProを最新版にアップデートすることで、POSE STUDIOで作成したポーズを下絵として読み込み、描画の参考にできるようになります。 POSE STUDIOは、CLIPのプレミアム会員様のみ「制作ツール」でおためしレンタルできます。レンタル期間中は、CLIPで使えるポイント「CLIPPY（クリッピー）」が進呈されます。 ※おためしレ

・視線と視点 Web漫画における視線移動・コマ割りについて考える為に、まずは一般的な「本」での視点移動を確認しておかなくてはなりません。 ※以下の画像での矢印は 緑の矢印（Ｂ）は「ページ内の時間経過」 赤の矢印（Ａ）は「ページ内の視線移動」 青の矢印（Ｃ）は「ページとページの視線移動」 を表しています。 和書（右とじ、縦書きの場合）

脱サラした現役CGデザイナーによる、CG制作魂を刺激する！CGニュース集！ CGトラッキングは7年目突入を期に、コチラのアドレスへ徐々に移転致します→http://cgtracking.net << February 2024 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 >>