LINE風のふきだしデザイン
2014/05/23
LINE風のふきだしデザインでページを作ってほしいと言われた。
CSSはあまり理解していないのでどうしたらいいものかと悩んだところ
良いサンプルがあったのでメモ。
■参考サイト
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/default.css
■ソース
<style> .triangle-right { background: linear-gradient(#2E88C4, #075698) repeat scroll 0 0 transparent; border-radius: 10px 10px 10px 10px; color: #000000; margin: 1em 0 3em; padding: 15px; position: relative; } .triangle-right.top { background: linear-gradient(#075698, #2E88C4) repeat scroll 0 0 transparent; } .triangle-right.left { background: none repeat scroll 0 0 #6495ED; margin-left: 40px; } .triangle-right.right { background: none repeat scroll 0 0 #FFC0CB; margin-right: 40px; } .triangle-right:after { border-color: #6495ED transparent; border-style: solid; border-width: 20px 0 0 20px; bottom: -20px; content: ""; display: block; left: 50px; position: absolute; width: 0; } .triangle-right.top:after { border-color: transparent #075698; border-width: 20px 20px 0 0; bottom: auto; left: auto; right: 50px; top: -20px; } .triangle-right.left:after { border-color: transparent #6495ED; border-width: 15px 40px 0 0; bottom: auto; left: -40px; top: 16px; } .triangle-right.right:after { border-color: transparent #FFC0CB; border-width: 15px 0 0 40px; bottom: auto; left: auto; right: -40px; top: 16px; } </style> <p class="triangle-right left"> left </p> <p class="triangle-right right"> right </p>
CSS呼び出して<p>タグで囲んで必要なclassをつけるだけ。
CSSだけでふきだし出来るとかびっくり。
※2014/01/12 サンプルとソース追記
関連記事
レスポンシブ対応で右カラムのコンテンツを上に表示させる方法
レスポンシブ対応サイトの簡易なコーディングをする経験があった。何も考えずにHTM ...
CSSでfloatやmargin&widthは使わずにブロック要素の中央寄せ・右寄せする方法
CSSでブロック要素を中央寄せする場合はwidth指定しつつ「margin:0 ...
jQueryのCSS変更
jQueryでCSSを触る際、 $("#aaa").css('height',' ...
IE11でSB Admin2のログインページの表示がおかしい
ダッシュボードや管理画面を作成する際、SB Admin2を使うことが多い。ダッシ ...
jQueryの日付&時間のピッカー(bootstrap-datetimepicker)について
日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、普通のセレクトメ ...