asystのブックマーク - はてなブックマーク

SVGでリアルな湯気を作ってみる｜ Tips Note by TAM
もう7年ほど前になりますがFlashでサイト製作をしていた時代に、表現に悩まされるものがありました。それが『湯気』です。イラストを使った可愛い表現なら問題ないですが、リアルな感じを作ろうと思うとこれがなかなか難しい。最近では動画やアニメGIFなどで代用されていたりすることも多いと思いますが、今回はそんな素材がない時に使える『SVGで作るリアルな湯気』を紹介したいと思います！ See the Pen Steam by uenaka (@uenaka) on CodePen. SVGで湯気を書くまずはSVGで湯気の形を自由に書いてみてください。難しく聞こえるかもしれませんが、後々ボカして使用しますので形に拘る必要はありません。参考までに私が書いてみた湯気がこちらです。 SVGにanimateを追記して動すよりリアルな動きに見せるため、SVGで書いた湯気を動かします。ここも動き
asyst 2018/01/23
リンク
開発環境でも使えるメタ情報チェックツール「Simple Meta Checker」を作りました｜ Tips Note by TAM
サイトのメタ情報のチェックに悩んでいる制作者やディレクターの皆さん、こんにちは。 HTMLのタイトルやメタ情報、h1など、とても大事なんですが確認するのめんどくさいですよね？僕はめんどくさいです。ページ数が多かったら、それはもう大変です。こういった情報を確認するためのツールは、探せば色々と公開されているのですが、開発環境（IP制限やベーシック認証がかかっている領域）で使えない今見ているページしかチェックできない 1度にチェックできる数に制限があるなどの条件があるものが多く、僕としては「サイト公開前に一括で確認したい！」といったような状況が多いのですが、合うものが見つかりませんでした。そういうわけで、自分でツールを作ってみたので、会社のブログを利用して紹介させてくださいｗデモサイトをGitHub Pagesで作ってますので試してみてください。 https://kandai.gi
asyst 2016/12/27
リンク
Snap.svgを使って、一手間かけたマウスオーバーアニメーションを作成したい！｜ Tips Note by TAM
2016.04.12 Snap.svgを使って、一手間かけたマウスオーバーアニメーションを作成したい！みなさんSVGしてますか？前回SVGアニメーションについて書きましたが、今回はその延長でSnap.svgを使ったマウスオーバーアニメーションを作成してみたいと思います。まずはこちらをご覧ください。完成デモ＞＞タム君にマウスオーバーすると口の形が、笑顔のそれから叫ぶような形にスムーズに切り替わったかと思います。アニメーションの途中でマウスを離してみると、間の形が見れたりするのもSVGならではの楽しいところです。それでは早速作ってみましょう。 Snap.svgとは「Snap.svg」とはJavaScriptでSVG要素を制御することができる、Adobeが開発したオープンソースライブラリです。（jQueryと同じように扱えるのも嬉しい！）公式サイト http://snapsv
asyst 2016/11/15
リンク
CSSの設計 – FLOCSSをベースにしたファイルの構成と命名規則を考える｜ Tips Note by TAM
「どうやってコーディングをして組み立てていこうか？」いくつもの案件を経験しても、いつも悩んでしまうのがCSSの書き方です。「それなら自分なりの考えをまとめてルールを作ってしまおう」と考え、CSS設計に関する情報から自分なりにコーディングルールを作りました。今回の内容は社内勉強会で発表した「CSSのファイル構成と命名規則」の資料を再編したものです。すべての案件内容で最適な方法ではないこともあると思いますので、1つの考え方だと捉えていただけるとありがたいです。詳しいコードやルールはGitHub（個人のアカウント）を参照してください。「使用しているテンプレート」リンク先のstyle.scssで実際の全体の構成が確認できます。使用しているテンプレート CSSコーディングルール CSSは影響範囲の管理が難しい CSSで難しいことのひとつは「影響範囲」を管理することだと思います。クラスを追
asyst 2016/06/28
リンク
1