読者です 読者をやめる 読者になる 読者になる

tamlog

主にwebのフロント回り たまに登山

CSS3メモ

スポンサーリンク

最近css3を使う機会があったので忘れたときのためにメモ。 時間があったらいつかまとめるかも…

【ボックスシャドウ】 box-shadow: 水平方向 垂直方向 ぼかし距離 広がり距離 rgba(赤, 緑, 青, 透明度) 内側 [css] box-shadow: 0px 1px 1px rgba(100, 100, 100, 0.6) inset; [/css]

【テキストシャドウ】 text-shadow: 横方向 下方向 ぼかし 色 ; [css] text-shadow: 0 -1px 1px #000; [/css] 【グラデーション】 -moz-線状-gradient(方向, #開始色, #色途中点%, #色途中点%, #開始色);  (方向 top :上から下 left :左から右 left top :左上から右下)

-webkit-gradient(線状,開始位置, 終了位置, from(#開始色), color-stop(途中点, #色), color-stop(途中点,#色), to(#開始色※rgba(100, 100, 100, 0.6))); [css] -moz-linear-gradient(top,

E0615A,

C22D25 47%,

8F211B 48%,

8F211B); / Firefox/

-webkit-gradient(linear,left top, left bottom, from(#E0615A), color-stop(0.47, #C22D25), color-stop(0.48, #8F211B), to(#8F211B));/ Safari,Chrome/
[/css]

【角丸】 border-radius: 左上 右上 右下 左下; [css] border-radius:4px 4px 4px 4px; [/css]

トランジション】 プロパティ名 時間 パターン(liner, ease, ease-in, ease-out, ease-in-out) [css]

transition {

 background-color: #000;  color: #fff;  border-color: #fff;  -webkit-transition: background-color 2s linear,              color 2s ease,              border-color 2s ease-out; }

transition:hover {

 background-color: #fff;  color: #000;  border-color: #000; } [/css] 【アニメーション】 アニメーションネーム 時間  変化パターン (liner ,ease, ease-in, ease-out, ease-in-out) 繰り返し回数(infinite) 逆再生(alternate, normal) 遅延 [css] -webkit-animation: anim1 4s infinite;

@-webkit-keyframes anim1 { 0% { opacity: 1; } 40% { opacity: 1; } 50% { opacity: 0; } 90% { opacity: 0; } 100% { opacity: 1; } } [/css]

セレクタ】 input:not([type=radio]):not([type=checkbox]) input[type=radio],input[type=checkbox] :after :nth-child(1)