勉強したことのメモ

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

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

 - CSS

  関連記事

可変要素内の文字を丸める

可変の要素内の文字を丸めたかった。いつもであれば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でのセレクタ指定 ...