Archives for Mobile Web Technology - Page 3
Animated aquarium with pure CSS
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…
Creating a CSS Game – Tic-Tac-Toe
One year ago, I had posted a puzzle game called “Doraemon Puzzle”. It was developed with the help of most powerful JavaScript library jQuery. Now, I have developed a game using CSS only. Have you remembered a favorite game which we always played in school/collage days? Yes this is "Tic-Tac-Toe". My…
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…
Html IMG vs CSS Background-image
Image - Useful Tips An image can be used in a webpage for two regions, 1) Image = for content use, on the other hand, tend to change frequently. New images are uploaded often, users change their profile images and photo galleries, etc. 2) Background Image = for design. logos,…
Change an input’s HTML5 placeholder color with CSS
Today, We will play with some more interesting CSS style properties for HTML5 INPUT placeholder styling. Let's explore, how to style placeholder text within INPUT elements with some unique CSS code. In previous articles, we have already covered some beautiful CSS effects on INPUT and Input . What is Placeholder? The placeholder attribute specifies a…
Animated 3D Background Pattern using HTML5 < canvas >
Hi friends, today we are going to see a cool example of animated 3D Background using HTML5 <canvas> and javascript. The <canvas> element is part of HTML5 and allows for dynamic, script-able rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap…
Analog clock using css3 and jquery
Hi guys! Today we are going to see another great example of analog clock using the power of CSS3 and most advanced library jQuery. We will start by creating a very cool and realistic analog wall clock with pure CSS3 properties, and add a little smooth rotation for giving the clock hands…
CSS Vendor Prefixes or CSS3 browser prefixes
CSS vendor prefixes or CSS browser prefixes are a way for browser makers to add support for new CSS features in a sort of testing and experimentation period. Browser prefixes are used to add new features that may not be part of a formal specification and to implement features in a specification that…
2013 in review
The stats helper monkeys prepared a 2013 annual report for this blog. Here’s an excerpt: The concert hall at the Sydney Opera House holds 2,700 people. This blog was viewed about 16,000 times in 2013. If it were a concert at Sydney Opera House, it would take…
Merry Christmas Greetings – JavaScript and CSS Parallax effect
I hope you have enjoyed my previous article about 3D Parallax effected webpage. Now, like previous year, on occasion of Christmas and winter Holidays, I thought to wish this festival by create a wonderful webpage greetings too. So, today I had created this Christmas greeting card using 3D Parallax effect with help of…