こ、これはすごいぜ。

Fun With CSS Shapes - Nettuts

これは驚き!CSSだけで作れる吹き出しボックス。
次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。
 


えええ。マジっすか。

サンプル見てもにわかに納得できなかったので、試して検証してみる。

吹き出し処理無しのblockquote。

「ぼくは持ってますね。神が降りてきたという感じ。日本中のみんなが注目しているだろうと思って、自分の中で実況して、結果が出ないものですが、それで結果が出て壁を越えたと思います」

「もう苦しいところから始まって、苦しいが辛いになって、心が痛んで、最終的に笑顔になった」

「気持ち良かったですねえ。ほぼ、いきかけました」


吹き出し処理ありのblockquote。

「ぼくは持ってますね。神が降りてきたという感じ。日本中のみんなが注目しているだろうと思って、自分の中で実況して、結果が出ないものですが、それで結果が出て壁を越えたと思います」

「もう苦しいところから始まって、苦しいが辛いになって、心が痛んで、最終的に笑顔になった」

「気持ち良かったですねえ。ほぼ、いきかけました」

 


吹き出し処理+写真付きのblockquote。

「ぼくは持ってますね。神が降りてきたという感じ。日本中のみんなが注目しているだろうと思って、自分の中で実況して、結果が出ないものですが、それで結果が出て壁を越えたと思います」

「もう苦しいところから始まって、苦しいが辛いになって、心が痛んで、最終的に笑顔になった」

「気持ち良かったですねえ。ほぼ、いきかけました」

 



おおお。ちょっと感動した。HTMLでは斜め線なんて引けないと思ってたのに、何でこんなことになるのか検証とか言っても全然わからんけど、でもちゃんと書けてるんだよなぁ。

元ネタのサイトの方には、このほかに吹き出し部分に角度を付けたり、上や下に持ってきたりするサンプルもあって結構柔軟に使えそうな感じ。

I bet a bunch of you don't realize that we can create the illusion of shapes by using 100% CSS. By utilizing the border property in creative ways, we can make some really interesting polygons. In this week's screencast, we'll figure out a way to create speech-bubbles without resorting to background images.
 


なんか久々にオラ、ワクワクしたぞ。



追記

他の人のブックマークコメントを眺めてたら、全部のボーダーの色変えてみるとわかるよ!(id:Rewish)と書かれていたので試してみる。

「ぼくは持ってますね。神が降りてきたという感じ。日本中のみんなが注目しているだろうと思って、自分の中で実況して、結果が出ないものですが、それで結果が出て壁を越えたと思います」

「もう苦しいところから始まって、苦しいが辛いになって、心が痛んで、最終的に笑顔になった」

「気持ち良かったですねえ。ほぼ、いきかけました」

 

グレーがborder-top、オレンジがborder-right、赤がborder-left、青がborder-bottom。

こうして見てみると、拮抗するような形でborderを設定するとそれぞれその中間地点まで干渉し合うっていう性質があるみたい。だから2つのborderの太さのバランスを変えると、吹き出し口の形状が変わるって言うことなんでしょう。しかし、んー…これって、仕様上正しいのかな?borderの役割から考えるときっと「結果こうなる」ってことであって、正しいということはないのかも。<br />なんかと同じ話で、バッドノウハウ的な話なのかもしれない。


…まぁでも将来のブラウザでこの通りにならなくなる可能性はあるとしても、斜めの線を引く、そして吹き出しを付けるっていう表現方法としては、これ以外にやろうとしたらもう画像ってことになっちゃうわけだし、それもねぇ…あんまりスマートではないので。JavaScriptで角丸を作るとかああいう無理矢理な手法に比べたら遙かにマシだし、これはあってもいいかなと個人的には思います。



追記その2

思いついたので何となくテスト。

全てのborderを均一の大きさにするとこんな感じになる。


もし仮にborder-rightだけ大きさを半分にしてやると、こんな感じになる。


これを利用すればいろんな形の吹き出し口が作れそうです。


試しに真ん中に四角を作ってみるとこうなるので。


台形の吹き出し口だって出来ちゃうかも。



その他、ちっこくして右向き矢印に使うとか。



ちっこく+台形でスピーカーみたいに見えるかもとか。



ちょっとした描画に使えそうな気がしてきた。



追記その3

IEでは、この書き方だと崩れるみたいですね。

<span class="arrow" />

こうしてあげた方がベターです。

<span class="arrow">&nbsp;</span>

というわけで修正しました。
  • About

    I'm a web designer/programmer in Kyoto, Japan. Also work as a blogger, DJ.

    NOBODY:PLACE is my personal blog since 1998. Everything I'm interested in is here.

    See Also
    Other Works
    Feed
  • Recent Hatena Bookmark
  • Monthly Archives
    Categories