Pure CSS3 Animated Polaroid Gallery

Normally, Polaroid Gallery is a CSS3 & jQuery Image Gallery plugin for Media Library. It is used to overlay images as Polaroid pictures on the current page or post.

It’s a sure thing that CSS3 features like transitions, animations and transforms can add extra spice to your designs. In this article you will see how you can build an awesome CSS3 animated  Polaroid pictures gallery with some of these cool features.  This is something I wished to do for a while and I finally made it.css3-animated-polaroid-gallery

The HTML

The HTML structure hasn’t changed at all, simple and minimal. Here’s an excerpt:

<div class="photo-album">
<h2>Dhiraj, Geetu & Atharv at Taj ↦ Agra
  <a class="large polaroid img1" href="#"> 
    <img alt="" src="https://lh3.googleusercontent.com/-73u0oSgSX0w/UQ6PZ0Z1wOI/AAAAAAAADPE/57bc9C0BEG0/s512/Agra-trip%252520112.JPG" /> 
    Camel wants to kiss Atharv. </a> 
  <a class="polaroid img2" href="#"> 
    <img alt="" src="https://lh4.googleusercontent.com/-cPFum21LNBA/UQ6PXyb2ISI/AAAAAAAADPM/kJLhIyvx_2k/s512/Agra-trip%252520147.JPG" /> 
    My dearest one.. Atharv with Geetu. — at Taj Mahal</a> 
  <a class="small polaroid img3" href="#"> 
    <img alt="" src="https://lh6.googleusercontent.com/-Bz8NR-oKxGw/UQ6PguAxrsI/AAAAAAAADNY/B7i8X02vnbg/s512/Agra-trip%252520153.JPG" /> 
    Ferntastic</a> 
  <a class="medium polaroid img4" href="#"> 
    <img alt="" src="https://lh4.googleusercontent.com/-gB3RNt_3aos/UQ6Pmx5egoI/AAAAAAAADKM/lensH9ojFd0/s512/Agra-trip%252520154.JPG" /> 
    My dearest one.. Atharv with Geetu. — at Taj Mahal</a> 
  <a class="polaroid img5" href="#"> 
    <img alt="" src="https://lh5.googleusercontent.com/-YbVIBYilZ-M/UQ6P0w2PC8I/AAAAAAAADNc/kKzFy9k51D8/s512/Agra-trip%252520170.JPG" /> 
    Atharv & Geetu with Dhiraj.. Taj in background</a> 
  <a class="polaroid img6" href="#"> 
    <img alt="" src="https://lh6.googleusercontent.com/-IedPhDIDTcg/UQ6P5NG_hSI/AAAAAAAADKw/frG26WPd_OY/s512/Agra-trip%252520175.JPG" /> 
    Atharv in a cute pose.. Taj mahal in background</a> 
  <a class="polaroid img7" href="#"> 
    <img alt="" src="https://lh6.googleusercontent.com/-fhOKmDe-6S4/UQ6QBnHRDhI/AAAAAAAADPw/StGk4el6PVI/s512/Agra-trip%252520192.JPG" /> 
    Atharv with his papa Dhiraj</a> 
  <a class="small polaroid img8" href="#"> 
    <img alt="" src="https://lh4.googleusercontent.com/-lUXHF4hGxak/UQ6QF_7iZnI/AAAAAAAADOs/-agtNNnnYbU/s512/Agra-trip%252520193.JPG" /> 
    awesome</a> 
  <a class="medium polaroid img9" href="#"> 
    <img alt="" src="https://lh3.googleusercontent.com/-a-kezOzwNR8/UQ6QNJpEa4I/AAAAAAAADNk/FAN4Z3LDy2Y/s512/Agra-trip%252520206.JPG" /> 
    Geetu with Dhiraj</a> 
  <a class="polaroid img10" href="#"> 
    <img alt="" src="https://lh6.googleusercontent.com/-J3Gcspy0HKg/UQ6QXk3ZV9I/AAAAAAAADQE/0PyQD_VvC8o/s512/Agra-trip%252520221.JPG" /> 
    Nice one..</a> 
  <a class="small polaroid img11" href="#"> 
    <img alt="" src="https://lh5.googleusercontent.com/-OLpIvUAwZ6E/UQ6QY9gnPwI/AAAAAAAADNo/00eTz4E3_GI/s512/Agra-trip%252520223.JPG" /> 
    Sulphurous</a> 
  <a class="small polaroid img12" href="#"> 
    <img alt="" src="https://lh6.googleusercontent.com/-V-NJ8w3N5hs/UQ6QYqtZVOI/AAAAAAAADOw/FcjS2sgQXxA/s512/Agra-trip%252520229.JPG" /> 
    Atharv with his papa..</a> <a class="small polaroid img13" href="#"> 
    <img alt="" src="https://lh4.googleusercontent.com/-W1T4Z6_xwlQ/UQ6QAdQwuzI/AAAAAAAADNg/vSiGaoo7_TU/s512/Agra-trip%252520188.JPG" /> 
    Atharv with his papa Dhiraj</a> 
  <a class="small polaroid img14" href="#"> 
    <img alt="" src="https://lh6.googleusercontent.com/-Bz8NR-oKxGw/UQ6PguAxrsI/AAAAAAAADNY/B7i8X02vnbg/s512/Agra-trip%252520153.JPG" /> 
    Nice one..</a> 
  <a class="polaroid img15" href="#"> 
    <img alt="" src="https://lh4.googleusercontent.com/-W1T4Z6_xwlQ/UQ6QAdQwuzI/AAAAAAAADNg/vSiGaoo7_TU/s512/Agra-trip%252520188.JPG" /> 
    Atharv with his papa Dhiraj</a> 
</div>

CSS

a.polaroid {
		display: block;
		text-decoration: none;
		color: #333;
		padding: 10px 10px 20px 10px;
		width: 150px;
		border: 1px solid #d7d7d7;
		background-color: white; background:rgba(255,255,255,.9);
		z-index: 2;
		font-size: 0.7em;
		-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3),inset 0 0 0.7em rgba(0,0, 0, 0.4);;
		-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3),inset 0 0 0.7em rgba(0,0, 0, 0.4);;
		box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3),inset 0 0 0.7em rgba(0,0, 0, 0.4);-webkit-filter: blur(1px); border-radius:5px;
		-webkit-transition: all 0.5s ease-in; text-align:center
	}
	a.polaroid:hover, a.polaroid:focus, a.polaroid:active {
		z-index: 999;
		border-color: #999;
		-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4),inset 0 0 0.7em rgba(0,0, 0, 0.4);
		-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4),inset 0 0 0.7em rgba(0,0, 0, 0.4);
		box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4),inset 0 0 0.7em rgba(0,0, 0, 0.4);
		-webkit-transform: rotate(0deg) scale(1.05);
		-moz-transform: rotate(0deg) scale(1.05);
		transform: rotate(0deg) scale(1.05);-webkit-filter: blur(0px);
	}
	.polaroid img {
		margin: 0 0 15px;
		width: 150px;
		height: 120px;
	}

	a img {
		border: none;
		display: block;
	}

	.photo-album {
		position: relative; width: 80%; margin: 0 auto; max-width: 70em; height: 450px; margin-top:2.5em; min-width: 800px; max-width: 900px;
	}
	.photo-album .polaroid {
		position: absolute;
	}
	.photo-album h2 {
		position: absolute; z-index: 5; top: 150px; text-align: center; width: 100%; line-height: 2; 
	}
	.photo-album h2 span {
		background-color: white; background:rgba(255,255,255,.8);
		font-family: 'Satisfy', cursive;
		padding: 0.4em 0.8em 0.3em 0.8em;
		-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
		-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
		box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
		border-radius: 5px; border:1px solid #CCC
	}
	.photo-album .small {
		width: 75px; padding: 6px 6px 12px 6px; font-size: 0.6em;
	}
	.photo-album .small img {
		width: 75px; height: 60px;
	}
	.photo-album .medium {
		width: 200px; padding: 13px 13px 26px 13px; font-size: 0.8em;
	}
	.photo-album .medium img {
		width: 200px; height: 165px;
	}
	.photo-album .large {
		width: 300px; padding: 20px 20px 30px 20px; font-size: 1em;
	}
	.photo-album .large img {
		width: 300px; height: 250px
	}
	.photo-album .img1 {
		bottom: 10px; right: 365px; 
		-webkit-transform: rotate(10deg);
		-moz-transform: rotate(10deg);
		transform: rotate(10deg);
	}
	.photo-album .img2 {
		top: 50px; right: 20px;
		-webkit-transform: rotate(-4deg);
		-moz-transform: rotate(-4deg);
		transform: rotate(-4deg);
	}
	.photo-album .img3 {
		left: 400px; top: 0;
		-webkit-transform: rotate(-5deg);
		-moz-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}
	.photo-album .img4 {
		top: 10px; left: 495px;
		-webkit-transform: rotate(-20deg);
		-moz-transform: rotate(-20deg);
		transform: rotate(-20deg);
	}
	.photo-album .img5 {
		bottom: 0; right: 0;
		-webkit-transform: rotate(1deg);
		-moz-transform: rotate(1deg);
		transform: rotate(1deg);
	}
	.photo-album .img6 {
		bottom: 10px; right: 156px;
		-webkit-transform: rotate(6deg);
		-moz-transform: rotate(6deg);
		transform: rotate(6deg);
	}
	.photo-album .img7 {
		bottom:0; left:400px;
		-webkit-transform: rotate(-10deg);
		-moz-transform: rotate(-10deg);
		transform: rotate(-10deg);
	}
	.photo-album .img8 {
		bottom: -20px; left: 700px;
		-webkit-transform: rotate(-8deg);
		-moz-transform: rotate(-8deg);
		transform: rotate(-8deg);
	}
	.photo-album .img9 {
		bottom: 0; left: 0;
		-webkit-transform: rotate(-8deg);
		-moz-transform: rotate(-8deg);
		transform: rotate(-8deg);
	}
	.photo-album .img10 {
		top: 0; left: 20px;
		-webkit-transform: rotate(8deg);
		-moz-transform: rotate(8deg);
		transform: rotate(8deg);
	}
	.photo-album .img11 {
		top: 0; right: 0;
		-webkit-transform: rotate(-8deg);
		-moz-transform: rotate(-8deg);
		transform: rotate(-8deg);
	}
	.photo-album .img12 {
		top: 0; left: 680px;
		-webkit-transform: rotate(18deg);
		-moz-transform: rotate(18deg);
		transform: rotate(18deg);
	}
	.photo-album .img13 {
		bottom: -20px; right: 630px;
		-webkit-transform: rotate(4deg);
		-moz-transform: rotate(4deg);
		transform: rotate(4deg);
	}
	.photo-album .img14 {
		top: 90px; left: 430px;
		-webkit-transform: rotate(15deg);
		-moz-transform: rotate(15deg);
		transform: rotate(15deg);
	}
	.photo-album .img15 {
		left:176px; top:20px;
		-webkit-transform: rotate(-8deg);
		-moz-transform: rotate(-8deg);
		transform: rotate(-8deg);
	}	
	a:hover, a:focus {
		z-index: 5;
	}

view demo

Your turn

I hope you enjoyed this article and the techniques I used. Please share your comments and questions below!

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

Cool Typography Effects With CSS3 and jQuery

Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we’ll explore some of the possibilities.

Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we’ll explore some of the possibilites.

We’ll be using jquery.DG_lettering.js in order to style single letters of the words we’ll be having in our big headlines.

typography-effects-with-css-jquery

THE HTML

The structure will simply be an h2 element with an anchor inside. We’ll wrap the headline in a container:

<div id="letter-container" class="letter-container">
    <h2><a href="#">Sun</a></h2>
</div>

Then we’ll call the jquery.DG_lettering.js plugin, so that every letter gets wrapped in a span.

This example looks crazy: we’ll create a text shadow that “elevates” the letters. We’ll also create a pseudo element which has a superhero as background.

THE CSS

.letter-container h2 a:before{
    content: '';
    position: absolute;
    z-index: 0;
    width: 525px;
    height: 616px;
    background: transparent url(superhero.png) no-repeat center center;
    background-size: 40%;
    top: 0px;
    left: 50%;
    margin-left: -277px;
    transition: all 0.3s ease-in-out;
}

On hover, we will animate the background size to make the superhero larger:

.letter-container h2 a:hover:before{
    background-size: 100%;
}

The span will have the text-shadow that “elevates” the letters and on hover, we will move the letter down by adding a padding and changing the shadow:

.letter-container h2 a span{
    color: #ff3de6;
    float:left;
    position: relative;
    z-index: 100;
    transition: all 0.3s ease-in-out;
    text-shadow:  
      0px -1px 3px #cb4aba, 
      0 4px 3px #934589, 
      2px 15px 5px rgba(0, 0, 0, 0.2), 
      1px 20px 10px rgba(0, 0, 0, 0.3);
}
.letter-container h2 a span:hover{
    color: #e929d0;
    padding-top: 10px;
    text-shadow:  
      0px -1px 3px #cb4aba, 
      0 4px 3px #934589, 
      1px 1px 10px rgba(0, 0, 0, 0.2);
}

And that’s it! I hope you enjoyed creating some crazy typography effects with CSS3 and jQuery!

view demo

That’s it!

I hope you enjoyed this article and if you have questions, comments, or suggestions, let me know! Thanks for reading.

Posted by: Dhiraj kumar

Cool Animated Fire Effects with CSS3 and jQuery

This effect has been created with some jQuery for setting different CSS3 text-shadow’s in a div. You can check the demo code to see how it’s done. Basically, the Javascript function creates 3 text-shadows (white, yellow and red) with coprime “cycle durations” so the effect looks more random even though it’s totally deterministic.

css3-jquery-animated-fire-effect

Each shadow moves in the Y axis with a linear function and in the X axis with a cosine function. Pretty simple, but effective.

The CSS

#onfire{
      height:auto;
      padding-top:3em;
      font-size: 42px;
      font-weight: bold;
      text-align: center;
      color:brown;
}

The jQuery

<script type="text/javascript">
var step = 1;
function nextShadow(){
	$('#onfire span').each(function(){
	    y = parseFloat($(this).attr("y_pos"));
	    y += step + Math.random()*3;
	    $(this).attr("y_pos", y);
	    shaking = Math.random();
	    shadow1 = "0px 0px "+(y%5)+"px white";
	    shadow2 = shaking*24/y*Math.cos(y/5)*15+"px -"+(shaking*4/y+(y%17))+"px "+(shaking+(y%17))+"px red";
	    shadow3 = shaking*24/y*Math.cos(y/7)*15+"px -"+(shaking*4/y+(y%31))+"px "+(shaking+(y%31))+"px #993";
	    shadow4 = shaking*24/y*Math.cos(y/13)*15+"px -"+(shaking*4/y+(y%41))+"px "+(shaking+(y%41))+"px yellow";
	    $(this).css("text-shadow", shadow2+", "+shadow1+", "+shadow4+", "+shadow3);
	});
}
$(function(){
    $('#onfire span').each(function(){$(this).attr("y_pos","0");});
   setInterval(nextShadow, 50); 
});
</script>

view demo

Update:

I’ve added some randomisation to the algorithm, as well as an individual animation to each of the letters (which, as a drawback, makes the effect run less smooth). I’ve also added a fourth shadow in dark yellow. You can freely use the code by keeping the mention to this site on it.

Thanks for reading and looking forward to read your thoughts!

Posted by: Dhiraj kumar

DG_Slider – An Ultimate jQuery Content Slider Plugin

DG_Slider is a jQuery  plugin that carries you on a content slider or carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is light weight, at about 14 KB in size, yet very flexible and customizable to fit most of our needs. DG_Slider is a great plug-in. It offers a host of features and it is so customizable that you are limited only by your imagination.

DG_Slider : A ultimate jquery content slider plugin with multiple options

Features

  • Horizontal, vertical, and fade transitions
  • Display and move multiple slides at once (carousel)
  • Prev / next, pager, auto controls
  • Start / Stop control
  • Easing transitions
  • Random start
  • Ticker mode also :)
  • Before, after, first, last, next, prev callback functions
  • Optional styling included
  • Tons of customizable options

For more information/Options visit : https://dhirajkumarsingh.wordpress.com/ultimate-jquery-content-slider-plugin-dg_slider/

Posted by: Dhiraj kumar