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 サンプルとソース追記
関連記事
-
-
CodeIgniter4&Bootstrap&jQueryで簡易版お問い合わせページの作成
CodeIgniter4.4.4&Bootstrap&jQuer ...
-
-
HTML / CSSで作成したコンテンツをPDFファイルで出力する方法(TCPDF)
HTML / CSSで作成したコンテンツをPDFファイルで出力させたい。以前mp ...
-
-
tableのtd内にあるcheckboxのクリック範囲を拡大させ、チェック時に親要素であるtdにCSSを割り当てる方法
tableのtd内にcheckboxを設置し、td部分をクリックすることでche ...
-
-
videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法
Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...
-
-
CSSとJavaScriptでテキストのコピー防止
あるサイトで文言の意味が分からずGoogleで検索する為にコピペしようとするも、 ...