Skip to content

Instantly share code, notes, and snippets.

@nking

nking/gist:1327349

Created October 31, 2011 12:06
Show Gist options
  • Save nking/1327349 to your computer and use it in GitHub Desktop.
Save nking/1327349 to your computer and use it in GitHub Desktop.
Download ZIP
CSS bubbles
Raw
gistfile1.txt
Can make a bubble with a CSS3 opacity gradient placed over any background.
<div class='abubble'>
<div class='innerbubble'></div>
</div>
and change the location of the bubble and it's size by changing the properties in the .bubble class selector.
.abubble {
position: absolute;
top: 300px;
left: 300px;
background-color: transparent;
width: 15px;
height: 15px;
z-index: 2;
}
.innerbubble {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
z-index: 2;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: transparent;
background: -webkit-radial-gradient(center, circle cover, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 255) 100%);
background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 255) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 255)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 255) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 255) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 255) 100%);
background: radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 255) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ff140006',GradientType=1 );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment