Here is a pure CSS experimental work to create a aquarium. Image / javascript hasn’t been used for aquarium or it’s animation. I have used jQuery only for random air-bubbles. All these animation is created by Pure CSS. Some times ago, I had written a article about “Animated bubbles upwards continuously with pure CSS“. You can also use this trick for air-bubbles.
read more @ http://www.css-jquery-design.com/…
For Creating Aquarium’s water, sand, rocks and plants few lines of HTML required.
The HTML
<div class="bubbles"></div> <div class="ground"></div> <div class="rock_1"></div> <div class="rock_2"></div> <div class="rock_3"></div> <div class="rock_4"></div> <div class="rock_5"></div> <div class="rock_6"></div> <div class="rock_7"></div> <div class="plant_1_wrap"> <div class="plant_1"></div> <div class="plant_2"></div> <div class="plant_3"></div> </div> <div class="plant_2_wrap"> <div class="plant_4"></div> <div class="plant_5"></div> </div>
Now, its CSS turn. I had written about 1040 lines only in CSS for creating these elements.
read more @ http://www.css-jquery-design.com/…