CSS3 background gradient animation in a progress bar like in Windows 7
You can create a responsive, animated progress bars like in Windows 7 using pure CSS3. I haven't used any image in this tutorial. Resize your browser window to see the responsiveness. HTML <div class="bar"> <div class="blue loader"> <h3>;/h3> <span class="inner"> </span> </div> </div> CSS Next, we’ll create the background for the loader. The animated portion will be a translucent overlay, so you can easily change the colour and background properties if you chose to do so later on. I’ve used a gradient background but this can easily be swapped out for a solid colour or background image. ., .inner{ ;…
JQuery or JavaScript tricks for mobile devices like – Android, Windows, BlackBerry, Apple, iphone, ipad
JavaScript support is very good on modern mobile browsers. The mobile version of Firefox and Chrome provide pretty much desktop-level support for HTML5(CSS 3 + JavaScript + HTML 5 ) features. Most mobile phones are running some version of WebKit (what Chrome runs on), so you're pretty much guaranteed better support than IE8 provides if you're developing for mobile. Detecting Mobile Devices Instead of using jQuery you can use simple JavaScript to detect it: if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera () ) { // some code for mobile } or you can combine them both to make it more accessible through jQuery. $. =…
CSS Custom Cursors
The cursor property specifies the type of cursor to be displayed when pointing on an element. Some CSS properties are animatable, meaning that they can be used in animations and transitions. Animatable properties can change gradually from one value to another, like size, numbers, percentage and color. Now, when you'd like to customize a cursor, and CSS lets you do it quite easily! Click here for a list of the cursor styles supported by the CSS W3C recommendations. Rollover on the above image and see the CSS custom Cursor The CSS The cursor CSS property accepts a series of cursors, and using…
2014 in review
The stats helper monkeys prepared a 2014 annual report for this website (). Here’s an excerpt: The Louvre Museum has million visitors per year. This blog was viewed about 150,000 times in 2014. If it were an exhibit at the Louvre Museum, it would take about 6 days for that many people to see it. The busiest day of the year was July 22nd with 1,539 views. The most popular post that day was Animated bubbles upwards continuously with pure CSS. Click here to see the complete report.
Find Location With HTML5 Geolocation API
The Geolocation API is a new technology that’s introduced by W3C – the same organization behind HTML5. Probably for that reason, it is often correlated and grouped with HTML5 in many books and references, although it has actually nothing to do with HTML5 technically. In this post, we are going to use the API in its simplest form; we will create a set of functions to retrieve user’s location and show it in map with Google Maps. Let’s take a look. Why Geolocation API ? In many cases, obtaining user location would be extremely useful to establish better user experience, for…
Convert Color images to Grayscale, Sepia, Blur & more with CSS Filter
"Is there a simple way to display a color bitmap in gray-scale with just HTML/CSS?" - This was a question for most of web designer / developer. Meanwhile for achieving this effect, they were using JavaScript Library like or two different images. After the end of Flash for website development, Adobe and others have been hard at work bringing this amazing technology to CSS. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. With advancements in the standards of…
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 continuously with pure CSS". You can also use this trick for air-bubbles. 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…
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 version works as any normal Tic-tac-toe game would: 2 players can play against each other, it can result in either a win or a tie. Players can also restart the game. HTML <div class="tic-tac-toe"> <input id="block1-1-1" type="radio" class="player-1 left first-column top first-row first-diagonal turn-1"/> <label for="block1-1-1" class="turn-1"></label> <input id="block1-1-2" type="radio"…
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. The HTML <div id="beaker"> <span class="bubble"> <span class="glow"> </span> </span> </div> 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! There are a few things we need to animate. The vertical positioning…
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, button images, links with images, etc. tend to stay the same. They're only changed if designer want to redesign. The way I tend to think about this is, do I want the image to appear on all screen sizes, on all devices, with CSS turned either on or off? Do I…