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.
read more @ http://www.css-jquery-design.com/…

Animated aquarium with pure CSS

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 class="plant_2"></div>
    <div class="plant_3"></div>
</div>
<div class="plant_2_wrap">
    <div class="plant_4"></div>
    <div class="plant_5"></div>
</div>

Now, its CSS turn. I had written about 1040 lines only in CSS for creating these elements.
read more @ http://www.css-jquery-design.com/…read-more-button

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. I.e. 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 want the image to be “indexed” by Google and Facebook. If the answer is yes to all or any of these questions, then usually the image is “content” and you should use an IMG tag.

If you want a different image to display at different screen sizes (or no image at all on certain devices), or if you’re happy for the image to not appear on a print out, or you’re happy for the image to not appear if CSS is turned off, then usually the image is “design” and you should use a background image.

Note: If an HTML file contains ten images – eleven files are required to display the page right. Loading images takes time, so my best advice is: Use images carefully.

Note: When a web page is loaded, it is the browser, at that moment, that actually gets the image from a web server and inserts it into the page. Therefore, make sure that the images actually stay in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon is shown if the browser cannot find the image.
read more @ http://www.css-jquery-design.com/…

read-more-button

Proper uses of IMG & Background-image

  1. Use IMG if you intend to have people print your page and you want the image to be included by default. 
  2. Use IMG (with alt text) when the image has an important semantic meaning, such as a warning icon. This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.

read-more-button

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… read more @ http://www.css-jquery-design.com/…

Animated 3D Perspective Background Patterns using HTML5 Canvas

What is canvas element in HTML?

Canvas was initially introduced by Apple for use inside their own Mac OS X WebKit component in 2004 read more @ http://www.css-jquery-design.com/…

read-more-button

CSS3 3D effect, Shine text with css3 keyframe animation, Scrolling Page Background with jQuery – Happy New Year

On the occasion of New Year 2013, I thought to wish this festival by creating a nice webpage greeting. So, today I created this greeting card using 3D  and shining text effect with the help of CSS3, and scrolling background with JavaScript. I hope you all will enjoy this holiday as well as my web-card too :) .

Introduction

Greeting, today we are going to make a scrolling background effect. This script will move the background of any html tag, either vertically or horizontally. I used this script in one of my greeting card too which has a blue sky with clouds and it makes the whole website came alive. I think that’s pretty impressive. In this card you will find texts with different CSS effects like: 3D emboss, continuous spotlight shine effect, text shadow etc.

3d-shine-text-css3-scrolling-background-happy-new-year

The CSS

I have Used multiple text-shadows to create 3D text on any HTML element. No extra HTML, no extra headaches, just awesomesauce.
Works in the latest builds of Safari, Chrome, Firefox, and Opera.

h1 {
  margin:1.2em auto;
  font: bold 100px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
  -webkit-transition: .2s all linear;
}

Text shine Effect created with WebKit-specific CSS3 properties. You’ll need Safari or Chrome to enjoy key-frame animation.

p.shine{
    font-size: 3em;
    margin: 0 auto; padding:0;
    width: 95%;
}
.shine{
    background: #222 -webkit-gradient(linear, left top, right top, from(#ccc), to(#fff), color-stop(1, #f0f)) 0 0 no-repeat;
    background-size: 400px; -webkit-background-size: 400px; 
    -moz-background-size: 400px; -o-background-size: 400px;    
    color: rgba(255, 255, 255, 0.7);	
    background-clip: text; -webkit-background-clip: text; 
        -moz-background-clip: text; -o-background-clip: text;	
	-webkit-animation: shine 2s infinite;
	-moz-animation: shine 2s infinite;
	-o-animation: shine 2s infinite;
	-ms-animation: shine 2s infinite;
	animation: shine 2s infinite; 
}

@-webkit-keyframes shine{
    0%{background-position: top left;}
    100%{background-position: top right;}
}
@-moz-keyframes shine{
    0%{background-position: top left;}
    100%{background-position: top right;}
}
@-o-keyframes shine{
    0%{background-position: top left;}
    100%{background-position: top right;}
}
@keyframes shine{
    0%{background-position: top left;}
    100%{background-position: top right;}
}

For page background I used cloud in png format.

body{background:url(bg_clouds.png) 0 0}

The HTML

<h1>Happy New Year 2013</h1>
<p class="shine">The New Year is the time of unfolding horizons and the realization of dreams, may you rediscover new strength and garner faith with you, and be able to rejoice in the simple pleasures that life has to offer and put a brave front for all the challenges that may come your way.<br>
Wishing you a lovely New Year..</p>

The JavaScript – jQuery

We have to add jquery library in body first, after that we animate our page background with css background-position properties. I always prefer to use JavaScript files before close of body tag.

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">var scrollSpeed = 70; 
    var current = 0;
    function bgscroll(){
        current -= 1;   
        // move the background with backgrond-position css properties
        $('body').css("backgroundPosition", 1 ? current+"px 0" : "0 " + current+"px");   
    }
     setInterval(bgscroll, scrollSpeed);   </script>

view demo

Happy New Year!

I hope you like the result and don’t hesitate to share your thoughts about it. Thanks for reading!

Posted by: Dhiraj kumar

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 snowfall.dg.js for creating these snow.

snowfall-effect-javascript-christmas-greetings

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 any image for snow.
  • No need to add any JavaScript library.
  • You can use any html element in place of snow.
  • Change the Color of Snow by using hexadecimal value.
  • Also support in iPhone, iPad and Mobile devices.
  • Snow-fall movement with mouse/cursor.
  • Stick on bottom.
  • Snow melt effect.
  • Twinkle effect – you can use this also if you want star-fall 🙂
  • More options..

What this script does is adds snow-fall to the body. You can find more options in snowfall.dg.js.

The CSS

No special css required for snow fall effect. But in this greeting card, I have used css for background and my greeting message.

body{
         font-size:18px; 
         background:#badaf3 url(merry_chirstmas-wide.jpg) 100% 0 no-repeat; 
         background-size:cover; 
         font-family: 'IM Fell Double Pica', georgia, serif;
}
#welcome{
         font-size:2em; 
         width:40%; 
         margin:4%; 
         text-align:center; 
         background-color:#fff; 
         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
         background:rgba(255,255,255,.75); 
         border-radius:10px; 
         box-shadow:4px 4px 10px 0 rgba(20,20,20,.6); 
         text-shadow: 2px 2px 3px #fff; 
         font-style:italic; 
         padding:1em; 
         color:#700; 
         color:rgba(120,0,20,.9)
}

The Html

<div id="welcome">May the miracle of Christmas fill your heart with 
warmth & love. 
Christmas is the time of giving and sharing.
It is the time of loving and forgiving. 
Hope you and your family have
wonderful Holiday... &... Merry Christmas to Everyone! </div>

Snowfall – The javascript

We have to add this snowfall.dg.js in body. I always prefer to use JavaScript files before close of body tag.

<script type="text/javascript" src="snowfall.dg.js"><script>

view demo

Updated!

I have updated this greetings with Jingle bells music and Html5 audio tags. now our Html is

<div id="welcome">May the miracle of Christmas fill your heart with 
warmth & love. 
Christmas is the time of giving and sharing.
It is the time of loving and forgiving. 
Hope you and your family have
wonderful Holiday... &... Merry Christmas to Everyone! </div>
 <audio autoplay="true" loop="true">
   <source src="jingle_bells_merry.ogg" type="audio/ogg">
   <source src="jingle_bells_merry.mp3" type="audio/mpeg">
Your browser does not support the audio element (HTML5). Please update your Browser.
 </audio>

Merry Christmas

I hope you like the result and don’t hesitate to share your thoughts about it. Thanks for reading!

Posted by: Dhiraj kumar

jQuery Plugin for Cartoon-like Background Image Sprite Animation – AniDG – (alernative to animated Gif)

What is AniDg?

AniDg is a simple plugin for jQuery which allows you animate background images. The plugin is basically an alternative to the animated GIF but with several benefits. At first, it’s always better to use an animated GIF as this format is supported by all browsers without any JavaScript code or additional markup, but the “dark side” of it is that an animated GIF allows only 256 colors and you cannot control animation in any way. The AniDg loads a long vertical image and changes its background position with the speed you setup, giving you more control of the animation. For Better quality you can call PNG, JPG, GIF images in background image sprite as per your requirements.

Demo

jQuery Plugin AniDG Background image animation

Features

  1. Light-weight script (Only 1Kb :))
  2. Easy to integrate
  3. Fully customizable via CSS
  4. Works with all modern browsers 🙂

How to Use

METHOD #1: EASY

Simply place the following code anywhere inside thetag of your webpage:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://demo.web3designs.com/jquery-ani.dg.min.js"></script>

METHOD #2: ADVANCED

STEP ONE: Download AniDg.zip or http://demo.web3designs.com/AniDg.zip. The package already contains all files used in this demo.

STEP TWO: Unzip and place the file jquery-ani.dg.min.js in the same location as the webpage that is displaying the animation. (Make sure paths to files are correct.)

STEP THREE: include the following code in the <head>…</head> section of your webpage:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery-ani.dg.min.js"></script>

3.) Add a style containing the url to your background with animation (this may be added to a separate CSS document or inside the <head>…</head> tag):

<style type="text/css">
#animation-1 {
background: url(images/sample-animation.gif) no-repeat left top;
}
</style>

4.) Add an empty DIV which will display animation in your document:

<div id="animation-1"></div>

5.) Add the following code to your <head>…</head> tag to initialize AniDg and start the animation.

<script type="text/javascript">
$(document).ready(function(){
$('#animation-1').anidg({ frameWidth: 100, frameHeight: 100, speed: 100, totalFrames: 19 });
$('#animation-1').anidg.play();
});
</script>

That’s it 😉 Click the Demo button to see it in action.

Public Functions

anidg.play()
Start playing animation.

anidg.pause()
Pause animation.

anidg.stop()
Stop animation.

Parameters

The table below contains a list of parameters accepted by the .anidg() function.

Parameters Description
frameWidth Width of a single frame.
frameHeight Height of a single frame.
speed Animation speed.
totalFrames Total frames in the animation.
loop Loop an animation or not. By default, value is true.

Posted by: Dhiraj kumar