CSS - Cascading Style Sheets

Pure CSS Water Ripple Effect and Animated Bubbles

I am sharing another example of pure CSS experimental work to create animated bubbles in water with wave or ripple effects without using any image or JavaScript. These animated bubbles are also with popping effect. All these Lab elements are created and animated by Pure CSS. Previously, I had shared "Animated bubbles upwards continuously with pure CSS" with same concept. At that time, I had used a simple image for the conical flask with half filled liquid. But, in this tutorial I have created all these elements by CSS. If you were a Chemistry student or visited any Chemical lab than, you can easily identify…
Continue Reading »
CSS - Cascading Style Sheets

jQuery 3D CSS card flipping effect – Transform 3D

Do you play the cards game classic Solitaire? I know this is most favorite microsoft's game. Here, I am not going to discuss about this game nor it's trick. I am fan of it's 3D card flipping effect and so, here sharing how can we do this with css and jquery. For creating this 3D Card flipping effect, I have done some experimental work with CSS3 Transform (3D) rule. The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements. I had used many transform (3D) effects in Demo. In this…
Continue Reading »
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

Pure CSS Heart Beat / Pulsing Animation

Before working on Heart pulsing animation, first We have to think about How does the Heart beat? It expands and Each pulsing is in same duration/period of time. This can be easily done with CSS3 animation. No flash or images are required. A heart does not double in size when it beats. 10% change in size looks better to me. I like it getting both larger and smaller When it stops moving altogether it looks dead to me. Even when it isn't beating. So, it needs to expand or contract a little to look alive :). I explicitly have the heart start…
Continue Reading »
JAVASCRIPT

10 Useful Beginners JavaScript / jQuery tips and tricks

I consider myself as a advanced when it comes to coding in JavaScript or jQuery however recently I played a bit more with this language and stumbled upon a number of random things i assumed were worth sharing. As you know, JavaScript is the best programming language in the world, the language of the web, of mobile hybrid apps (like PhoneGap or Appcelerator), of the server side (like NodeJS or Wakanda) and has several other implementations. So, if you are new to JavaScript or simply don’t understand it as well as you'd like, I hope you find this article helpful. 1. 0 ==…
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 »
HTML

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

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…
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

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"…
Continue Reading »