1227 Text の 2D トランジション (text-shadow, white-sp, letter-sp, word-sp) テキストを変化させるトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover または Click ボタンを クリックすると テキストのトランジションが動きます プロパティ text-shadow テキストの影を指定します 値説明 none 影なし ( 初期値 ) 水平方向の距離 負の値も可 ( 必須項目 ) 垂直方向の距離 負の値も可 ( 必須項目 ) 値影のぼかしの範囲 ( 省略可 ) 影の色 ( 省略可 ) text-shadow: 5px 5px 2px red; text-shadow: #FF0000 20px 10px; のように指定しま す 水平方向の距離は 正の値であればテキストの右方向の影になり 負の値であれば左方 向の影になります 垂直方向の距離は 正の値であればテキストの下方向の影になり 負の値であれば上方向の影になります 影の色は先頭の値に指定しても 最後の値に指 定しても構いません text-shadow プロパティは テキストに 1 つまたは複数の影を指定できます 次のように 複数の影の値の指定をカンマ, で区切って指定します text-shadow: 5px 5px 2px red, -5px -5px 2px blue, 10px -5px 4px #00FF00; letter-spacing テキストの文字間の間隔を指定します 値 説 明 normal 数値 inherit 文字間隔に特別な指定はしない ( 初期値 ) 文字間が指定した長さの間隔になる 負の値も可 親要素のletter-spacingの値が継承される 1
word-spacing テキストの単語間の間隔を指定します 値 説 明 normal 数値 inherit 単語間の間隔に特別な指定はしない ( 初期値 ) 単語間が指定した長さの間隔になる 負の値も可 親要素のword-spacingの値が継承される white-space 要素内のスペース ( 空白 ) がどのように処理されるかを指定します 値 説 明 normal 連続した半角スペース タブ 改行が1つの半角スペースとして扱われる テキストは自動改行される ( 初期値 ) 連続した半角スペース タブ 改行が1つの半角スペースとして扱われる テ nowrap キストは自動改行されない (no wordwrap) 改行タグ <br /> が現れるまで1 行 で表示される pre inherit 連続した半角スペース タブ 改行がそのまま維持 (preserved) され表示さ親要素のwhite-spaceの値が継承される white-space: normal; の指定または white-space の指定なしの場合で 特定の半角スペ ースを半角スペースとして表示したい場合には 文字名 ( キーワード ) または 文字番号 を表示したい半角スペースの個数分記述すると 半角スペースとし て表示されます サンプル CSS1 テキストの大きさを変える ボタンを hover すると テキストが徐々に拡大し色が変化します EnlargeText の説明 HTML の記述 (EnlargeText.html) id 属性 stage の div 要素 ( トランジションが動くステージ ) を作り その中にボックスや 画像を記述します id 属性 button の div 要素を作ります これがボタン ( 親ボックス ) になります font28gothicb クラスでフォントを指定し Hover を記述します id 属性 div1 の div 要素 ( 子ボックス ) の中にテキスト Hello!! CSS3 を記述します 2
<!DOCTYPE html> <html> <head> <title>enlargetext</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="enlargetext.css"> </head> <body> <p> テキストを拡大する </p> <div id="stage"> <div id="button"><font class="font28gothicb">hover</font> <div id="div1">hello!! CSS3 </body> </html> CSS の記述 (EnlargeText.css) 先ず トランジションが動く #stage の記述をします #stage { width: 600px; height: 250px; background-color: #000000; position: relative; ボタンとなる #button ボックス ( 親ボックス ) を記述します position は absolute にして 位置は top: 20px; left: 247px; で指定します 角丸矩形のボタンにしたいので border-radius プロパティでボックスの 4 隅の角丸の半径を 10px で指定します #button { top: 20px; left: 247px; width: 100px; height: 50px; border: solid 3px #666666; border-radius: 10px; color: #666666; line-height: 55px; cursor: default; テキストを入れる #div1 ボックス ( 子ボックス ) を記述します position は absolute にし て 位置は top: 100px; left: -120px;(#button ボックスの左上端を基準とした位置 ) 3
で指定します テキストの色は color: #99FF00; テキストのサイズは 64px で指定します テキスト Hello!! CSS3 に含まれる半角スペースで自動改行されるので 自動改行されないように white-space: nowrap; の指定をします テキストを徐々に拡大するため transition の記述をします 1 秒 linear でトランジションするように記述します #div1 { top: 100px; left: -120px; width: auto; height: auto; color: #99FF00; font: bold 64px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; white-space: nowrap; transition: 1s linear; -webkit-transition: 1s linear; #button ボックス ( ボタン ) を hover したら #button ボックスの背景色を background-color: #555555;( 灰色 ) に Hover の文字を color: #000000;( 黒色 ) 変化させます #button:hover { background-color: #555555; color: #000000; #button ボックスを hover した時の変化として #div1 ボックスの位置を top: 80px; left: -220px; に テキストの色を color: #00FFFF;( 水色 ) に テキストのサイズを font-size: 98px; に変更します #button:hover #div1 { top: 80px; left: -220px; color: #00FFFF; font-size: 98px; 最後にボタンに表示するテキストのフォントの指定をします.font28GothicB { font: bold 28px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; 4
サンプル CSS2 テキストを傾斜させる ボタンを hover すると テキストが徐々に反対側に傾斜し色が変化します SkewText の説明 HTML の記述 (SkewText.html) id 属性 stage の div 要素 ( トランジションが動くステージ ) を作り その中にボックスや画像を記述します id 属性 button の div 要素を作ります これがボタン ( 親ボックス ) になります font28gothicb クラスでフォントを指定し Hover を記述します id 属性 div1 の div 要素 ( 子ボックス ) の中にテキスト CSS3 Transition を記述します <!DOCTYPE html> <html> <head> <title>skewtext</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="skewtext.css"> </head> <body> <p> テキストを傾斜させる </p> <div id="stage"> <div id="button"><font class="font28gothicb">hover</font> <div id="div1">css3 Transition </body> </html> CSS の記述 (SkewText.css) 先ず トランジションが動く #stage の記述をします #stage { width: 600px; height: 250px; background-color: #000000; position: relative; 5
ボタンとなる #button ボックス ( 親ボックス ) を記述します position は absolute にして 位置は top: 20px; left: 247px; で指定します 角丸矩形のボタンにしたいので border-radius プロパティでボックスの 4 隅の角丸の半径を 10px で指定します #button { top: 20px; left: 247px; width: 100px; height: 50px; border: solid 3px #666666; border-radius: 10px; color: #666666; line-height: 55px; cursor: default; テキストを入れる #div1 ボックス ( 子ボックス ) を記述します position は absolute にして 位置は top: 70px; left: -200px;(#button ボックスの左上端を基準とした位置 ) で指定します テキストの色は color: #FFFF00;( 黄色 ) で指定します テキストのサイズは 64px で指定します テキストがボックスの中心に納まるように width: 500px; height: 65px; で指定します テキストが十分に収まる width の指定をしているので自動改行されないため white-space: nowrap; の指定は必要ありません transform プロパティで transform: skew(40deg, 20deg); を指定し X 軸方向に 40deg Y 軸方向に 20deg 傾けます テキストを徐々に反対側に傾斜させるため transition の記述をします 5 秒 linear でトランジションするように記述します #div1 { top: 70px; left: -200px; width: 500px; height: 65px; color: #FFFF00; font: bold 64px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; transform: skew(40deg, 20deg); -webkit-transform: skew(40deg, 20deg); transition: 5s linear; -webkit-transition: 5s linear; #button ボックス ( ボタン ) を hover したら #button ボックスの背景色を background-color: 6
#555555;( 灰色 ) に Hover の文字を color: #000000;( 黒色 ) 変化させます #button:hover { background-color: #555555; color: #000000; #button ボックスを hover した時の変化として #div1 ボックスのテキストの色を color: # FF0000;( 赤色 ) に テキストの傾きを transform: skew(-40deg, -20deg); と指定して X 軸方向へ -40deg Y 軸方向へ -20deg に変更します #button:hover #div1 { color: #FF0000; transform: skew(-40deg, -20deg); -webkit-transform: skew(-40deg, -20deg); 最後にボタンに表示するテキストのフォントの指定をします.font28GothicB { font: bold 28px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; サンプル CSS3 テキストの影を変化させる 1 ボタンを hover すると テキストが大きくなるのに合わせて影も大きくなります TextShadow1 の説明 HTML の記述 (TextShadow1.html) id 属性 stage の div 要素 ( トランジションが動くステージ ) を作り その中にボックスや 画像を記述します 7
id 属性 button の div 要素を作ります これがボタン ( 親ボックス ) になります font28gothicb クラスでフォントを指定し Hover を記述します id 属性 div1 の div 要素 ( 子ボックス ) の中にテキスト Hello!! CSS3 を記述します <!DOCTYPE html> <html> <head> <title>textshadow1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="textshadow1.css"> </head> <body> <p> テキストに影をつけて動かす (1) </p> <div id="stage"> <div id="button"><font class="font28gothicb">hover</font> <div id="div1">hello!! CSS3 </body> </html> CSS の記述 (TextShadow1.css) 先ず トランジションが動く #stage の記述をします 背景色は background-color: #FFFFFF; ( 白色 ) にして border: solid 1px #000000; で黒色の枠取りをします #stage { width: 600px; height: 250px; background-color: #FFFFFF; border: solid 1px #000000; position: relative; ボタンとなる #button ボックス ( 親ボックス ) を記述します position は absolute にして 位置は top: 20px; left: 247px; で指定します 角丸矩形のボタンにしたいので border-radius プロパティでボックスの4 隅の角丸の半径を 10px で指定します ボーダーは border: solid 3px #CCCCCC; で明るい灰色 テキストの色も color: #CCCCCC; で明るい灰色にしています #button { top: 20px; left: 247px; width: 100px; height: 50px; border: solid 3px #CCCCCC; border-radius: 10px; 8
color: #CCCCCC; line-height: 55px; cursor: default; テキストを入れる #div1 ボックス ( 子ボックス ) を記述します position は absolute にして 位置は top: 90px; left: -160px;(#button ボックスの左上端を基準とした位置 ) で指定します テキストの色は color: #99FF00;( 黄緑色 ) で指定します テキストのサイズは 64px で指定します テキストがボックスの中心に納まるように width: 400px; height: 70px; で指定します width の指定をしてテキストを収めているので自動改行されないため white-space: nowrap; の指定は必要ありません text-shadow プロパティで text-shadow: 5px 5px 2px dimgray; を指定し テキストに灰色の影をつけます テキストを徐々に拡大するため transition の記述をします 1 秒 linear でトランジションするように記述します #div1 { top: 90px; left: -160px; width: 400px; height: 70px; color: #99FF00; font: bold 64px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; text-shadow: 5px 5px 2px dimgray; transition: 1s linear; -webkit-transition: 1s linear; #button ボックス ( ボタン ) を hover したら #button ボックスの背景色を background-color: #EEEEEE;( 明るい灰色 ) に Hover の文字を color: #999999;( 灰色 ) 変化させます #button:hover { background-color: #EEEEEE; color: #999999; #button ボックスを hover した時の変化として #div1 ボックスの位置を top: 70px; left: -250px; に サイズを width: 600px; height: 120px; に テキストの色を color: #00FFFF; ( 水色 ) に テキストのフォントサイズを font-size: 98px; に拡大し テキストの影を 9
text-shadow: 15px 15px 10px gray, 20px 20px 20px gray; で指定して灰色を少し薄くし ます #button:hover #div1 { top: 70px; left: -250px; width: 600px; height: 120px; color: #00FFFF; font-size: 98px; text-shadow: 15px 15px 10px gray, 20px 20px 20px gray; 最後にボタンに表示するテキストのフォントの指定をします.font28GothicB { font: bold 28px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; サンプル CSS4 テキストの影を変化させる 2 ボタンを hover すると テキストが上方に移動するのに合わせて 上方から光が当たって いるように影だけが大きく 薄くぼやけるように広がります TextShadow2 の説明 HTML の記述 (TextShadow2.html) id 属性 stage の div 要素 ( トランジションが動くステージ ) を作り その中にボックスや 画像を記述します id 属性 button の div 要素を作ります これがボタン ( 親ボックス ) になります 10
font28gothicb クラスでフォントを指定し Hover を記述します id 属性 shadow1 の div 要素 ( 子ボックス ) の中にテキスト Hello!! HTML5 を記述します id 属性 div1 の div 要素 ( 子ボックス ) の中にテキスト Hello!! HTML5 を記述します <!DOCTYPE html> <html> <head> <title>textshadow2</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="textshadow2.css"> </head> <body> <p> テキストに影をつけて動かす (2) </p> <div id="stage"> <div id="button"><font class="font28gothicb">hover</font> <div id="shadow1">hellow!! HTML5 <div id="div1">hellow!! HTML5 </body> </html> CSS の記述 (TextShadow2.css) 先ず トランジションが動く #stage の記述をします 背景色は background-color: #FFFFFF; ( 白色 ) にして border: solid 1px #000000; で黒色の枠取りをします #stage { width: 600px; height: 450px; background-color: #FFFFFF; border: solid 1px #000000; position: relative; ボタンとなる #button ボックス ( 親ボックス ) を記述します position は absolute にして 位置は top: 20px; left: 247px; で指定します 角丸矩形のボタンにしたいので border-radius プロパティでボックスの4 隅の角丸の半径を 10px で指定します ボーダーは border: solid 3px #CCCCCC; で明るい灰色 テキストの色も color: #CCCCCC; で明るい灰色にしています #button { top: 20px; left: 247px; width: 100px; height: 50px; border: solid 3px #CCCCCC; 11
border-radius: 10px; color: #CCCCCC; line-height: 55px; cursor: default; 影になるテキストの #shadow1 ボックス ( 子ボックス ) を記述します position は absolute にして 位置は top: 348px; left: -180px;(#button ボックスの左上端を基準とした位置 ) で指定します テキストの色は color: transparent;( 透明 ) で指定します (rgba を使用して color: rgba( 255, 255, 255, 0.0 ); で指定しても同じです ) テキストのサイズは 48px で指定します テキストがボックスの中心に納まるように width: 450px; height: 60px; で指定します width の指定をしてテキストを収めているので自動改行されないため white-space: nowrap; の指定は必要ありません text-shadow プロパティで text-shadow: 0px 5px 2px dimgray; を指定し テキストに下向きの灰色の影をつけます テキスト ( 透明 ) を徐々に拡大するため transition の記述をします 2 秒 linear でトランジションするように記述します #shadow1 { top: 348px; left: -180px; width: 450px; height: 60px; color: transparent; font: bold 48px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; text-shadow: 0px 5px 2px dimgray; transition: 2s linear; -webkit-transition: 2s linear; テキストを入れる #div1 ボックス ( 子ボックス ) を記述します position は absolute にし て 位置は top: 350px; left: -180px;(#button ボックスの左上端を基準とした位置 ) で指定します テキストの色は color: #99FF00;( 黄緑色 ) で指定します テキストのサイ ズは 48px で指定します テキストがボックスの中心に納まるように width: 450px; height: 60px; で指定します width の指定をしてテキストを収めているので自動改行されないため white-space: nowrap; の指定は必要ありません このテキストには影をつけません テキストを上方に移動するため transition の記述をし ます 2 秒 linear でトランジションするように記述します 12
#div1 { top: 350px; left: -180px; width: 450px; height: 60px; color: #99FF00; font: bold 48px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; transition: 2s linear; -webkit-transition: 2s linear; #button ボックス ( ボタン ) を hover したら #button ボックスの背景色を background-color: #EEEEEE;( 明るい灰色 ) に Hover の文字を color: #999999;( 灰色 ) 変化させます #button:hover { background-color: #EEEEEE; color: #999999; #button ボックスを hover した時の変化として #shadow1 ボックスの位置を top: 300px; left: -250px; に サイズを width: 600px; height: 120px; に テキスト ( 透明 ) のフォントサイズを font-size: 80px; に拡大し テキストの影を text-shadow: 0px 20px 30px gray, 0px 20px 50px gray; で指定して灰色を少し薄くします #button:hover #shadow1 { top: 300px; left: -250px; width: 600px; height: 120px; font-size: 80px; text-shadow: 0px 20px 30px gray, 0px 20px 50px gray; #button ボックスを hover した時の変化として #div1 ボックスの位置を top: 100px; にし て上方に移動し テキストの色を color: #00FFFF;( 水色 ) に変更します #button:hover #div1 { top: 100px; color: #00FFFF; 最後にボタンに表示するテキストのフォントの指定をします 13
.font28gothicb { font: bold 28px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; 注 : 影になるテキストの #shadow1 ボックスで テキストの色に color: transparent;( 透明 ) を指定していますが IE の場合は color に transparent を指定すると text-shadow: 0px 5px 2px dimgray; の dimgray が適用されず 影が表示されません (IE-11 で確認 2015 年 11 月 ) サンプル CSS5 テキストの影を変化させる 3 ボタンを hover すると テキストが黒色になり 合わせて影が 4 色の影に分裂します TextShadow3 の説明 HTML の記述 (TextShadow3.html) id 属性 stage の div 要素 ( トランジションが動くステージ ) を作り その中にボックスや画像を記述します id 属性 button の div 要素を作ります これがボタン ( 親ボックス ) になります font28gothicb クラスでフォントを指定し Hover を記述します id 属性 div1 の div 要素 ( 子ボックス ) の中にテキスト Hello!! を記述します <!DOCTYPE html> <html> <head> <title>textshadow3</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="textshadow3.css"> </head> <body> <p> テキストに影をつけて動かす (3) </p> <div id="stage"> <div id="button"><font class="font28gothicb">hover</font> <div id="div1">hello!! 14
</body> </html> CSS の記述 (TextShadow3.css) 先ず トランジションが動く #stage の記述をします 背景色は background-color: #FFFFFF; ( 白色 ) にして border: solid 1px #000000; で黒色の枠取りをします #stage { width: 600px; height: 300px; background-color: #FFFFFF; border: solid 1px #000000; position: relative; ボタンとなる #button ボックス ( 親ボックス ) を記述します position は absolute にして 位置は top: 20px; left: 247px; で指定します 角丸矩形のボタンにしたいので border-radius プロパティでボックスの4 隅の角丸の半径を 10px で指定します ボーダーは border: solid 3px #CCCCCC; で明るい灰色 テキストの色も color: #CCCCCC; で明るい灰色にしています #button { top: 20px; left: 247px; width: 100px; height: 50px; border: solid 3px #CCCCCC; border-radius: 10px; color: #CCCCCC; line-height: 55px; cursor: default; テキストを入れる #div1 ボックス ( 子ボックス ) を記述します position は absolute にし て 位置は top: 120px; left: -150px;(#button ボックスの左上端を基準とした位置 ) で指定します テキストの色は color: #FFFFFF;( 白色 ) で指定します テキストのサイズ は 72px で指定します テキストがボックスの中心に納まるように width: 400px; height: 70px; で指定します テキスト Hello!! には半角スペースが含まれていないので自動改 行されないため white-space: nowrap; の指定は必要ありません text-shadow プロパティで text-shadow: 5px 5px 40px red, -5px -5px 40px yellow, -5px 15
5px 40px green, 5px -5px 40px blue; を指定し 赤色 黄色 緑色 青色の4つの影をつけます 影のぼかし範囲を 40px にしてぼかしを大きくして 4つの影が重なるように指定します 影を徐々に分裂するように離すため transition の記述をします 1 秒 linear でトランジションするように記述します #div1 { top: 120px; left: -150px; width: 400px; height: 150px; color: #FFFFFF; font: bold 72px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; text-shadow: 5px 5px 40px red, -5px -5px 40px yellow, -5px 5px 40px green, 5px -5px 40px blue; transition: 1s linear; -webkit-transition: 1s linear; #button ボックス ( ボタン ) を hover したら #button ボックスの背景色を background-color: #EEEEEE;( 明るい灰色 ) に Hover の文字を color: #999999;( 灰色 ) 変化させます #button:hover { background-color: #EEEEEE; color: #999999; #button ボックスを hover した時の変化として #div1 ボックスのテキストの色を color: #000000;( 黒色 ) に変更し テキストの影を text-shadow: 180px -60px 5px red, -180px 60px 5px yellow, 180px 60px 5px green, -180px -60px 5px blue; で指定して 4つの影のぼかし範囲を狭くしてテキストからの距離を大きく離します #button:hover #div1 { color: #000000; text-shadow: 180px -60px 5px red, -180px 60px 5px yellow, 180px 60px 5px green, -180px -60px 5px blue; 最後にボタンに表示するテキストのフォントの指定をします.font28GothicB { font: bold 28px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; 16
サンプル CSS6 円形とテキストの組み合わせ 円形が左上から中心に向かって徐々に拡大し 中にテキストが表示されます CircleAndText の説明 HTML の記述 (CircleAndText.html) id 属性 stage の div 要素 ( トランジションが動くステージ ) を作り その中にボックスや画像を記述します id 属性 button の div 要素を作ります これがボタン ( 親ボックス ) になります click でトランジションが開始されるように onclick="classname='anime1'" とします font28gothicb クラスでフォントを指定し Click を記述します id 属性 div1 の div 要素 ( 子ボックス ) の中に <span> タグでテキスト Hello!! CSS3 の記述をします <!DOCTYPE html> <html> <head> <title>circleandtext</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="circleandtext.css"> </head> <body> <p> 円形とテキストを出現させる </p> <div id="stage"> <div id="button" onclick="classname='anime1'"> <font class="font28gothicb">click</font> <div id="div1"><span>hello!! CSS3</span> </body> </html> CSS の記述 (CircleAndText.css) 17
先ず トランジションが動く #stage の記述をします #stage { width: 600px; height: 400px; background-color: #000000; position: relative; ボタンとなる #button ボックス ( 親ボックス ) を記述します position は absolute にして 位置は top: 172px; left: 247px; で指定します 角丸矩形のボタンにしたいので border-radius プロパティでボックスの 4 隅の角丸の半径を 10px で指定します #button { top: 172px; left: 247px; width: 100px; height: 50px; border: solid 3px #666666; border-radius: 10px; color: #666666; line-height: 55px; cursor: default; 円形になる #div1 ボックス ( 子ボックス ) を記述します position は absolute にして 位置は top: -178px; left: -253px;(#button ボックスの左上端を基準とした位置 ) で指定します 大きさがゼロの状態から徐々に円形が大きくなるようにするので width: 0px; height: 0px; で指定します transition の記述をします 2 秒 linear でトランジションするように記述します #div1 { top: -178px; left: -253px; width: 0px; height: 0px; background-color: #CCECF4; border: solid 1px #7FCFE2; border-radius: 50%; opacity: 1.0; transition: 2s linear; -webkit-transition: 2s linear; テキストを入れる #div1 span ボックスを記述します position は absolute にして 位置 18
は top: 0px; left: 0px;(#div1 ボックスの左上端を基準とした位置 ) で指定します テキストの色は color: # FF9900;( オレンジ色 ) で指定します テキストのサイズは 0px で指定します テキスト Hello!! CSS3 に半角スペースが含まれているので自動改行されますが 2 行にして円形の中に収めるので white-space: nowrap; の指定は必要ありません テキストを徐々に大きくするため transition の記述をします 2 秒 linear でトランジションするように記述します #div1 span { top: 0px; left: 0px; color: #FF9900; font: bold 0px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; opacity: 0.0; transition: 2s linear; -webkit-transition: 2s linear; #button ボックス ( ボタン ) を click したら #button ボックスの背景色を background-color: #555555; テキスト "Hover" の色を color: #000000; に変化させます #button.anime1 { background-color: #555555; color: #000000; #button ボックス ( ボタン ) を click した時の変化として #div1 ボックスを top: -90px; left: -60px;(#button ボックスの左上端を基準とした位置 ) へ動かし ステージの中心に移動させますが 同時に width: 200px; height: 200px; border: solid 10px #7FCFE2; を指定し円形を大きくします #button.anime1 #div1 { top: -90px; left: -60px; width: 200px; height: 200px; border: solid 10px #7FCFE2; #button ボックス ( ボタン ) を click した時の変化として #div1 span ボックスを top: 35px; left: 0px;(#div1 ボックスの左上端を基準とした位置 ) へ動かし #div1 の円形の中にテ キストを収めます テキストのサイズは 64px に変更し opacity: 1.0; に変更して 徐々 19
にテキストが見えてくるようにします #button.anime1 #div1 span { top: 35px; left: 0px; font: bold 64px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; opacity: 1.0; 最後にボタンに表示するテキストのフォントの指定をします.font28GothicB { font: bold 28px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; サンプル CSS7 テキストを飛翔させる ボタンを hover すると テキストが飛翔します FlyingText2D の説明 HTML の記述 (FlyingText2D.html) id 属性 stage の div 要素 ( トランジションが動くステージ ) を作り その中にボックスや 画像を記述します id 属性 button の div 要素を作ります これがボタン ( 親ボックス ) になります font28gothicb クラスでフォントを指定し Hover を記述します id 属性 div1 の div 要素 ( 子ボックス ) の中に span 要素を記述し その中にテキスト あ を記述します id 属性 div2 の div 要素 ( 子ボックス ) の中に span 要素を記述し その中 にテキスト A を記述します 20
<!DOCTYPE html> <html> <head> <title>flyingtext2d</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="flyingtext2d.css"> </head> <body> <p> テキストを飛翔させる </p> <div id="stage"> <div id="button"><font class="font28gothicb">hover</font> <div id="div1"><span> あ </span> <div id="div2"><span>a</span> </body> </html> CSS の記述 (FlyingText2D.css) 先ず トランジションが動く #stage の記述をします overflow: hidden; を指定しています #stage { width: 600px; height: 400px; background-color: #000000; position: relative; overflow: hidden; ボタンとなる #button ボックス ( 親ボックス ) を記述します #button { top: 20px; left: 247px; width: 100px; height: 50px; border: solid 3px #666666; border-radius: 10px; color: #666666; line-height: 55px; cursor: default; #button ボックス ( ボタン ) を hover したら #button ボックスの背景色を background-color: #555555;( 灰色 ) に Hover の文字を color: #000000;( 黒色 ) 変化させます 21
#button:hover { background-color: #555555; color: #000000; テキスト あ の横方向の動きを制御する #div1 ボックス ( 子ボックス ) を記述します position は absolute にして 位置は top: -20px; left: -300px;(#button ボックスの左上端を基準とした位置 ) で指定します 横の動きを制御する起点にするので width height は指定しません ( もし この点の動きを見たい場合は border: 3px solid yellow; の指定を追加すると 黄色の点が表示されます ) 横方向に移動させるため transition の記述をします 10 秒 ease-in でトランジションするように記述します ease-in にして テキストの飛翔に変化を付けています /* あ ******************************************************************/ #div1 { top: -20px; left: -300px; transition: 10s ease-in; -webkit-transition: 10s ease-in; テキストを入れる #div1 span ボックス ( 子ボックス ) を記述します position は absolute にして 位置は top: 400px; left: 0px;(#div1 ボックスの左上端を基準とした位置 ) で指定します ボックスの大きさは width: 256px; height: 256px; で指定しますが テキストを納めるための大きさではなく テキストの飛翔の軌跡に変化をつけるために任意の大きさにしています テキストの色は color: yellow;( 黄色 ) で指定します テキストの大きさは 512px で指定します テキストが大きいので 色を少し薄めにするために opacity: 0.7; を指定します テキストの動きに変化を付けたいので transform-origin プロパティで transform-origin: 30% 20%; と指定して span ボックスの変形の起点を中心からズラします テキストを回転するため transition の記述をします 10 秒 ease-out でトランジションするように記述します #div1 span { top: 400px; left: 0px; width: 256px; height: 256px; color: yellow; font: bold 512px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; 22
opacity: 0.7; transform-origin: 30% 20%; -webkit-transform-origin: 30% 20%; transition: 10s ease-out; -webkit-transition: 10s ease-out; #button ボックスを hover した時の変化として #div1 ボックスの位置を left: 250px; に移 動させます #button:hover #div1 { left: 250px; #button ボックスを hover した時の変化として #div1span ボックスの位置を top: 0px; に 移動させ テキストの大きさを 0px にして opacity: 1.0; にします transform プロパテ ィで transform: rotatez(1080deg); の指定をして Z 軸を中心に 1080 度回転させます #button:hover #div1 span { top: 0px; font-size: 0px; opacity: 1.0; transform: rotatez(1080deg); -webkit-transform: rotatez(1080deg); テキスト A の横方向の動きを制御する#div2 ボックス ( 子ボックス ) を記述します position は absolute にして 位置は top: -20px; left: -380px;(#button ボックスの左上端を基準とした位置 ) で指定します 横の動きを制御する点にするので width height は指定しません ( もし この点の動きを見たい場合は border: 3px solid red; の指定を追加すると 赤色の点が表示されます ) 横方向に移動させるため transition の記述をします 10 秒 ease-out でトランジションするように記述します ease-out にして テキストの飛翔に変化を付けています 23
/* A ******************************************************************/ #div2 { top: -20px; left: -380px; transition: 10s ease-out; -webkit-transition: 10s ease-out; テキストを入れる #div2 span ボックス ( 子ボックス ) を記述します position は absolute にして 位置は top: 0px; left: 0px;(#div1 ボックスの左上端を基準とした位置 ) で指定します こちらもボックスの大きさは width: 256px; height: 256px; で指定します テキストの色は color: hotpink;( 濃いピンク色 ) で指定します テキストの大きさは 0px で指定します opacity: 1.0; を指定します transform-origin プロパティで transform-origin: 30% 50%; と指定します テキストを回転するため transition の記述をします 10 秒 ease-out でトランジションするように記述します #div2 span { top: 0px; left: 0px; width: 256px; height: 256px; color: hotpink; font: bold 0px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; opacity: 1.0; transform-origin: 30% 50%; -webkit-transform-origin: 30% 50%; transition: 10s ease-out; -webkit-transition: 10s ease-out; #button ボックスを hover した時の変化として #div2 ボックスの位置を left: 300px; に移 動させます #button:hover #div2 { left: 300px; #button ボックスを hover した時の変化として #div1span ボックスの位置を top: 300px; に移動させ テキストの大きさを 512px にして opacity: 0.7; にします transform プロ 24
パティで transform: rotatez(720deg); の指定をして Z 軸を中心に 720 度回転させます #button:hover #div2 span { top: 300px; font-size: 512px; opacity: 0.7; transform: rotatez(720deg); -webkit-transform: rotatez(720deg); 最後にボタンに表示するテキストのフォントを指定します.font28GothicB { font: bold 28px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; サンプル CSS8 テキストの文字間隔を変化させる ボタンを hover すると テキストの文字間隔が変化します LettreSpaceing の説明 HTML の記述 (LettreSpaceing.html) id 属性 stage の div 要素 ( トランジションが動くステージ ) を作り その中にボックスや 画像を記述します id 属性 button の div 要素を作ります これがボタン ( 親ボックス ) になります font28gothicb クラスでフォントを指定し Hover を記述します id 属性 div1 の div 要素 ( 子ボックス ) の中にテキスト Hello!! CSS3 を記述します 25
<!DOCTYPE html> <html> <head> <title>lettrespaceing</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="lettrespaceing.css"> </head> <body> <p> 文字間隔を変化させる </p> <div id="stage"> <div id="button"><font class="font28gothicb">hover</font> <div id="div1">hello!! CSS3 </body> </html> CSS の記述 (LettreSpaceing.css) 先ず トランジションが動く #stage の記述をします #stage { width: 600px; height: 250px; background-color: #000000; position: relative; ボタンとなる #button ボックス ( 親ボックス ) を記述します position は absolute にして 位置は top: 20px; left: 247px; で指定します 角丸矩形のボタンにしたいので border-radius プロパティでボックスの 4 隅の角丸の半径を 10px で指定します #button { top: 20px; left: 247px; width: 100px; height: 50px; border: solid 3px #666666; border-radius: 10px; color: #666666; line-height: 55px; cursor: default; テキストを入れる #div1 ボックス ( 子ボックス ) を記述します position は absolute にし て 位置は top: 100px; left: -120px;(#button ボックスの左上端を基準とした位置 ) 26
で指定します テキストの色は color: #99FF00;( 黄緑色 ) テキストのサイズは 64px で指定します テキスト Hello!! CSS3 に含まれる半角スペースで自動改行されるので 自動改行されないように white-space: nowrap; の指定をします 文字間隔は letter-spacing: normal; で指定します ( または指定なしでも構いません ) テキストの文字間隔を徐々に変化させるため transition の記述をします 1 秒 linear でトランジションするように記述します #div1 { top: 100px; left: -120px; color: #99FF00; font: bold 64px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; white-space: nowrap; letter-spacing: normal; transition: 1s linear; -webkit-transition: 1s linear; #button ボックス ( ボタン ) を hover したら #button ボックスの背景色を background-color: #555555;( 灰色 ) に Hover の文字を color: #000000;( 黒色 ) 変化させます #button:hover { background-color: #555555; color: #000000; #button ボックスを hover した時の変化として #div1 ボックスのテキストの文字間隔を letter-spacing: 15px; と指定して テキストの幅が広がるので位置を left: -220px; に変 更します #button:hover #div1 { letter-spacing: 15px; left: -220px; 最後にボタンに表示するテキストのフォントの指定をします.font28GothicB { font: bold 28px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; 27
サンプル CSS9 テキストのワード間隔を変化させる ボタンを hover すると テキストのワード間隔が変化します WordSpaceing の説明 HTML の記述 (WordSpaceing.html) id 属性 stage の div 要素 ( トランジションが動くステージ ) を作り その中にボックスや画像を記述します id 属性 button の div 要素を作ります これがボタン ( 親ボックス ) になります font28gothicb クラスでフォントを指定し Hover を記述します id 属性 div1 の div 要素 ( 子ボックス ) の中にテキスト Hello!! HTML5 CSS3 を記述します <!DOCTYPE html> <html> <head> <title>wordspaceing</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="wordspaceing.css"> </head> <body> <p> ワード間隔を広くする </p> <div id="stage"> <div id="button"><font class="font28gothicb">hover</font> <div id="div1">hello!! HTML5 CSS3 </body> </html> CSS の記述 (WordSpaceing.css) 先ず トランジションが動く #stage の記述をします 28
#stage { width: 600px; height: 250px; background-color: #000000; position: relative; ボタンとなる #button ボックス ( 親ボックス ) を記述します position は absolute にして 位置は top: 20px; left: 247px; で指定します 角丸矩形のボタンにしたいので border-radius プロパティでボックスの 4 隅の角丸の半径を 10px で指定します #button { top: 20px; left: 247px; width: 100px; height: 50px; border: solid 3px #666666; border-radius: 10px; color: #666666; line-height: 55px; cursor: default; テキストを入れる #div1 ボックス ( 子ボックス ) を記述します position は absolute にして 位置は top: 100px; left: -120px;(#button ボックスの左上端を基準とした位置 ) で指定します テキストの色は color: #99FF00;( 黄緑色 ) テキストのサイズは 64px で指定します テキスト Hello!! CSS3 に含まれる半角スペースで自動改行されるので 自動改行されないように white-space: nowrap; の指定をします ワード間隔は word-spacing: normal; で指定します ( または指定なしでも構いません ) テキストのワード間隔を徐々に変化させるため transition の記述をします 1 秒 linear でトランジションするように記述します #div1 { top: 100px; left: -180px; color: #99FF00; font: bold 52px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; white-space: nowrap; word-spacing: normal; transition: 1s linear; -webkit-transition: 1s linear; 29
#button ボックス ( ボタン ) を hover したら #button ボックスの背景色を background-color: #555555;( 灰色 ) に Hover の文字を color: #000000;( 黒色 ) 変化させます #button:hover { background-color: #555555; color: #000000; #button ボックスを hover した時の変化として #div1 ボックスのテキストのワード間隔を word-spacing: 50px; と指定して テキストの幅が広がるので位置を left: -230px; に変更 します #button:hover #div1 { word-spacing: 50px; left: -230px; 最後にボタンに表示するテキストのフォントの指定をします.font28GothicB { font: bold 28px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; 30