勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

LINE風のふきだしデザイン

   2014/05/23  CSS

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

  関連記事

SB Adminよりシンプル&軽量なBootstrap系ダッシュボードのテンプレートについて

ダッシュボード(管理画面)を作る際、SB Adminというテンプレートを利用する ...

YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法

以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...

管理画面やダッシュボードとして便利そうなBootstrap系のテンプレート

新規サイトの立ち上げでダッシュボード、管理画面を作る必要があった。小規模なサイト ...

スマホサイトでviewportを指定しても横スクロールバーが表示される

スマホ用のサイトでviewportが指定されており、widthも100%になって ...

要素の表示or非表示

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