勉強したことのメモ

webプログラマが勉強したことのメモ。

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 サンプルとソース追記

 - CSS

  関連記事

スクロールしても追尾する要素をCSSで作成

コンテンツ内をスクロールしても追尾してくる要素を作成したかった。以前にMeeka ...

要素の表示or非表示

今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...

CSSのopacity

opacityというプロパティを業務中に見かけたのでメモ。 透明度を指定するもの ...

CSSでfloatの解除

CSSでfloatがかかっているところを解除したかったけど、 やり方が分からなか ...

jQueryとCSSの連携

$(function(){ $("#change_small").click(f ...

firebugでCSSパスをコピー

要素を調査⇒右クリック⇒CSSパスをコピーできる。 jQueryでのセレクタ指定 ...

特定のブラウザのみCSS指定

FireFoxだけどうにもデザインが崩れる、 ただ他のブラウザでは希望通りのデザ ...

スマホ用の有料デザインテンプレが9月内は無料でもらえた

envatomarketでスマホ用の有料デザインテンプレートが2014年9月内に ...

CSSでスタイルの優先

1つのファイルに対して複数スタイルが指定されている、 ということがたまにある。 ...

CSSとJavaScriptでテキストのコピー防止

あるサイトで文言の意味が分からずGoogleで検索する為にコピペしようとするも、 ...