History: Sample Bubbles

• «
• »

            {HTML()}<style type="text/css">
.bigtext {font-size: 1.75em; line-height: 1.25em}
.midtext {font-size: 1.5em; line-height: 1.25em}

/* CSS Speech Bubbles
 * based on http://css-tricks.com/snippets/css/css-triangle/ and http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ 
 */
.bubbles {
	min-height: 200px;
	position: relative;
}

.bubble-button { /* just like a bubble without arrow */
	background: #fff;
	border: solid 1px #C3C2B8;
	color: rgb(163, 196, 58);
	display: block;
	font-family: Verdana, sans-serif;
	font-weight: bold;
	line-height: 2em;
	min-height: 2em;
	padding: 25px 10px;
	position: relative;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	box-shadow: 0 10px 10px -5px rgba(0, 0, 0, .5);
	z-index: 2;
}
.tss.bubble-button {
	background: #01525F;
	border: solid 5px #85A29E;
	color: #fff !important;
}
.tss.bubble-button:hover {
	border: solid 5px rgb(163, 196, 58);
	color: #fff;
}
.bubble-button.above {
	box-shadow: 0 20px 15px -10px rgba(0, 0, 0, .5);
	margin-top: -10px;
	padding: 25px 10px;
	z-index: 3;
}
.bubble-button a {
	color: #A3C441 !important;
	position: relative;
	width: 100%;
	z-index: 2
}
.bubble-button.above a {
	z-index: 3
}

.bubble-button a:hover {
	color: #85A29E !important;
}

.bubble-button.bigtext {
	font-size: 32px;
	line-height: 30px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .75);
}
.tss.bubble-button.bigtext {
	line-height: 2em
}
.bubble-button.bigtext .subtitle {
	color: #fff;
	font-size: 19px;
	line-height: 20px;
	margin: 10px 10px 0;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.bubble-button.above.bigtext {
	font-size: 40px;
	line-height: 38px;
}
.bubble-button.above.bigtext .subtitle {
	font-size: 25px;
	line-height: 26px;
}

.gradient-bg {
	background-color: #D3D1BF;
/*	background-image: url(images/fallback-gradient.png); */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F6F6F0), to(#D3D1BF));
	background-image: -webkit-linear-gradient(top, #F6F6F0, #D3D1BF);
	background-image:    -moz-linear-gradient(top, #F6F6F0, #D3D1BF);
	background-image:     -ms-linear-gradient(top, #F6F6F0, #D3D1BF);
	background-image:      -o-linear-gradient(top, #F6F6F0, #D3D1BF);
}


.centerpos {
	position: absolute;
	width: 100%;
}
.centerpos * {
	margin: auto;
}
.leftpos {
	position: absolute;
	left: 0;
}
.rightpos {
	position: absolute;
	right: 0;
}
.leftpos.shift {
	margin-left: 100px;
}
.rightpos.shift {
	margin-right: 100px;
}

.speech-bubble {
	border-color: rgb(163, 196, 58);
	background: rgb(163, 196, 58);
	color: #fff;
	font-weight: lighter;
	padding: 25px 10px;
	position: relative;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}
.speech-bubble:before {
	background: transparent;
	border-top: solid 3px #fff;
	border-left: solid 3px #fff;
	content: " ";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	z-index: 0;
}
.leftpos .speech-bubble:before {
	border-top: solid 3px #fff;
	border-left: none;
	border-right: solid 3px #fff;
}
.speech-bubble:after {
	content: "";
	position: absolute;
	top: 100%;
	left: 20px;
	border-top: 20px solid black;
	border-top-color: inherit;
	border-right: 20px solid transparent;
}
.speech-bubble.triangle-right:after {
	left: auto;
	right: 20px;
	border-top: 20px solid black;
	border-top-color: inherit;
	border-left: 20px solid transparent;
	border-right: 0 solid transparent;
}
.speech-bubble:hover {
	border-color: rgb(133, 162, 158) !important;
	background: rgb(133, 162, 158) !important;
	color: #fff !important;
}
.speech-bubble a {
	color: #fff !important;
	position: relative;
	width: 100%;
	z-index: 2
}
</style>{HTML}

!! Speech-like Bubbles
{DIV(class="bubbles")}
	{DIV(class="clearfix rightpos shift")}
		{DIV(align="center" class="speech-bubble")}Test Bubble{DIV}
	{DIV}
	{DIV(class="clearfix leftpos")}
		{DIV(align="center" class="speech-bubble bigtext")}Test Bubble{DIV}
	{DIV}
{DIV}

!! Small text "bubble-buttons"
{DIV(class="clearfix")}
	{DIV(bg="#188f59" width="33%" align="center" float="left" class="bubble-button")}
		~~#FFF:Test Me~~
	{DIV}
	{DIV(align="center" class="bubble-button floatleft" width="33%")}
		Test Me
	{DIV}
	{DIV(align="center" class="bubble-button floatleft" width="33%")}
		Test Me
	{DIV}
{DIV}

!! Bubble-bttons in SPLIT plugin grid 3x3 (table)
{SPLIT(class="bubbles")}
	{DIV(align="center" class="bubble-button bigtext")}		((Sample Page))
	{DIV}
---
	{DIV(align="center" class="bubble-button bigtext")}		((Sample Page))
	{DIV}
---
	{DIV(align="center" class="bubble-button bigtext")}		((Sample Page))
	{DIV}
@@@
	{DIV(align="center" class="bubble-button bigtext")}		((Sample Page))
	{DIV}
---
	{DIV(align="center" class="bubble-button bigtext")}		((Sample Page))
	{DIV}
---
	{DIV(align="center" class="bubble-button bigtext")}		((Sample Page))
	{DIV}
@@@
	{DIV(align="center" class="bubble-button bigtext")}		((Sample Page))
	{DIV}
---
	{DIV(align="center" class="bubble-button bigtext")}		((Sample Page))
	{DIV}
---
	{DIV(align="center" class="bubble-button bigtext")}		((Sample Page))
	{DIV}
{SPLIT}

!! Gradient Buttons with overlap
{DIV(class="bubbles")}
	{DIV(class="leftpos" width="35%")}
		{DIV(align="center" class="bubble-button bigtext gradient-bg")}
			((Bubble Buttons Demo|Get Informed)){DIV(class="subtitle")}About Something{DIV}
		{DIV}
	{DIV}
	{DIV(class="centerpos")}
		{DIV(align="center" class="bubble-button bigtext gradient-bg above" width="320px")}
			((Bubble Buttons Demo|Get Informed)){DIV(class="subtitle")}About Something{DIV}
		{DIV}
	{DIV}
	{DIV(class="rightpos" width="35%")}
		{DIV(align="center" class="bubble-button bigtext gradient-bg")}
			((Bubble Buttons Demo|Get Informed)){DIV(class="subtitle")}About Something{DIV}
		{DIV}
	{DIV}
{DIV}