ふさんのイラストまとめ

HTMLのdata属性、JavaScriptで処理できるので便利。
結果、「HTMLコードだけで円グラフを描画」させる仕組みが実装できました。

#javascript #プログラミング初心者 #SVG #html

SVGアニメーション、更新しました。
要素にマウスカーソルが乗ったときに、border（枠線）がくるりと描画されるアニメーション。

SVGとhtml要素の「座標系を一致」させる事で実現します。
#webデザイン #CSS #プログラミング勉強中 #マーケティング #ブログ更新 #ブログ

https://t.co/8C5I9QQiUk

SVGアニメーション作り方、更新しました。
「画像の境界線だけをぼかす」。

画像全体をぼかすのであれば、CSSのfilter:blurで事足ります。では「内側は鮮明のまま、周りだけをぼかす」には？
→SVGとCSSであっさりと実装が可能です。

#webデザイン #プログラミング初心者

https://t.co/bhXhT8BjYK

SVGアニメーション、更新しました。

「回転の中心を自由に指定する方法」。

〜ポイントは、

・Vectornatorやイラレを使い、中心の座標を取得。
・CSSプロパティで表現できるよう、「％」指定に変換。

#css #SVG #javascript #プログラミング初心者 #illustrator #html

https://t.co/bTiT4eCfIK

SVGアニメーションについての記事が増えてきたのでまとめページにしました。今後記事を追加していきます。

HTMLの制作環境があれば、どなたでも始められます。
#css #cssアニメーション #ブログ初心者 #vectornator #illustrator

SVGアニメーション作り方。
https://t.co/9rk9suIO4v

iPad Pro用Magic Keyboardが来たぞ。SEよりも先にこっちをポチるのであった。

@awateyo 初めまして。画面を別の指で触りながらドラッグすると、キーボードの「Shift」を押したような効果になり、真円や正方形が描けます。

Macを再起動したらfirefoxのロゴが新しくなった。

#イラレ 画像に矢印を表示したいのだが、元画像がカラフルすぎて目立たせる事ができない時（①）の対処を考えてみた。

②画像の上に２つの長方形を置く
③パスファインダーで切り抜き
④生成された複合パスの不透明度を下げる

Amazonの商品紹介ページ、表示形式。

◼︎モバイル（タッチ操作可能）
　左右にスワイプする事で、画像が切り替わる。

◼︎ PC
　左上のサムネイルにカーソルを乗せると画像切替。
　▲水平操作できないマウスにも対応。
　モバイルでは実現できない大画面ならではのサムネイル
　表示。

感銘。