Animated bubbles upwards continuously with pure CSS

Here is a pure CSS experimental work to create floating bubbles without using JavaScript. These animated bubbles are also with popping effect. All these animation is created by Pure CSS.

For our little demo, we use a simple image for the conical flask and then create the bubbles entirely with markup and CSS. read more @…

Animated bubbles upwards continuously with pure CSS


<div id="beaker">
  <span class="bubble">
    <span class="glow"> </span>

With our bubbles all made, now we need them to act like bubbles. We could use JavaScript but that’s no fun. Just use CSS! read more @…read-more-button

Simple and Easy Tooltip Using jQuery & CSS3

I love jQuery and the way it makes web-designer’s/developer’s life easier.  Although it took all a while to accept it. I still prefer to write my own stuff, I can’t deny its advantages.   Today I will show you a “Tool-Tip” examples of using the same very, very simple script.

Features and Principle

Note: Tooltip Plugin is Less than 1Kb in size.
What this script does is adds an element to the body when you roll over a certain object. That element’s appearance is predefined with css (positioned absolute and styled) so all we need to do is fill the element with content, calculate mouse position and make it move accordingly. When cursor is moved over he object, element moves with it and when cursor roll out, the element is deleted.

Here is a  example where you can see this script in action.

The Simplest jQuery Tooltip Ever

The script takes a title attribute of an A tag and place it inside the popup element.

The Html

<a href="" class="tooltip" title="Latest Techonology Updates in Web Technology">Roll over for tooltip</a>


	border:1px solid #333; 
	background-color:#222; background:rgba(2,2,2,.8);
	padding:2px 5px; 
        box-shadow:2px 2px 5px 0 rgba(2,2,2,.8);

jQuery – The javascript

First of all, we have to add jQuery library.
after adding jQuery library we have to add this tooltip plugin.
In this plugin you will got :

this.tooltip = function(){	
	/* CONFIG */		
		xOffset = 10;
		yOffset = 20;		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result		
	/* END CONFIG */		
		this.t = this.title;
		this.title = "";								  

“+ this.t +”

                $("#tooltip") .css("top",(e.pageY - xOffset) + "px") 
                              .css("left",(e.pageX + yOffset) + "px") 
         }, function(){ this.title = this.t; 
                $("#tooltip") .css("top",(e.pageY - xOffset) + "px") 
               .css("left",(e.pageX + yOffset) + "px"); 
// starting the script on page load 

view demo

Your turn

I hope you enjoyed this article and the techniques I used. Please share your comments and questions below!

Posted by: Dhiraj kumar