それではCSS3のベンダープレフィックスが必要となるプロパティを書いていきます。
- writing-mode
このプロパティは横書きを縦書きにするプロパティになります。
で、指定できる値は、
- horizontal-tb 上から下の意味です top to bottom これは横書きの意味です
- vertical-rl 右から左の意味です right-to-left の意味になります
- vertical-lr 上記とは逆ですね left-to-right の意味になります
それではデモを作ってみましょう。
<div style=”-webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; writing-mode: vertical-rl; font-family: serif; line-height: 1.7;”><h1>ほにゃらら</h1><p>ばばばばあはははたてがきできてますか？できてない！？そんな馬鹿な！！</p></div>
こんか感じで書いてみます。笑
ほにゃらら
たてがきできてますか？できてない！？そんな馬鹿な！！
できてますね？
なかなかおもしろいですね笑
まだまだありますね
text-emphasis-style プロパティです
- text-emphasis-style: filled;
- text-emphasis-style: open;
- text-emphasis-style: sesame;
- text-emphasis-style: dot;
- text-emphasis-style: circle;
- text-emphasis-style: double-circle;
- text-emphasis-style: triangle;
- text-emphasis-style: 文字指定;
これもデモ書いていきますね☆
<p style=”-webkit-text-emphasis-style: circle; -moz-emphasis-style: circle;” -ms-emphasis-style: circle;>私は実は策略家だ。</p>
私は実は策略家だ。
できてますか？
文字指定もしてみたんですが、みれなかったので、簡単のにしてみました。笑
角丸ちゃんです
これも細かく書くと、ひとつの角ごと指定できますが、
border-radius: 左上 右上 右下 左下;
という感じです。 個人的には、全部を同じ比率にする場合の値は一つにしておいて、
ここだけというときは、他のところは0の値にしておいて、それでもって、指定したいところだけするって感じがコードもきれいだしなによりややこしくない。笑
設定できる値とイメージはこちらです。
それではデモってみます。
<div style=”width: 200px; height: 200px; border-radius:50px 0 50px 0; background-color: rgba(200,0,0,0.9);”>左上と右下に設定してみました</div>
できてますか？
できてますね。個別に設定するときfirefox3.6以前だとベンダープレフィックスが必要となりますので気をつけてねヽ(´▽｀)/
長くなりましたのでここで一回切りたいと思います。
次回は背景について書いていきます。
かなり初歩からまとめながらいっていますので、気長にお付き合いくださいませ！！
それではご清聴ありがとうございました～～～～～！！
