box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる | Black Everyday Company
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
heyインサイドストーリー 〜heyのCIデザインプロセス全記録〜｜Takamasa Matsumoto
先日発表された、CoineyとSTORES.jpの経営統合によって設立されたheyのCIデザイン制作をストアーズのデザイナーである中間（@chucaaan）さんとお手伝いさせていただきました。 CIデザインのプロセスは、ビジョンを見えるかたちにしていくことを通じて、その背景にある思想や想いを辿ることそのもの。 そのプロセスの共有を通じてheyがどんなことを目指しているのかをお伝えしていければと思います。 事のはじまり2017年某日。 Googleカレンダーにコイニー代表である佐俣から「1on1」というタイトルだけがセットされた、謎めいたミーティングの冒頭にて、それは始まりました。 佐俣「コイニーとストアーズが統合してヘイ！っていうホールディングスができる。なのでそのCIをつくってほしい。」私「...」佐俣「...」私「ヘイ。なるほど?!」と、まあこの様な感じで、突然のことだったので意図をき
かなり優秀、iPhoneで撮影した複数のスクリーンショットを縦に自動合成するアプリ「Tailor」
LINEやメッセージのやりとりを撮影した複数のスクリーンショットを縦長の1枚の画像に合成したいとき、画像をPCに転送して加工していた人も多いでしょう。スクロールしても画面上で固定表示される箇所やステータスバーなどを削除したり、つなげる部分を重ね合わせたりという操作を1つずつこなさなければならず、かなり面倒な作業でした。 今回紹介する「Tailor」は、こうした作業を全自動化したiPhoneアプリ。アプリを起動するだけで、同じ画面を撮影した複数のスクリーンショットを綺麗につなぎ合わせてくれます。 【合成前】App Storeのゲームランキングのスクショ3枚を合成すると…… 【合成後】不要な部分をカットして結合された この手のスクショ合成アプリはApp Storeで複数リリースされていますが、筆者が試してきた中ではかなり優秀です。 写真加工・画像編集：iPhoneアプリおすすめ6選 複数のスク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
