端くれプログラマの備忘録 – ページ 94 – 最近はウェブ系アプリ中心、あとWindowsアプリちょっと

[CSS] 基本メモ: キーフレームアニメーション (animation)

2015年2月10日2015年8月21日 @84kure

サンプル

<style>
#test1 {
    width: 50px;
    height: 50px;
    -webkit-animation: test1 5s linear 1s infinite alternate;
}
@-webkit-keyframes test1 {
    0% { width: 50px; background: orange; }
    50% { width: 100px; background: yellow; }
    100% { width: 150px; background: green; }
}
</style>

<style>

#test1 {

width: 50px;

height: 50px;

-webkit-animation: test1 5s linear 1s infinite alternate;

}

@-webkit-keyframes test1 {

0% { width: 50px; background: orange; }

50% { width: 100px; background: yellow; }

100% { width: 150px; background: green; }

}

</style>

<div id="test1">Test1</div>

1	<div id="test1">Test1</div>

参考サイト

animation－CSS3リファレンス
http://www.htmq.com/css3/animation.shtml

[CSS] 基本メモ: アニメーション (transition)

2015年2月9日2015年8月21日 @84kure

サンプル

<style>
div {
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 30px;
    background-color: orange;
    border: 2px solid orangered;
    transition: background-color 2s linear 0, height 2s ease-in-out 0;
}
div:hover {
    height: 200px;
    background-color: red;
}
</style>

<style>

div {

width: 100px;

height: 100px;

padding: 10px;

margin: 30px;

background-color: orange;

border: 2px solid orangered;

transition: background-color 2s linear 0, height 2s ease-in-out 0;

}

div:hover {

height: 200px;

background-color: red;

}

</style>

<div id="test1">Test1</div>

1	<div id="test1">Test1</div>

参考サイト

transition－CSS3リファレンス
http://www.htmq.com/css3/transition.shtml

[CSS] 基本メモ: 幾何変換傾斜

2015年2月8日2015年8月21日 @84kure

サンプル

<style>
p {
    background-color: lightsalmon;
    padding: 20px;
}
</style>

<style>

p {

background-color: lightsalmon;

padding: 20px;

}

</style>

<style>
p.test1 img { transform: skewx(15deg); }
</style>
<p class="test1">
<img src="sample.jpg">
</p>

<style>

p.test1 img { transform: skewx(15deg); }

</style>

</p>

<style>
p.test2 img { transform: skewy(15deg); }
</style>
<p class="test2">
<img src="sample.jpg">
</p>

<style>

p.test2 img { transform: skewy(15deg); }

</style>

</p>

<style>
p.test3 img { transform: skew(15deg,15deg); }
</style>
<p class="test3">
<img src="sample.jpg">
</p>

<style>

p.test3 img { transform: skew(15deg,15deg); }

</style>

</p>

<style>
p.test4 img { 
 transform-origin: 0 0;
 transform: skew(15deg,15deg);
}
</style>
<p class="test4">
<img src="sample.jpg">
</p>

<style>

p.test4 img {

transform-origin: 0 0;

transform: skew(15deg,15deg);

}

</style>

</p>

参考サイト

transform:skew()－CSS3リファレンス
http://www.htmq.com/css3/transform_skew.shtml

[CSS] 基本メモ: 幾何変換回転

2015年2月7日2015年8月21日 @84kure

サンプル

<style>
p {
    background-color: lightsalmon;
    padding: 20px;
}
</style>

<style>

p {

background-color: lightsalmon;

padding: 20px;

}

</style>

<style>
p.test1 img { transform: rotate(0deg); }
</style>
<p class="test1">
<img src="sample.jpg">
</p>

<style>

p.test1 img { transform: rotate(0deg); }

</style>

</p>

<style>
p.test2 img { transform: rotate(30deg); }
</style>
<p class="test2">
<img src="sample.jpg">
</p>

<style>

p.test2 img { transform: rotate(30deg); }

</style>

</p>

<style>
p.test3 img { transform: rotate(-15deg); }
</style>
<p class="test3">
<img src="sample.jpg">
</p>

<style>

p.test3 img { transform: rotate(-15deg); }

</style>

</p>

<style>
p.test4 img { 
 transform-origin: 0 0;
 transform: rotate(-15deg);
}
</style>
<p class="test4">
<img src="sample.jpg">
</p>

<style>

p.test4 img {

transform-origin: 0 0;

transform: rotate(-15deg);

}

</style>

</p>

参考サイト

transform:rotate()－CSS3リファレンス
http://www.htmq.com/css3/transform_rotate.shtml

[CSS] 基本メモ: 幾何変換移動

2015年2月6日2015年8月21日 @84kure

サンプル

<style>
p {
    background-color: lightsalmon;
    padding: 20px;
}
</style>

<style>

p {

background-color: lightsalmon;

padding: 20px;

}

</style>

<style>
p.test1 img { transform: translate(0px,0px); }
</style>
<p class="test1">
<img src="sample.jpg">
</p>

<style>

p.test1 img { transform: translate(0px,0px); }

</style>

</p>

<style>
p.test2 img { transform: translatex(50px); }
</style>
<p class="test2">
<img src="sample.jpg">
</p>

<style>

p.test2 img { transform: translatex(50px); }

</style>

</p>

<style>
p.test3 img { transform: translatey(-5px); }
</style>
<p class="test3">
<img src="sample.jpg">
</p>

<style>

p.test3 img { transform: translatey(-5px); }

</style>

</p>

参考サイト

transform:translate()－CSS3リファレンス
http://www.htmq.com/css3/transform_translate.shtml

[CSS] 基本メモ: 幾何変換スケーリング

2015年2月5日2015年8月21日 @84kure

サンプル

<style>
p {
    background-color: lightsalmon;
    padding: 20px;
}
</style>

<style>

p {

background-color: lightsalmon;

padding: 20px;

}

</style>

<style>
p.test1 img { transform: scale(1.0,1.0); }
</style>
<p class="test1">
<img src="sample.jpg">
</p>

<style>

p.test1 img { transform: scale(1.0,1.0); }

</style>

</p>

<style>
p.test2 img { transform: scalex(0.5); }
</style>
<p class="test2">
<img src="sample.jpg">
</p>

<style>

p.test2 img { transform: scalex(0.5); }

</style>

</p>

<style>
p.test3 img { transform: scaley(0.5); }
</style>
<p class="test3">
<img src="sample.jpg">
</p>

<style>

p.test3 img { transform: scaley(0.5); }

</style>

</p>

<style>
p.test4 img {
 transform-origin: 0px 0px;
 transform: scalex(0.5);
}
</style>
<p class="test4">
<img src="sample.jpg">
</p>

<style>

p.test4 img {

transform-origin: 0px 0px;

transform: scalex(0.5);

}

</style>

</p>

参考サイト

transform:scale()－CSS3リファレンス
http://www.htmq.com/css3/transform_scale.shtml

[CSS] 基本メモ: 円形グラデーション

2015年2月4日2015年8月21日 @84kure

書式
radial-gradient(開始位置と角度, 形状とサイズ, 開始色, 途中色, 終了色);

Google Chrome 及び Safariの実装
-webkit-gradient(radial, 開始位置, 開始位置の半径, 終了位置, 終了位置の半径, from(開始色), color-stop(位置, 途中色), to(終了色));

サンプル

<style>
div { 
    width: 200px;
    height: 200px;
    padding: 10px;
}
</style>

<style>

div {

width: 200px;

height: 200px;

padding: 10px;

}

</style>

<style>
#test1 { background: -webkit-radial-gradient(red, blue); }
</style>
<div id="test1">Hello Test1</div>

<style>

#test1 { background: -webkit-radial-gradient(red, blue); }

</style>

<div id="test1">Hello Test1</div>

<style>
#test2 { background: -webkit-radial-gradient(red, yellow, green, blue, purple); }
</style>
<div id="test2">Hello Test2</div>

<style>

#test2 { background: -webkit-radial-gradient(red, yellow, green, blue, purple); }

</style>

<div id="test2">Hello Test2</div>

<style>
#test3 { background: -webkit-radial-gradient(top left, red, yellow, blue); }
</style>
<div id="test3">Hello Test3</div>

<style>

#test3 { background: -webkit-radial-gradient(top left, red, yellow, blue); }

</style>

<div id="test3">Hello Test3</div>

参考サイト

radial-gradient()－CSS3リファレンス
http://www.htmq.com/css3/radial-gradient.shtml

[CSS] 基本メモ: 線形グラデーション

2015年2月3日2015年8月21日 @84kure

書式
linear-gradient(開始位置と角度, 開始色, 途中色, 終了色);

(Google Chrome 及び Safariの実装)
-webkit-gradient(linear, 開始位置, 終了位置, from(開始色), color-stop(位置, 途中色), to(終了色));

サンプル

<style>
div { 
    width: 300px;
    height: 100px;
    padding: 10px;
}
</style>

<style>

div {

width: 300px;

height: 100px;

padding: 10px;

}

</style>

<style>
#test1 { background: -webkit-linear-gradient(red, blue); }
</style>
<div id="test1">Hello Test1</div>

<style>

#test1 { background: -webkit-linear-gradient(red, blue); }

</style>

<div id="test1">Hello Test1</div>

<style>
#test2 { background: -webkit-linear-gradient(red, yellow, green, blue, purple); }
</style>
<div id="test2">Hello Test2</div>

<style>

#test2 { background: -webkit-linear-gradient(red, yellow, green, blue, purple); }

</style>

<div id="test2">Hello Test2</div>

<style>
#test3 { background: -webkit-linear-gradient(left, red, yellow, blue); }
</style>
<div id="test3">Hello Test3</div>

<style>

#test3 { background: -webkit-linear-gradient(left, red, yellow, blue); }

</style>

<div id="test3">Hello Test3</div>

<style>
#test4 { background: -webkit-linear-gradient(45deg, red, yellow, blue); }
</style>
<div id="test4">Hello Test4</div>

<style>

#test4 { background: -webkit-linear-gradient(45deg, red, yellow, blue); }

</style>

<div id="test4">Hello Test4</div>

参考サイト

linear-gradient()－CSS3リファレンス
http://www.htmq.com/css3/linear-gradient.shtml

[CSS] 基本メモ: テキストに影をつける

2015年2月2日2015年8月21日 @84kure

書式
水平方向の距離垂直方向の距離影のぼかし半径影の色

サンプル

<style>
body { font-family: Impact; font-size: 40px; color: red; }
</style>

<style>

body { font-family: Impact; font-size: 40px; color: red; }

</style>

<style>
#test1 { text-shadow: 3px 3px 0px darkblue; }
</style>
<div id="test1">Hello Test1</div>

<style>

#test1 { text-shadow: 3px 3px 0px darkblue; }

</style>

<div id="test1">Hello Test1</div>

<style>
#test2 { text-shadow: 5px 5px 3px darkblue; }
</style>
<div id="test2">Hello Test2</div>

<style>

#test2 { text-shadow: 5px 5px 3px darkblue; }

</style>

<div id="test2">Hello Test2</div>

<style>
#test3 { text-shadow: -5px -5px 3px darkblue; }
</style>
<div id="test3">Hello Test3</div>

<style>

#test3 { text-shadow: -5px -5px 3px darkblue; }

</style>

<div id="test3">Hello Test3</div>

参考サイト

text-shadow－CSS3リファレンス
http://www.htmq.com/css3/text-shadow.shtml

[CSS] 基本メモ: ボックスに影をつける

2015年2月1日2015年8月21日 @84kure

書式
box-shadow: 水平方向の距離垂直方向の距離ぼかし距離広がり距離影の色 inset;

サンプル

<style>
div {
    width: 100px;
    height: 20px;
    padding: 10px;
    margin: 30px;
    background-color: orange;
    border: 2px solid red;
}
</style>

<style>

div {

width: 100px;

height: 20px;

padding: 10px;

margin: 30px;

background-color: orange;

border: 2px solid red;

}

</style>

<style>
#test1 { box-shadow: 5px 10px; }
</style>
<div id="test1">test1</div>

<style>

#test1 { box-shadow: 5px 10px; }

</style>

<style>
#test2 { box-shadow: 5px 10px 5px; }
</style>
<div id="test2">test2</div>

<style>

#test2 { box-shadow: 5px 10px 5px; }

</style>

<style>
#test3 { box-shadow: 5px 10px 5px 5px; }
</style>
<div id="test2">test2</div>

<style>

#test3 { box-shadow: 5px 10px 5px 5px; }

</style>

<style>
#test4 { box-shadow: 5px 10px 5px 0px rgba(0,0,0,0.7); }
</style>
<div id="test2">test2</div>

<style>

#test4 { box-shadow: 5px 10px 5px 0px rgba(0,0,0,0.7); }

</style>

<style>
#test5 { box-shadow: 5px 10px 5px 0px rgba(0,0,0,0.7) inset; }
</style>
<div id="test2">test2</div>

<style>

#test5 { box-shadow: 5px 10px 5px 0px rgba(0,0,0,0.7) inset; }

</style>

参考サイト

box-shadow－CSS3リファレンス
http://www.htmq.com/css3/box-shadow.shtml