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

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

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

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

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