Skip to content

Instantly share code, notes, and snippets.

@yoksel
Created September 29, 2013 09:39
Show Gist options
  • Save yoksel/6750961 to your computer and use it in GitHub Desktop.
Save yoksel/6750961 to your computer and use it in GitHub Desktop.
Bubble with shadows http://jsbin.com/OTiNOGO/2/edit
BODY {
background: #efefef;
font-size: 1.7em;
}
DIV {
display: inline-block;
position: relative;
vertical-align: middle;
}
DIV:before,
DIV:after {
content: "";
display: block;
position: absolute;
}
.bubble {
width: 10em;
height: 4em;
margin: 2em;
padding: 1em;
box-sizing: border-box;
background: white;
border-radius: 1em;
box-shadow: 0 0 .2em 0 rgba(0,0,0,.2);
line-height: 2em;
text-align: center;
}
.bubble:before,
.bubble:after {
width: 2.2em;
height: 2em;
right: 1em;
bottom: -.7em;
border-radius: 50%;
background: white;
}
.bubble:before {
box-shadow: -1.5em 1.7em 0 -.4em white,
-2.7em 3em 0 -.7em white;
}
.bubble:after {
z-index: -1;
box-shadow: 0 0 .2em 0 rgba(0,0,0,.2),
-1.5em 1.7em .2em -.4em rgba(0,0,0,.2),
-2.7em 3em .2em -.7em rgba(0,0,0,.2);
}
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="bubble">Привет, мир!</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment