LINE風のふきだしデザイン
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 サンプルとソース追記
関連記事
-
-
firebugでCSSパスをコピー
要素を調査⇒右クリック⇒CSSパスをコピーできる。 jQueryでのセレクタ指定 ...
-
-
要素の表示or非表示
今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...
-
-
jQueryのCSS変更
jQueryでCSSを触る際、 $("#aaa").css('height',' ...
-
-
スマホ用の有料デザインテンプレが9月内は無料でもらえた
envatomarketでスマホ用の有料デザインテンプレートが2014年9月内に ...
-
-
CSSでスタイルの優先
1つのファイルに対して複数スタイルが指定されている、 ということがたまにある。 ...
-
-
cssのcontent
テキストが書かれているけど、firebugで要素を見ても 書かれていない。かとい ...
-
-
jQueryとCSSの連携
$(function(){ $("#change_small").click(f ...
-
-
特定のブラウザのみCSS指定
FireFoxだけどうにもデザインが崩れる、 ただ他のブラウザでは希望通りのデザ ...
-
-
CSSとJavaScriptでテキストのコピー防止
あるサイトで文言の意味が分からずGoogleで検索する為にコピペしようとするも、 ...
-
-
CSSのセレクタを一瞬で拾ってくる
↓↓こちらのサイト様 http://css.miugle.info/ 左側のテキ ...
- PREV
- PHPで日時比較時の注意
- NEXT
- JavaScriptで多次元連想配列