cssで吹出しや角丸デザインの備忘録

2013年5月16日2023年2月13日

html5とcss3による角丸ボックスや吹出しデザインについて、
もう随分と情報が出尽くしているようですが、
恥ずかしながら今頃こんな勉強をしています。
その備忘録。

角丸ボックスの書き方

まだ使用が決まっていないとはいえ楽になったもんです。
画像使っていた頃が懐かしいです(笑)
これにもう一つGoogleのBlinkが追加されるんですね。
早く統一して欲しいです。（無理か！）

[css]
border-radius: 10px; /* CSS3草案 */
-webkit-border-radius: 10px; /* Safari,Google Chrome用 */
-moz-border-radius: 10px; /* Firefox用 */
[/css]

吹出しボックス

こちらは知りませんでした。
かなりjqueryみたいに要素を追加できるんですね。知らんかった。
要素を作って、
それにbefor擬似要素とafter擬似要素を重ねて、
それ以外をtransparentで消しちゃうという便利なやり方。

[css]
div#main_contents div.post div.entry div.arrow_left {
position: relative;
background: #fff;
width:400px;
margin:0 auto 10px;
padding:20px;
border: 4px solid #fa6721;
border-radius: 10px; /* CSS3草案 */
-webkit-border-radius: 10px; /* Safari,Google Chrome用 */
-moz-border-radius: 10px; /* Firefox用 */
}
div#main_contents div.post div.entry div.arrow_left:after, .arrow_left:before {
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
div#main_contents div.post div.entry div.arrow_left:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 10px; /*吹出し上からかぶせている白*/
top: 25%; /*吹出しタテ位置*/
margin-top: -10px;
}
div#main_contents div.post div.entry div.arrow_left:before {
border-color: rgba(250, 103, 33, 0);
border-right-color: #fa6721;
border-width: 16px; /*吹出し下のオレンジ*/
top: 25%; /*吹出しタテ位置*/
margin-top: -16px;
}
[/css]