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 サンプルとソース追記
関連記事
-
-
可変要素内の文字を丸める
可変の要素内の文字を丸めたかった。いつもであればPHPのmb_strimwidt ...
-
-
スマホサイトでviewportを指定しても横スクロールバーが表示される
スマホ用のサイトでviewportが指定されており、widthも100%になって ...
-
-
スクロールしても追尾する要素をCSSで作成
コンテンツ内をスクロールしても追尾してくる要素を作成したかった。以前にMeeka ...
-
-
要素の表示or非表示
今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...
-
-
ページ内リンク(アンカーリンク)がずれる場合の対処法
ヘッダーに固定メニューを設置しており、コンテンツ部分でアンカーリンクを使うと固定 ...
-
-
ダウンロード無しで外部ファイル呼び出し
■jQuery http://scriptsrc.net/ ■bootstrap ...
-
-
CSSでfloatの解除
CSSでfloatがかかっているところを解除したかったけど、 やり方が分からなか ...
-
-
フォームCSS
body { font-family : 'メイリオ',Meiryo,'MS P ...
-
-
CSSのdisplayについて
よく使うdisplayだけれども、noneとblock以外で 初めて使うことがあ ...
-
-
firebugでCSSパスをコピー
要素を調査⇒右クリック⇒CSSパスをコピーできる。 jQueryでのセレクタ指定 ...
- PREV
- PHPで日時比較時の注意
- NEXT
- JavaScriptで多次元連想配列