Skip to content

Instantly share code, notes, and snippets.

@machal
Created March 12, 2012 15:46
Show Gist options
  • Save machal/2022836 to your computer and use it in GitHub Desktop.
Save machal/2022836 to your computer and use it in GitHub Desktop.
Dabblet: CSS speech or tooltip bubble with box shadow
/**
* Dabblet: CSS speech or tooltip bubble with box shadow
* Author: Martin Michálek, twitter.com/machal
*/
.bubble {
width: 200px;
}
.bubble_head {
position: relative;
bottom: -22px;
left: 50%;
width: 40px;
height: 40px;
background: #5FA316;
box-shadow: 5px -2px 5px rgba(0, 0, 0, .3);
margin-top: -11px;
-webkit-transform: rotate(45deg); /* Saf3.1+, Chrome */
-moz-transform: rotate(45deg); /* FF3.5+ */
-o-transform: rotate(45deg); /* Opera 10.5 */
-ms-transform: rotate(7.5deg); /* IE9 */
transform: rotate(45deg);
/* CSS rotation for MSIE 8- – look at the HTML conditional comment */
}
.bubble_body {
position: relative;
width: 200px;
background: #5FA316;
color: #fff;
padding: 20px;
margin: 0;
box-shadow: 3px 3px 4px rgba(0, 0, 0, .3);
border-radius: 10px;
}
body {
font-family: sans-serif;
}
<head>
<!--[if lte IE 8]>
.bubble_head {
/* CSS rotation transform tnx to http://www.useragentman.com/IETransformsTranslator/ */
margin-left: -11px;
margin-top: -11px;
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.7071067811865475,
M12=-0.7071067811865477,
M21=0.7071067811865477,
M22=0.7071067811865475,
SizingMethod='auto expand');
}
<![endif]-->
</head>
<body>
<div class="bubble">
<div class="bubble_head"></div>
<p class="bubble_body">
Pure CSS speech or tooltip bubble with box-shadow and border-radius.
</p>
</div>
</body>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment