TOP /VML | ワードアート応用編 |
---|
<v:oval style="width:239; height:76;rotation:0;" strokecolor="#00ff80"strokeweight="2pt"> <v:stroke on="true" /> <v:fill type="gradient"opacity="100%"color="blue"color2="aqua"angle="0"focus="0%"focusposition="0,0" focussize="0,0" /> <v:shadow on="true" color="#cccccc"offset="4pt,3pt" /> <v:extrusion on="false"color="#cccccc"skewangle="135" Backdepth="4" skewamt="1" /> </v:oval>
上記円はVML(楕円を描く)で書き出した楕円です。
<v:shape style="width:300;height:50;rotation:0;" o:spt="136"stroked="false"strokecolor="red"coordsize="21600,21600"> <v:fill type="gradient"opacity="100%"color="blue"color2="aqua"angle="0"focus="0%" /> <v:shadow on="false" color="#cccccc"offset="6pt,5pt" /> <v:extrusion on="true"color="#cccccc"skewangle="135" Backdepth="5" skewamt="1" /> <v:textpath style="font-family:'Arial Black';font-style:normal;font-weight:normal;" string="VML Word" /> <!--himajin.moo.jp--></v:shape>
上記文字はVML(ワードアート)で書き出した文字です。
赤い部分が追加された部分です。<v:group style="width:100;height:100;"coordsize="100,100"> <v:oval style="width:239; height:76;rotation:0;" strokecolor="#00ff80"strokeweight="2pt"> <v:stroke on="true" /> <v:fill type="gradient"opacity="100%"color="blue"color2="aqua"angle="0"focus="0%"focusposition="0,0" focussize="0,0" /> <v:shadow on="true" color="#cccccc"offset="4pt,3pt" /> <v:extrusion on="false"color="#cccccc"skewangle="135" Backdepth="4" skewamt="1" /> </v:oval> <v:shape style="width:300;height:50;rotation:0;" o:spt="136"stroked="false"strokecolor="red"coordsize="21600,21600"> <v:fill type="gradient"opacity="100%"color="blue"color2="aqua"angle="0"focus="0%" /> <v:shadow on="false" color="#cccccc"offset="6pt,5pt" /> <v:extrusion on="true"color="#cccccc"skewangle="135" Backdepth="5" skewamt="1" /> <v:textpath style="font-family:'Arial Black';font-style:normal;font-weight:normal;" string="VML Word" /> <!--himajin.moo.jp--></v:shape> </v:group>
赤い部分が調整した部分です。(表示位置と大きさ)<v:group style="width:100;height:100;"coordsize="100,100"> <v:oval style="width:239; height:76;rotation:0;" strokecolor="#00ff80"strokeweight="2pt"> <v:stroke on="true" /> <v:fill type="gradient"opacity="100%"color="blue"color2="aqua"angle="0"focus="0%"focusposition="0,0" focussize="0,0" /> <v:shadow on="true" color="#cccccc"offset="4pt,3pt" /> <v:extrusion on="false"color="#cccccc"skewangle="135" Backdepth="4" skewamt="1" /> </v:oval> <v:shape style="position:absolute;top:18;left:25;width:180;height:45;rotation:0;" o:spt="136"stroked="false"strokecolor="red"coordsize="21600,21600"> <v:fill type="gradient"opacity="100%"color="blue"color2="aqua"angle="0"focus="0%" /> <v:shadow on="false" color="#cccccc"offset="6pt,5pt" /> <v:extrusion on="true"color="#cccccc"skewangle="135" Backdepth="5" skewamt="1" /> <v:textpath style="font-family:'Arial Black';font-style:normal;font-weight:normal;" string="VML Word" /> <!--himajin.moo.jp--></v:shape> </v:group>
groupのサイズとcoordsizeを内部のサイズに合わせます。(赤と青の部分)<v:group style="width:239;height:76;"coordsize="239,76"> <v:oval style="width:239; height:76;rotation:0;" strokecolor="#00ff80"strokeweight="2pt"> <v:stroke on="true" /> <v:fill type="gradient"opacity="100%"color="blue"color2="aqua"angle="0"focus="0%"focusposition="0,0" focussize="0,0" /> <v:shadow on="true" color="#cccccc"offset="4pt,3pt" /> <v:extrusion on="false"color="#cccccc"skewangle="135" Backdepth="4" skewamt="1" /> </v:oval> <v:shape style="position:absolute;top:18;left:25;width:180;height:45;rotation:0;" o:spt="136"stroked="false"strokecolor="red"coordsize="21600,21600"> <v:fill type="gradient"opacity="100%"color="blue"color2="aqua"angle="0"focus="0%" /> <v:shadow on="false" color="#cccccc"offset="6pt,5pt" /> <v:extrusion on="true"color="#cccccc"skewangle="135" Backdepth="5" skewamt="1" /> <v:textpath style="font-family:'Arial Black';font-style:normal;font-weight:normal;" string="VML Word" /> <!--himajin.moo.jp--></v:shape> </v:group>
<v:group style="width:300;height:100;"coordsize="239,76"> <v:oval style="width:239; height:76;rotation:0;" strokecolor="#00ff80"strokeweight="2pt"> <v:stroke on="true" /> <v:fill type="gradient"opacity="100%"color="blue"color2="aqua"angle="0"focus="0%"focusposition="0,0" focussize="0,0" /> <v:shadow on="true" color="#cccccc"offset="4pt,3pt" /> <v:extrusion on="false"color="#cccccc"skewangle="135" Backdepth="4" skewamt="1" /> </v:oval> <v:shape style="position:absolute;top:18;left:25;width:180;height:45;rotation:0;" o:spt="136"stroked="false"strokecolor="red"coordsize="21600,21600"> <v:fill type="gradient"opacity="100%"color="blue"color2="aqua"angle="0"focus="0%" /> <v:shadow on="false" color="#cccccc"offset="6pt,5pt" /> <v:extrusion on="true"color="#cccccc"skewangle="135" Backdepth="5" skewamt="1" /> <v:textpath style="font-family:'Arial Black';font-style:normal;font-weight:normal;" string="VML Word" /> <!--himajin.moo.jp--></v:shape> </v:group>