乱雑モックアップ » CSS3

ie-css3.jsのベータが取れて名前がSelectivizr(:select[ivizr]？)に変わってた

まこと — Thu, 23 Sep 2010 09:25:42 +0000

IE8以下にcss3の擬似クラスを対応させるjsのバージョンが1.0になって名前と配布サイトが変わってた。
Selectivizr – CSS3 pseudo-class and attribute selectors for IE 6-8

いつのまにか擬似否定クラス E:not(s) にも対応してた(0.9.7bから？)

使い方メモ

ie-css3.jsと変わらない(おそらく)

上記サイトからelectivizr.jsとお好きなjsライブラリをダウンロードしてくる
NWMatcher – CSS3 Selector and MatcherにあるNWMatcher 1.2.2.jsを使うと全開でいけるみたい。

ヘッダ部分の例

気をつける事
やっぱり、ローカルじゃ機能しない。
head無いに書いたcssやインラインのcssの指定は効かない。

そこらへんは前回試した0.9.5bと同じですた。
ie-css3.js ( :nth-childなどのCSS3擬似クラスをIEでも使えるようにするjs ) で失敗した事。 | 乱雑モックアップ

css3のanimationとtransitionとtransform

まこと — Sun, 15 Aug 2010 12:59:15 +0000

animationとtransitionがcss3のアニメーション用プロパティで
transformは変形用のプロパティ、2Dと3Dは別なのか?一緒なのか?
とりあえずこの3つが頭の中でホットケーキになっちゃうくらいこんがらがっちゃってるので練習。
tで始まるのが多すぎるんだ。

animations

animationプロパティの特徴とか感じた事とか

ループ出来る。
keyframesを使って細かい設定が出来る。
hoverで動かすとマウスが外れた時すぐに初期状態に戻るのが格好悪い。
なのでループでずっと動かしているか、javascriptと絡めたりした方がいいのかな？と思ったり

animation使用例

webkit系のブラウザのみ動作します。

ease
linear
ease-in
ease-out
ease-in-out

ほら、マウスが外れた瞬間ガチっと初期位置にもどるのが格好悪いでしょう？

html

  
    
      ease
      linear
      ease-in
      ease-out
      ease-in-out

css

/*キーフレームはアニメーションの設計図みたいなものだと思ってます*/
@-webkit-keyframes 'ani1' {
0% {
-webkit-transform: translate(0, 0);
}
25% {
-webkit-transform: translate(75%, 100%);
}
50% {
-webkit-transform: translate(50%, 50%);
}
75% {
-webkit-transform: translate(25%, 100%);
}
100% {
-webkit-transform: translate(100%, 0%);
}
}

.ani1:hover li {
  -webkit-animation-name: 'ani1'; /*キーフレームを指定*/
  -webkit-animation-duration: 1s; /*処理にかかる時間、単位はs、これは1秒*/
  -webkit-animation-direction:alternate; /*偶数回時に逆再生させる*/
  -webkit-animation-iteration-count: infinite; /*ループ回数の指定、これは無限*/
}

/*animationのイージング*/
.ani1 li.ease {
  -webkit-animation-timing-function: ease;/*イージングの種類*/
}
.ani1 li.linear {
  -webkit-animation-timing-function: linear;/*イージングの種類*/
}
.ani1 li.ease-in {
  -webkit-animation-timing-function: ease-in;/*イージングの種類*/
}
.ani1 li.ease-out {
  -webkit-animationn-timing-function: ease-out;/*イージングの種類*/
}
.ani1 li.ease-in-out {
  -webkit-animation-timing-function: ease-in-out;/*イージングの種類*/
}

animation-timing-functionはkeyframesの中でも指定できたり色んなところに記述できる？

ショートハンドを使ってみる

CSS Animations Module Level 3を参照すると以下の記述でショートハンドになるそうな。

[ || || || || || ] [, [ || || || || || ] ]*

読み方(w3cが解説に使う記号の意味)がイマイチわかってないけど、.ani1:hover liの指定をショートハンドで書き直すとこんな感じ？
[]内の値が順番関係なしで重複しなければok？
でもそしたらdurationとdelayの区別はどうやってつけてるんだ？先に登場するほうがdurationなのかな。

.ani1:hover li {
-webkit-animation:'ani1' 1s infinite alternate;
}

動作確認

ease
linear
ease-in
ease-out
ease-in-out

transitions

transitionプロパティの特徴とか感じた事とか

ループさせられない。
変更前と変更後の2つをいったり来たりするので手軽に動きのあるロールオーバーメニューが作れる
これ好きだな。

transition使用例

ease
linear
ease-in
ease-out
ease-in-out

html

  
    
      ease
      linear
      ease-in
      ease-out
      ease-in-out

css

.tra1 li {
  -webkit-transition-duration: 1s;
}
.tra1:hover li {
  -webkit-transform: translate(100%, 0);
}

/*transitionのイージング*/
.tra1 li.ease {
  -webkit-transition-timing-function: ease;
}
.tra1 li.linear {
  -webkit-transition-timing-function: linear;
}
.tra1 li.ease-in {
  -webkit-transition-timing-function: ease-in;
}
.tra1 li.ease-out {
  -webkit-transition-timing-function: ease-out;
}
.tra1 li.ease-in-out {
  -webkit-transition-timing-function: ease-in-out;
}

ショートハンド

animationsと同じでtransitionsのページを参考に
CSS Transitions Module Level 3

[<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’> [, [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’>]]*

この例だと特に使う必要がないけどこんな感じ？

.tra1 li {
  -webkit-transition: 1s;
}
.tra1:hover li {
  -webkit-transform: translate(100%, 0);
}
/*transitionのイージング*/
.tra1 .ease {
  -webkit-transition-timing-function: ease;
}
.tra1 .linear {
  -webkit-transition-timing-function: linear;
}
.tra1 .ease-in {
  -webkit-transition-timing-function: ease-in;
}
.tra1 .ease-out {
  -webkit-transition-timing-function: ease-out;
}
.tra1 .ease-in-out {
  -webkit-transition-timing-function: ease-in-out;
}

durationがないと上手く動かないな。

もしくはこんな感じ？

.tra1:hover li {
  -webkit-transform: translate(100%, 0);
}
/*transitionのイージング*/
.tra1 li.ease {
  -webkit-transition:1s ease;
}
.tra1 li.linear {
  -webkit-transition:1s linear;
}
.tra1 li.ease-in {
  -webkit-transition:1s ease-in;
}
.tra1 li.ease-out {
  -webkit-transition:1s ease-out;
}
.tra1 li.ease-in-out {
  -webkit-transition:1s ease-in-out;
}

もう少しシンプルな書き方が出来そうだけどなぁ。

transform

animationのkeyframesやtransitionの中で出てきたtransformは要素を変形させるプロパティでFirefoxも3.1から対応してるんですって(-moz-が必要)
参考 / CSS3大接近：第3回　transformプロパティ｜gihyo.jp
skew(ゆがみ)とかscale(拡大)とかrotate(回転)とかあってtransalteは移動。

translate(x座標, y座標)

機能移動

初期値 0

値ポジティブ，ネガティブどちらも可
・％
・相対値(emなど)，絶対値（pxなど）

適用できる要素・ブロックレベル要素
・インラインレベル要素

継承なし（親要素に指定しても子要素に継承されません）

記述例 Firefox3.1betaの場合：
・-moz-transoform:translate(xxdeg);
・-moz-transoform:translateX(xxdeg);
・-moz-transoform:translateY(xxdeg);
Webkit系（Safari3.1，Webkit,Google chromeの場合：
・-webkit-transform:translate(xxdeg);
・-webkit-transoform:translateX(xxdeg);
・-webkit-transoform:translateY(xxdeg);

機能	移動
初期値	0
値	ポジティブ，ネガティブどちらも可・％・相対値(emなど)，絶対値（pxなど）
適用できる要素	・ブロックレベル要素・インラインレベル要素
継承	なし（親要素に指定しても子要素に継承されません）
記述例	Firefox3.1betaの場合：・-moz-transoform:translate(xxdeg); ・-moz-transoform:translateX(xxdeg); ・-moz-transoform:translateY(xxdeg); Webkit系（Safari3.1，Webkit,Google chromeの場合：・-webkit-transform:translate(xxdeg); ・-webkit-transoform:translateX(xxdeg); ・-webkit-transoform:translateY(xxdeg);

参考

CSS Animations Module Level 3
CSS Transitions Module Level 3

CSS 2D Transforms Module Level 3
CSS 3D Transforms Module Level 3

しかし毎日暑いですねぇ…

自動改行(word-break・word-wrap・white-space プロパティ)をコントロールして、テキストがボックスから飛び出さないようにしたい。

まこと — Mon, 31 May 2010 15:50:33 +0000

ん～、違いがようわからん。

上記3プロパティの動作確認用ページ (ポップアップで開く)
Firefoxはどれを指定しても、連続した半角英数が長いとtableが伸びちゃうなぁ。

以下、自分の解釈メモ ( なので正しいかどうか怪しいです )。

word-break

禁則処理の設定?
break-allにすると日本語の文章中どこでも折り返して、アルファベットもどこでも折り返す。
選べる値

normal
keep-all
loose
break-strict
break-all

word-wrap

英単語の折り返し、break-wordで英単語中でも折り返す。
日本語は関係ない?
選べる値

normal
break-word

white-space

半角スペース、タブ、改行の処理
pre-wrapだと、基本動作はpre(半角スペース、タブ、改行はそのまま生かされる)でボックスの幅で改行する。
選べる値

normal
pre
nowrap
pre-wrap
pre-line

ブロックレベル要素を勝手に拡張したり、ハミ出したりしないかチェック

*色の意味

自動で折り返す指定
二つ同時に指定すると折り返す
勝手に拡張したりハミ出したり


	word-break : break-all ;	word-wrap : break-word ;	white-space : pre-wrap ;
firefox 3.6.3	×アドレス ×日本語 ×アルファベット	×アドレス ×日本語 ×アルファベット	×アルファベット
chrome 5.0.375	×アドレス ×日本語 ×アルファベット	ok	×アルファベット
safari 4.0.5	×アドレス ×日本語 ×アルファベット	ok	×アルファベット
opera 10.53	×日本語 ×アルファベット	ok	×アルファベット
IE6	×日本語 ×アルファベット	ok	×日本語 ×アルファベット
IE7	×日本語 ×アルファベット	ok	×日本語 ×アルファベット
IE8	×日本語 ×アルファベット	ok	×アルファベット


	word-break : break-all ;	word-wrap : break-word ;	white-space : pre-wrap ;
firefox 3.6.3	×アルファベット	ok	preになる ×アルファベット
chrome 5.0.375	ok	ok	preになる ×アルファベット
safari 4.0.5	ok	ok	preになる ×アルファベット
opera 10.53	×アルファベット	ok	preになる ×アルファベット
IE6	ok	ok	アルファベット分伸びるけど他はwidthの位置で折り返してる
IE7	ok	ok	×アルファベット
IE8	ok	ok	preになる ×アルファベット

乱雑モックアップ » CSS3

ie-css3.jsのベータが取れて名前がSelectivizr(:select[ivizr]？)に変わってた

使い方メモ

css3のanimationとtransitionとtransform

animations

animationプロパティの特徴とか感じた事とか

animation使用例

ショートハンドを使ってみる

動作確認

transitions

transition使用例

ショートハンド

transform

参考

自動改行(word-break・word-wrap・white-space プロパティ)をコントロールして、テキストがボックスから飛び出さないようにしたい。

word-break

word-wrap

white-space

ブロックレベル要素を勝手に拡張したり、ハミ出したりしないかチェック

崩さないようにする指定は

css3の:nth-last-child(n)や:nth-last-of-type(n)で均等配置

前置きが長くなったけど、:nth-last-child(n)や:nth-last-of-type(n)の均等配置

E:nth-last-child(n)

ところで、

ie-css3.js ( :nth-childなどのCSS3擬似クラスをIEでも使えるようにするjs ) で失敗した事。

その原因は2つありました。

書いてあった＞＜；；

透過pngにbox-shadowを指定したらドロップシャドウみたいな効果を得られるか?

box-shadowテスト1

box-shadowテスト2

text-shadowだったら?

ちなみにIEのfilter:growだと

linear-gradientでグラデーションと斜めストライプ

自分メモ

疑問

グラデーションの使い方

開始位置をdegで指定した場合。

赤から青のグラデーションを例に。

斜めストライプの作り方

firefox

Safari,Chrome

注意

参考｜ストライプ

参考｜ジェネレーター

webkitでは(今のところ？)border-radiusのショートハンドが使えない事とか。

transformで回転させてみる、の続き。

transform-origin:の挙動を確認

mozilaとwebkitを、IEの位置に合わせる

完成(たぶん)

tableにborder-radiusが効かない(ように見えた)

CSS3 / テキストを選択した際のハイライト表示のコントロールが

cssセレクタ｜パターンマッチングとか