CSS - Cascading Style Sheets

Create a flashing button with CSS3 @keyframes Animation

Often, we need a promotional or highlight button like "Hot Offers/Deals/Promotional Discounts" with flashing effects. Today, we will create a beautiful flashing button without any GIF image using Pure CSS3. Before this, I am going to remind the basic ruls of CSS3 Animation first. CSS3 animations allows animation of most HTML elements without using JavaScript or Flash! To use CSS3 animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times. The basic of @keyframes Rule When you specify CSS styles inside the @keyframes rule, the animation will gradually change from…
Continue Reading »
CSS - Cascading Style Sheets

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{ ;…
Continue Reading »
CSS - Cascading Style Sheets

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…
Continue Reading »
CSS - Cascading Style Sheets

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 and does not have a built-in scene graph. The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images. What is canvas element in HTML? Canvas was initially introduced…
Continue Reading »
CSS - Cascading Style Sheets

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 CSS3 and JavaScript. I hope you all will enjoy this holiday and my web-card too :) . Introduction - What is Parallax? Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two…
Continue Reading »
CSS - Cascading Style Sheets

3D Parallax effect with CSS, javascript or jQuery

Parallax effect is a long-known and widely used animation effect. Lately, the parallax effect has become a wide-spread and quite a trend element in web design, often referred to as "parallax scrolling". Internet if full on many great examples of application of this effect in web design. As I planned to create a cool parallax animated background, my first goal was to write the shortest and simplest code to achieve maximum awesomeness! I’ll show you how I did it. In this tutorial, I’ll teach you the simplest parallax scrolling technique. Here, I am going to introduce you, a most flexible/responsive slider  Parallaxfx_DG. It is…
Continue Reading »
CSS - Cascading Style Sheets

Creating a Puzzle game using jQuery

Today we are making a simple puzzle game called "Doraemon Puzzle". The purpose of the game is to slide 15 square blocks around to form an image. The goal of this tutorial is to look at this simple browser-based game and explain how it was made line by line. It’s a great way to learn jQuery. For this tutorial, We will use a 2D image of kid's favorite cartoon "Doraemon" for square-sliding game.  I will go over each line of code to demonstrate the train of thought. I really do believe that breaking this game up into explanations on per-line…
Continue Reading »
CSS - Cascading Style Sheets

Animate Full-Page Multiple Background images with fade-in & fade-out effect – jQuery

"How to change multiple background-image of body with effects?" - I think this is a major problem which all designers face. You can fade background colors but not background images. The way to work around this is to have your images as <img> tags and hide them by default display:none;. Give your images position:absolute and z-index:-1 so they act like backgrounds and are behind everything else. Here's a quick example of multiple images fading one after the other. The HTML Html is very simple. Just add a div with multiple images which you want to animate / change in background with fade…
Continue Reading »
CSS - Cascading Style Sheets

Snow-Fall Effect with JavaScript – Creating Merry Christmas Greetings

On the occasion of Christmas and winter Holidays, I thought to wish this festival by create a nice webpage greetings. So, today I had created this Christmas greeting card using snow-fall effect with help of CSS3 and JavaScript. I hope you all will enjoy this holiday and my web-card too :). Today we will create a Christmas greeting card using CSS3 and jQuery. There are many things we can do with CSS3 and javascript. We’ll use  for creating these snow. Features and Principle Note: Snowfall Plugin is Less than 12Kb in size. There are many options for customize and use this plugin as per your requirement. Some features are: No need to add…
Continue Reading »
CSS - Cascading Style Sheets

Random 3D Explosions, 3D clouds – Effects with CSS 3D and jQuery

Introduction This tutorial will try to guide you through the steps to create a 3D-like, explosions in sky or billboard-based clouds. There are a few advanced topics, mainly how 3D transformations via CSS properties work. If you want to find more information, this is a nice place to begin. If you're in a hurry, just check the final result. The tutorial is divided into sections, each with a different step to understand and follow the process, with HTML, CSS and Javascript blocks. Each step is based on the previous one, and has a link to test the code. The code in the…
Continue Reading »
12