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

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

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.

jquery-full-page-animated-background-images

The HTML

Html is very simple. Just add a div with multiple images which you want to animate / change in background with fade effects.

<div id="wrap">
<img class="bgfade" src="http://farm9.staticflickr.com/8526/8668341950_182b74faf2_z.jpg">
<img class="bgfade" src="http://farm9.staticflickr.com/8532/8667337535_6da0a9a261_z.jpg">
<img class="bgfade" src="http://farm9.staticflickr.com/8540/8667244539_d227f8c435_z.jpg">
</div>

The CSS

Now, We will use some CSS Technique which will create an illusion like background-image animation. 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. Now, set css property of div#wrap which includes these images to “position:fixed” and “top:0; left:0;” so that it will fix with page background.

#wrap{
	position:fixed;; 
	z-index:-1; 
	top:0; 
	left:0; 
	background-color:black
}
#wrap img.bgfade{
	position:absolute;
	top:0;
	display:none;
	width:100%;
	height:100%;
	z-index:-1
}

jQuery

Now, it is java-script’s turn. We will calculate browser window’s height & width. After that we will set width/height of div#wrap to browser so that background cover entire webpage. Now we have to animate our images. We will simple use function of fadeIn() and fadeOut() in images for this.

$(window).load(function(){
$('img.bgfade').hide();
var dg_H = $(window).height();
var dg_W = $(window).width();
$('#wrap').css({'height':dg_H,'width':dg_W});
function anim() {
    $("#wrap img.bgfade").first().appendTo('#wrap').fadeOut(1500);
    $("#wrap img").first().fadeIn(1500);
    setTimeout(anim, 3000);
}
anim();})
$(window).resize(function(){window.location.href=window.location.href})

Updated

I have updated the script. Actually, after re-sizing the browser we have to update the width/height of div#wrap. So, I am going to reload this window, when ever browser will re-size. It will help to re-calculate all these and refresh the animation. Div#wrap will re-size according to browser window and play animation smoothly.

view demo

You may like:

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

CSS3 Buttons with Cool Effects – Pure CSS

Nowadays, using subtle patterns is kinda cool so I thought why not using them also on buttons? The idea was to create some nice CSS3 patterned buttons and in this article you’ll see what I’ve been working on lately.

css3-patterned-buttons

view demo

I wrote before about CSS3 buttons, so you may want to check also these articles:

CSS3 patterned buttons features

  • Easy-to-use.
  • Contain the transitions on gradients hack.
  • As you may have expected, no images used here. Instead, an base64 string is used to create the patterned effect.
  • Stilish pressed behavior when grouped.

Buttons

Basically, to create a button, the only thing you have to do is this:

<a href="" class="button">Button</a>

or

<button class="button">Button</button>

You could also use something like <input type="submit"> but for best cross-browser rendering, just stick to the above.

THE CSS

.button{
  display: inline-block;
  *display: inline;
  zoom: 1;
  padding: 6px 20px;
  margin: 0;
  cursor: pointer;
  border: 1px solid #bbb;
  overflow: visible;
  font: bold 13px arial, helvetica, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  color: #555;
  background-color: #ddd;
  background-image: linear-gradient(top, rgba(255,255,255,1),
                                         rgba(255,255,255,0)),
                    url(data:image/png;base64,iVBORw0KGg[...]QmCC); 
  transition: background-color .2s ease-out;
  background-clip: padding-box; /* Fix bleeding */
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .3),
              0 2px 2px -1px rgba(0, 0, 0, .5),
              0 1px 0 rgba(255, 255, 255, .3) inset;
  text-shadow: 0 1px 0 rgba(255,255,255, .9);  
}

.button:hover{
  background-color: #eee;
  color: #555;
}

.button:active{
  background: #e9e9e9;
  position: relative;
  top: 1px;
  text-shadow: none;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}

Different buttons sizes

If you want to make a more prominent or a less prominent call-to-action button, you have options:

css3-patterned-buttons

<button class="small button">Button</button>

or

<button class="large button">Button</button>

THE CSS

/* Smaller buttons styles */

.button.small{
  padding: 4px 12px;
}

/* Larger buttons styles */

.button.large{
  padding: 12px 30px;
  text-transform: uppercase;
}

.button.large:active{
  top: 2px;
}

Various buttons colors

You’ll need custom colors for successful actions or negative ones as delete:

css3-patterned-buttons

<button class="button">Button</button>
<button class="color red button">Button</button>
<button class="color green button">Button</button>
<button class="color blue button">Button</button>

THE CSS

.button.color{
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
  background-image: linear-gradient(top, rgba(255,255,255,.3), 
  					 rgba(255,255,255,0)),
                    url(data:image/png;base64,iVBORw0KGg[...]QmCC);
}

/* */

.button.green{
  background-color: #57a957;
  border-color: #57a957;
}

.button.green:hover{
  background-color: #62c462;
}

.button.green:active{
  background: #57a957;
}

/* */

.button.red{
  background-color: #c43c35;
  border-color: #c43c35;
}

.button.red:hover{
  background-color: #ee5f5b;
}

.button.red:active{
  background: #c43c35;
}

/* */

.button.blue{
  background-color: #269CE9;
  border-color: #269CE9;
}

.button.blue:hover{
  background-color: #70B9E8;
}

.button.blue:active{
  background: #269CE9;
}

Disabled states

In case you’re using buttons or inputs, in some cases you’ll need them to be disabled until a certain task is triggered:

css3-patterned-buttons

<button class="button" disabled>Button</button>
<button class="color red button" disabled>Button</button>
<button class="color green button" disabled>Button</button>
<button class="color blue button" disabled>Button</button>

THE CSS

.button[disabled], .button[disabled]:hover, .button[disabled]:active{
  border-color: #eaeaea;
  background: #fafafa;
  cursor: default;
  position: static;
  color: #999;
  /* Usually, !important should be avoided but here it's really needed :) */
  box-shadow: none !important;
  text-shadow: none !important;
}

.green[disabled], .green[disabled]:hover, .green[disabled]:active{
  border-color: #57A957;
  background: #57A957;
  color: #D2FFD2;
}

.red[disabled], .red[disabled]:hover, .red[disabled]:active{
  border-color: #C43C35;
  background: #C43C35;
  color: #FFD3D3;
}

.blue[disabled], .blue[disabled]:hover, .blue[disabled]:active{
  border-color: #269CE9;
  background: #269CE9;
  color: #93D5FF;
}

Grouped buttons

There will be cases when you’ll need to group similar call-to-action buttons:

css3-patterned-buttons

<ul class="button-group">
	<li><button class="button">Button</button></li>
	<li><button class="button">Button</button></li>
	<li><button class="button">Button</button></li>
	<li><button class="button">Button</button></li>
</ul>

THE CSS

.button-group,
.button-group li{
  display: inline-block;
  *display: inline;
  zoom: 1;
}

.button-group{
  font-size: 0; /* Inline block elements gap - fix */
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, .04);
  border-bottom: 1px solid rgba(0, 0, 0, .07);
  padding: 7px;
  border-radius: 7px; 
}

.button-group li{
  margin-right: -1px; /* Overlap each right button border */
}

.button-group .button{
  font-size: 13px; /* Set the font size, different from inherited 0 */
  border-radius: 0; 
}

.button-group .button:active{
  box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset,
              5px 0 5px -3px rgba(0, 0, 0, .2) inset,
              -5px 0 5px -3px rgba(0, 0, 0, .2) inset;   
}

.button-group li:first-child .button{
  border-radius: 3px 0 0 3px;
}

.button-group li:first-child .button:active{
  box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset,
              -5px 0 5px -3px rgba(0, 0, 0, .2) inset;
}

.button-group li:last-child .button{
  border-radius: 0 3px 3px 0;
}

.button-group li:last-child .button:active{
  box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset,
              5px 0 5px -3px rgba(0, 0, 0, .2) inset;
}

Browser compatibility

CSS3 patterned buttons works in all major browsers. But of course CSS3 features used here do not work in oder browsers like IE8 and below.

view demo

This is it!

There are so many CSS3 buttons in the wild and I know it. Yet I’m confident that my CSS3 patterned buttons might inspire you and I hope you’ll find it useful for your future projects.

Posted by: Dhiraj kumar

CSS3 Transitions Effects on Background Gradients

CSS transitions do not have any effect on background gradients. As far as I know, the thing is that something similar would be quite difficult to achieve considering the multitude of possible gradients that can be created using a color palette.

Though, there are some simple ways you can simulate smooth transitions on gradients and below you’ll see how to do that.

faking-transitions-on-gradients

Before writing this article, I was thinking this new article will hopefully be more useful to you as It contains one more extra technique that can help you faking transitions on background gradients.

So, what is this about and why would you care about transitions on gradients? The answer is very simple: just think about the situation when you’re designing some CSS3 icons/buttons. To make them look awesome, it’s almost mandatory to use shadows, rounded corners and gradients.

Read the workarounds described below and you’ll be able to greatly improve your gradient buttons, especially their :hover state.
view demo

Initial styles

For this demo, we’re using three colored boxes to whom are applied the following workarounds.

I extracted only the important styles needed and as you can see, the background-color has the most important role, as it’s the one who’s actually being transitioned here.

.boxes li{
	transition: background-color .2s ease-out;
}

.boxes .red{
	background-color: #da232a;
}

.boxes .red:hover{
	background-color: #e75f64;
}	

.boxes .green{
	background-color: #72b01a;
}

.boxes .green:hover{
	background-color: #9ed354;
}	

.boxes .blue{
	background-color: #269ce9;
}

.boxes .blue:hover{
	background-color: #70b9e8;
}

1. Background-image

Having already a transitioned background-color, you just need to set a semi transparent background using background-image and the result will be a smooth gradient transition for the element to whom these styles are applied to.

background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));

2. Box-shadow

Perhaps this is a bit dirtier, but it’s still a fully working technique. Instead of a semi transparent background as above, this assume using an inset box-shadow:

box-shadow: 0 60px 50px -30px rgba(255, 255, 255, .5) inset;

view demo

Conclusion

As you can see, the workarounds above are quite simple and easy to implement. Also, the big advantage is that they don’t require any additional markup element to work.

Thanks for reading and feel free to share your thoughts!

Posted by: Dhiraj kumar

Image Sprites – How to merge multiple images, and how to split them

An Image Sprites is a single image which is merged with multiple images. The reason why Image Sprites are needed instead of inserting multiple images into a page is to SAVE network bandwidth as well as reduce the number of server requests. Since inserting many images into a page will take longer time to load the pages, merging images into a single will help reduce loading time. For these reasons, I would recommend to use “CSS Image Sprites” function instead of inserting multiple images. Unfortunately, most of designers/developers not support this function as default, but through this tutorial, you would be able to merge multiple images into a single image as well as manipulating CSS.

“Image Sprites” is strongly recommended for Web, because Web themes have many graphics as default. Therefore, reducing the number of images is necessary to let people as well as search engines visit your sites faster than before. Some times ago, I have already posted an example of a cartoon type animation with help of Image Sprites.

Let me give you an example for easier understandings. Here is lots of avatars I have to put into a page. Without Image Sprites, I have to insert 24 individual avatars into a page. It will generate 24 requests of your web server so that it will take a long time to load.

24 image files to load / 24 requests

Just 1 image file to load / 1 request

With using “Image Sprites”, Only one request and one loading time will be generated. Which one do you think better?

In addition, with the help of “Image Sprites”, you can make use of hover effect more easily. In this tutorial, I will describe how to use Image Sprites with hover effects (View Demo).

To get started (Preparation)

  1. You may need to prepare more than two same size images to be inserted into a page like the avatar image file above.
  2. For this tutorial, I will use these 6 images below as an example. All six buttons’ sizes are equal as 33×33.

3 left images will be used for normal links, and the rest of images will be used for hover effects.

This single image below will be used for “Image Sprites”.

Instruction

  1. Download .zip file or View Demo.
  2. Extract the compressed file onto your hard drive.
  3. Open “imagesprites.html” file using any TextEditor (Notepad/Dreamweaver).
  4. I will let you know some parts you need to replace so that you better modify some codes using text editor.
  5. This code is for this example so that your code will be different. You can refer to this code about how it works.
  6. Take a look at this part of the source code below:
.prev-button {
    width: 33px; height: 33px; border: 0px; background:url('/images/controllers.png') 0 0
}
a:hover .prev-button {
    width: 33px; height: 33px; border: 0px; background: url('/images/controllers.png') 0px -33px
}
.play-button  {
    width: 33px; height: 33px; border: 0px; background:url('/images/controllers.png') -33px 0
}
a:hover .play-button  {
    width: 33px; height: 33px; border: 0px; background: url('/images/controllers.png') -33px -33px
}
.next-button  {
    width: 33px; height: 33px; border: 0px; background:url('/images/controllers.png') -66px 0
}
a:hover .next-button  {
    width: 33px; height: 33px; border: 0px; background: url('/images/controllers.png') -66px -33px
}
image sprite
 As you can see, the first image’s position is “0 0” (.prev-button). The second image (.play-button) position is “-33px 0”. Because each width is set to 33px. Hence, the next image’s position should be “-66px 0”. On the other hand, for hover images, their Y position should be “-33px”, because each height is set to 33px.
  1. If you have set all, the next is to insert HTML codes for each image class like below:
<body style="background: transparent; margin: 0pt; ">
<div>
<a href="URL" target="_top"><img class="prev-button" src="/images/spacer.gif" /></a>
</div>

<div>
<a href="URL" target="_top"><img class="play-button" src="/images/spacer.gif" /></a>
</div>

<div>
<a href="URL" target="_top"><img class="next-button" src="/images/spacer.gif" /></a>
</div>
</body>
  1. If you don’t want an image to be linked, remove href= “URL” target= “_top” tag.
  2. Replace class names such as “prev-button”, “play-button”, and “next-button” to yours.
  3. Make sure the classes doesn’t have “.” at the very front.
  4. Modifying codes is done. You can apply this technique to other merged images.
  5. Make sure “spacer.gif” as well as your merged image file are also uploaded to the right place such as “/images/”.
  6. You are ready to check how “Image Sprites” works correctly. You will reduce the number of server requests as well as save network bandwidth with this CSS technique.

Posted by: Dhiraj kumar