透過PNGで枠だけ作って背景をCSS3アニメーションするという新テクニック
2011年06月13日-
スポンサード リンク
Color Animate Any Shape with a Knockout PNG | CSS-Tricks
透過PNGで枠だけ作って背景をCSS3アニメーションするという新テクニックが掲載されています。
CSS3の登場でハックの幅は広がりましたが、今後こういうテクニックが色々現れてくると思うと楽しみです。
まずはマリリンをかたどった縁の画像を透過PNGで作ります
このデモは必見
あとは背景をCSS3の keyframes, animation を使ってアニメーションさせると、なんとマリリンが７色に変化します。これはすごい！
マリリンはたまったものではありませんが、色々応用の効くテクニックかもしれませんね
関連エントリ
透過PNGで枠だけ作って背景をCSS3アニメーションするという新テクニックが掲載されています。
CSS3の登場でハックの幅は広がりましたが、今後こういうテクニックが色々現れてくると思うと楽しみです。
まずはマリリンをかたどった縁の画像を透過PNGで作ります
このデモは必見
あとは背景をCSS3の keyframes, animation を使ってアニメーションさせると、なんとマリリンが７色に変化します。これはすごい！
マリリンはたまったものではありませんが、色々応用の効くテクニックかもしれませんね
関連エントリ
スポンサード リンク
By.KJ : 2011年06月13日 10:07 
間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- AIでフォーム生成できる「Formcn AI」
- ウェブサイトの CSS を解析してくれる「Online CSS Code Quality Analyzer」
- 英文を文鳥に変換するフォント「ぎゅうぎゅう文鳥」
- Tiktok公式のフリーフォント「TikTok Sans」
- React+Tailwindなサイトで使えるUIライブラリ「SmoothUI」
- 15000以上のいい感じの線形アイコン「Lineicons」
- CSSやTailwindでのCSSスニペットライブラリ「CSS Snippets Library」
- AIを使ってサイトマップが作れる「Octopus.do」
- ライブラリ依存のないモーダルオープンライブラリ「Blendy」
- 個性的な明朝フリーフォント「築豊初号明朝OFL」
- 過去のエントリ
