222100 ランダム
 ホーム | 日記 | プロフィール 【フォローする】 【ログイン】

mikanママのタグをつかって

mikanママのタグをつかって

グラデーションタグ


NO.1
グラデーションのタグは
filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0 StartColorStr=#33ffffff EndColorStr=#cc826681)です
このタグをボックスのどこに入れるかで表情が変りますね
タグのつなぎには(;)を入れること。
ここは一番外側でwidth:600pxになっているところに入っています
外側に入れたので全体にカラーが入っています

NO.2
グラデーションのタグを
二つ目のボックスに入れました
width:590pxになっている所の最後に付け加えました
外側にはカラーは入っていません
高さ幅の調整は内側にくるに連れて10pxづつ減らしています



NO.3
四つのボックスを使っています
CENTER style で始っているのがそうです
最後には</center>を四つ使って閉じています
グラデーションのタグを
width:580px が入っている三つ目に付け加えました



NO.4
内側のボックスにグラデーションのタグと
スクロールのバーのタグが 入っています
グラデーションのタグは
filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0 StartColorStr=#33ffffff EndColorStr=#cc826681)です
gradientTypeには「0」(縦)と「1」(横)があります
StartColorStr=#33ffffffははじまりの色
EndColorStr=#cc82668は終わりの色でグラデーションになります
カラーコードの頭に付いている赤い文字は透過の機能をしています。
三つ目に画像を入れてみました。透過しているでしょ!



NO.1のタグです
<div align="center"><CENTER style="width:600px;height:200px;border-width:5px ;border-color:#504139;border-style:double;font-size:13pt;filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0 StartColorStr=#33ffffff EndColorStr=#cc826681);"><CENTER style="width:590px;height:190px;margin:6px;border-width:5px ;border-color:#c7b29a;border-style:dotted;margin:2px;"><CENTER style="width:580px;height:180px;margin:6px;border-width:4px;border-color:#504139;border-style:double;margin:2px;"><CENTER style="width:570px;height:170px;margin:6px;border-width:3px;border-color:#c7b29a;border-style:dotted;margin:2px;overflow-y:scroll;fixed;scrollbar-face-color:#ffffff;scrollbar-track-color:#ffffff;scrollbar-arrow-color:#c7b29a;scrollbar-highlight-color:#000000;scrollbar-shadow-color:#ffffff;scrollbar-3dlight-color:#ffffff;scrollbar-darkshadow-color:#000000;"> <br><B>NO.1
グラデーションのタグは
filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0 StartColorStr=#33ffffff EndColorStr=#cc826681)です
このタグをボックスのどこに入れるかで表情が変りますね
タグのつなぎには(;)を入れること。
ここは一番外側でwidth:600pxになっているところに入っています
外側に入れたので全体にカラーが入っています
</B> </center></center></center></center></div>


© Rakuten Group, Inc.