「css3」タグアーカイブ

ひさしぶり　svg IE11 高さauto バグる

css, ,

bodymovinのsvg突っ込んだら久しぶりにIEさんの制御不能に出くわすなど。
height:autoナシでwidthだけCSSで指定したら治った

IEでSVGタグを使った時にheight:autoが効かない | ふたえごのWEBテクニックブログ
https://www.futaego.com/2017/ie%E3%81%A7svg%E3%82%BF%E3%82%B0%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E6%99%82%E3%81%ABheightauto%E3%81%8C%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84/

いつかやってって言われそうなエフェクトメモ

css, js, , , , ,

いつかやってって言われそうだから調べたやつ、すぐわすれるメモ。

Ripple Effect

クリックしたところが波紋のように反応するgoogleさんが大好きなやつ

クリックで波紋を出すエフェクト（Ripple Effect）実装メモ – Qiita
https://qiita.com/nekoneko-wanwan/items/c9f26ce049bd422e555c
続きを読む いつかやってって言われそうなエフェクトメモ →

今週の開いてたタブ

開発関連, , ,

CSS Shapesでテキストを回り込ませるレイアウトを表現 | Webクリエイターボックス

CSS Shapesでテキストを回り込ませるレイアウトを表現


IEはfloatでええわ。

PhotoshopでSVG書き出しを行う際の注意点 – Qiita
https://qiita.com/hibikikudo/items/d5c1a87768f5de2d71bf#%E8%A7%A3%E6%B1%BA%E6%96%B9%E6%B3%95P
デザイナーさんへ。
続きを読む 今週の開いてたタブ →

久しぶりにcss animation途中で止めた

未分類

CSS アニメーションを一時停止する – Qiita
http://qiita.com/junya/items/8de71adeab0312d94dff

animation-play-state: running;
animation-play-state: paused;

memomemo

iPhoneで聞いてないやんけワレェ

-webkit-animation-play-state not working on iOS 8.1 (probably lower too) – Stack Overflow
http://stackoverflow.com/questions/27362216/webkit-animation-play-state-not-working-on-ios-8-1-probably-lower-too

css3 アニメーション モーション キャラ 参考サイト　メモ

css, 開発関連

css3アニメーションのレパートリーがきっと増える！動きの参考になる22サイト – ウェブ企画ラボ

css3アニメーションのレパートリーがきっと増える！動きの参考になる22サイト

Ordinary Days
http://ordinary-days.wataamee.com/

CSS 3D Clouds
https://www.clicktorelease.com/code/css3dclouds/

Stylie
http://jeremyckahn.github.io/stylie/

Bounce.js
http://bouncejs.com/#{s:[{T:”c”,e:”b”,d:1000,D:0,f:{x:1,y:1},t:{x:2,y:2},s:3,b:4},{T:”t”,e:”S”,d:1000,D:0,f:{x:0,y:0},t:{x:200,y:0},s:3,b:4}]}

CSS3 Animation Cheat Sheet – Justin Aguilar
http://www.justinaguilar.com/animations/index.html#

CSS will-changeプロパティについて

css, js,

モバイルでの高速化でなんか知ってることねがぁ〜〜〜？てよっしーに聞いたら出てきた。
will-changeって使ってますか？え？なにそれ？未来の話？？（よく見たら未来の話でした。一番下に対応ブラウザ書いてますがiOS Safari対応してません）

概要

Dev.Opera — CSS will-changeプロパティについて知っておくべきこと
https://dev.opera.com/articles/ja/css-will-change-property/

saraさんだぁ〜。最近良く見るなぁ。（これとか。http://postd.cc/the-state-of-svg-animation/）

どうやらGPUアクセラレーションのおまじないの新しいやつみたい。
transform: translateZ(0);
の新しい版。
事前にブラウザに何のプロパティを変化させるかを伝えておいて、それに描画を最適化させる準備をしてもらう→最初からGPU枠をあてがう（日本語おかしい？）のでカクついたりへんなバグが出ない。的な。

ただしいつもどおり、
使いすぎるな、
使い終わったら消せ、
とのこと。
美味しいビールも飲み過ぎたら身体に毒だよ程々にね、ということだね！わかりやすい！！！
スタイルシートで宣言されたwill-changeは削除できません
って書いてあるから基本JSで制御するらしい。不思議や。

対応ブラウザ

ん？っておい
一年前の記事執筆時点で対応がChrome Canary 36+、Opera Developer 23+、Firefox Nightlyだけってなんだよ。俺は今の今使える技術はねぇかって聞いたんだよー！

Can I use… Support tables for HTML5, CSS3, etc
http://caniuse.com/#feat=will-change

iOS Safari対応してないじゃねぇか…！よっしーめ！！！