-
-
Save pavelbier/2027993 to your computer and use it in GitHub Desktop.
Dabblet: CSS speech or tooltip bubble with box shadow
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"view":"split","seethrough":"","prefixfree":"1","page":"html"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment