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

Animated bubbles upwards continuously with pure 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! read more @ http://www.css-jquery-design.com/…read-more-button

CSS Vendor Prefixes or CSS3 browser prefixes

CSS vendor prefixes or CSS browser prefixes are a way for browser makers to add support for new CSS features in a sort of testing and experimentation period. Browser prefixes are used to add new features that may not be part of a formal specification and to implement features in a specification that hasn’t been finalized. read more @ http://www.css-jquery-design.com/…

CSS-Vendor-Prefixes-or-CSS3-browser-prefixes

The CSS browser prefixes are:

  • Android: -webkit-
  • Chrome: -webkit-
  • Firefox: -moz-
  • Internet Explorer: -ms-
  • iOS: -webkit-
  • Opera: -o-
  • Safari: -webkit-

In most cases, to use a more advanced CSS style property, you take the standard CSS property and add the prefix above for each browser. read more @ http://www.css-jquery-design.com/…
read-more-button

Animated Color wheel spinning with CSS3 Keyframes animation, Transform and Transition

I have done some experimental work to create CSS3 Animation without using JavaScript. I end up creating some animations using CSS3 Keyframes and Transform and like to share. I have done this animation using border-color tricks and CSS Transform: i.e. CSS scale and CSS3 rotation.

Note: Before going I like to make something clear, Internet Explorer 10, Firefox, and Opera supports the @keyframes rule and animation property. Chrome and Safari requires the prefix -webkit- in css.

Important: Internet Explorer 9, and earlier versions, does not support the @keyframe rule or animation property.

css3-keyframes-color-wheel-animation

The HTML

<div id="colorWheel">
    <span class="color01"></span>
    <span class="color02"></span>
    <span class="color03"></span>
    <span class="color04"></span>
    <span class="color05"></span>
    <span class="color06"></span>
    <span class="color07"></span>
    <span class="color08"></span>
    <span class="color09"></span>
    <span class="color10"></span>
</div>

The CSS

Now, We will use some CSS Technique using border-color tricks and CSS3 rotation. I have created this color cycle without using any image.  I have done a cool rotating wheel animation  using @keyframes animation.

#colorWheel {
    height: 100px;
    width: 100px;
    margin: 40px auto ;
    position: absolute; left:10%;
    -webkit-transform-origin: 50px 150px;
    -moz-transform-origin: 50px 150px;
    -ms-transform-origin: 50px 150px;
    -o-transform-origin: 50px 150px;
    transform-origin: 50px 150px;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    animation: wheel 10s ease-in-out infinite alternate;
    -moz-animation: wheel 10s ease-in-out infinite alternate;
    -webkit-animation: wheel 10s ease-in-out infinite alternate;
    -ms-animation: wheel 10s ease-in-out infinite alternate;
}

@keyframes wheel{
    0%{
    opacity:1;
    left:-10%;
    transform:scale(.6) rotate(0deg);
}
50%{
    opacity:.7}
100%{
    left: 90%;
    opacity:1;
    transform:scale(1) rotate(2160deg);
}
}
@-webkit-keyframes wheel{
    0%{
    opacity:1;
    left:-10%;
    -webkit-transform:scale(.6) rotate(0deg);
}
50%{
    opacity:.7;}
100%{
    left: 90%;
    opacity:1;
    -webkit-transform:scale(1) rotate(2160deg);
}
}
@-moz-keyframes wheel{
0%{
    opacity:1;
    left:-10%;
    -moz-transform:scale(.6) rotate(0deg);
}
50%{
    opacity:.7;}
100%{
    left: 90%;
    opacity:1;
    -moz-transform:scale(1) rotate(2160deg);
}
}
@-ms-keyframes wheel{
0%{
    opacity:1;
    left:-10%;
    -ms-transform:scale(.6) rotate(0deg);
}
50%{
    opacity:.7;}
100%{
    left: 90%;
    opacity:1;
    -ms-transform:scale(1) rotate(2160deg);
}
}

#colorWheel:hover {}
#colorWheel span {
    position: absolute;
    -webkit-transform-origin: 50% 50%;
    border-style: solid;
    border-width: 150px 50px;
    box-sizing: border-box;
}
#colorWheel span.color01 {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    border-color: #43a1cd transparent transparent transparent;
}
#colorWheel span.color02 {
    -webkit-transform: rotate(36deg);
    -moz-transform: rotate(36deg);
    -ms-transform: rotate(36deg);
    -o-transform: rotate(36deg);
    transform: rotate(36deg);
    border-color: #639b47 transparent transparent transparent;
}
#colorWheel span.color03 {
    -webkit-transform: rotate(72deg);
    -moz-transform: rotate(72deg);
    -ms-transform: rotate(72deg);
    -o-transform: rotate(72deg);
    transform: rotate(72deg);
    border-color: #9ac147 transparent transparent transparent;
}
#colorWheel span.color04 {
    -webkit-transform: rotate(108deg);
    -moz-transform: rotate(108deg);
    -ms-transform: rotate(108deg);
    -o-transform: rotate(108deg);
    transform: rotate(108deg);
    border-color: #e1e23b transparent transparent transparent;
}
#colorWheel span.color05 {
    -webkit-transform: rotate(144deg);
    -moz-transform: rotate(144deg);
    -ms-transform: rotate(144deg);
    -o-transform: rotate(144deg);
    transform: rotate(144deg);
    border-color: #f7941e transparent transparent transparent;
}
#colorWheel span.color06 {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    border-color: #ba3e2e transparent transparent transparent;
}
#colorWheel span.color07 {
    -webkit-transform: rotate(216deg);
    -moz-transform: rotate(216deg);
    -ms-transform: rotate(216deg);
    -o-transform: rotate(216deg);
    transform: rotate(216deg);
    border-color: #9a1d34 transparent transparent transparent;
}
#colorWheel span.color08 {
    -webkit-transform: rotate(252deg);
    -moz-transform: rotate(252deg);
    -ms-transform: rotate(252deg);
    -o-transform: rotate(252deg);
    transform: rotate(252deg);
    border-color: #662a6c transparent transparent transparent;
}
#colorWheel span.color09 {
    -webkit-transform: rotate(288deg);
    -moz-transform: rotate(288deg);
    -ms-transform: rotate(288deg);
    -o-transform: rotate(288deg);
    transform: rotate(288deg);
    border-color: #272b66 transparent transparent transparent;
}
#colorWheel span.color10 {
    -webkit-transform: rotate(324deg);
    -moz-transform: rotate(324deg);
    -ms-transform: rotate(324deg);
    -o-transform: rotate(324deg);
    transform: rotate(324deg);
    border-color: #2d559f transparent transparent transparent;
}
#colorWheel:before {
    content: "";
    width: 300px;
    height: 300px;
    overflow: hidden;
    position: absolute;
    top: -30px;
    left: -130px;
    border-radius: 100%;
    border: 30px solid #ffffff;
    z-index: 100;
    box-shadow:0px 0px 2px 12px rgba(180,180,180,.5)
}
#colorWheel:after {
    content: "";
    width: 100px;
    height: 100px;
    overflow: hidden;
    position: absolute;
    top: 100px;
    left: 0px;
    border-radius: 100%;
    box-shadow:0px 0px 2px 12px rgba(250,250,250,.5);
    background: #444 url(Dhiraj.png); background-size:contain
}

view demo

Your turn

I had already posted some articles of css3 @keyframes animation examples.  Please check some of these beautiful animation with demo below:

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

Posted by: Dhiraj kumar

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

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

Rotating Words With CSS Animations – CSS3 Keyframes Animation Example

In today’s tutorial we’ll create another typography effect. The idea is to have some kind of sentence and to rotate a part of it. We’ll be “exchanging” certain words of that sentence using CSS animations.
Please note: the result of this tutorial will only work as intended in browsers that support CSS animations.
So let’s start!

In the following, we’ll be going through demo.

rotating-words-css-animations

THE HTML

We’ll have a main wrapper with a h2 heading that contains first-level spans and two divisions for the rotating words:

<section class="rw-wrapper">
	<h2 class="rw-sentence">
		<span>Real poetry is like</span>
		<br />
		<span>creating beautiful butterflies</span>
		<br />
		<span>with a silent touch of</span>
		<div class="rw-words rw-words-1">
			<span>spice</span>
			<span>colors</span>
			<span>happiness</span>
			<span>wonder</span>
			<span>sugar</span>
			<span>happiness</span>
		</div>
	</h2>
</section>

Now, ignoring the garbage placeholder text, we want each span of the rw-word to appear at a time. For that we’ll be using CSS animations. We’ll create one animation for each division and each span will run it, just with different delays.
So, let’s look at the CSS.

THE CSS3

First, we will style the main wrapper and center it on the page:

.rw-wrapper{
	width: 80%;
	position: relative;
	margin: 110px auto 0 auto;
	font-family: 'Bree Serif';
	padding: 10px;
	height: 400px;
	overflow: hidden;
}

We’ll add some text shadow to all the elements in the heading:

.rw-sentence{
	margin: 0;
	text-align: left;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

And add some specific text styling to the spans:

.rw-sentence span{
	color: #444;
	white-space: nowrap;
	font-size: 200%;
	font-weight: normal;
}

The divisions will be displayed as inline elements, that will allow us to “insert” them into the sentence without breaking the flow:

.rw-words{
	display: inline;
	text-indent: 10px;
}

Each span inside of a rw-words div will be positioned absolutely and we’ll hide any overflow:

.rw-words span{
	position: absolute;
	opacity: 0;
	overflow: hidden;
	color: #888;
	-webkit-transform-origin: 10% 75%;
	-moz-transform-origin: 10% 75%;
	-ms-transform-origin: 10% 75%;
	-o-transform-origin: 10% 75%;
	transform-origin: 10% 75%;
}

Now, we’ll run two animations. As mentioned previously, we’ll run the same animation for all the spans in one div, just with different delays:

.rw-words-1 span{
	animation: rotateWord 16s linear infinite 0s;
}
.rw-words-2 span{
    animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) {
	animation-delay: 3s; 
	color: #6b889d;
}
.rw-words span:nth-child(3) {
	animation-delay: 6s; 
	color: #6b739d;	
}
.rw-words span:nth-child(4) {
	animation-delay: 9s; 
	color: #7a6b9d;
}
.rw-words span:nth-child(5) {
	animation-delay: 12s; 
	color: #8d6b9d;
}
.rw-words span:nth-child(6) {
	animation-delay: 15s; 
	color: #9b6b9d;
}

Our animations will run one cycle, meaning that each span will be shown once for three seconds, hence the delay value. The whole animation will run 6 (number of images) * 3 (appearance time) = 18 seconds.
We will need to set the right percentage for the opacity value (or whatever makes the span appear). Dividing 6 by 18 gives us 0.333… which would be 33% for our keyframe step. Everything that we want to happen to the span needs to happen before that. So, after tweaking and seeing what fits best, we come up with the following animation (Fade in and “fall”) for the first words:

@keyframes rotateWord {
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; transform: rotate(0deg); }
	19% { opacity: 1; transform: rotate(98deg); }
	21% { opacity: 1; transform: rotate(86deg); }
	23% { opacity: 1; transform: translateY(85px) rotate(83deg); }
	25% { opacity: 0; transform: translateY(170px) rotate(80deg); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}

We’ll fade in the span and we’ll also animate its height.
The animation for the words in the second div will fade in and animate their width. We added a bit to the keyframe step percentages here, because we want these words to appear just a tiny bit later than the ones of the first word:

@keyframes rotateWordsSecond {
    0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 0.3; width: 0px; }
    20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}

css3-animations-rotating-words

And that’s it folks! There are many possibilities for the animations, you can check out the demo and see what can be applied!
I hope you enjoyed this tutorial and find it inspiring!
view demo

 

Posted by: Dhiraj kumar

Animated 3D Bouncing Ball with CSS3, Html5

Hi guys! Today we are going to see another great example of how to use the power of CSS3. We will start by creating a very cool and realistic 3D ball with pure CSS3 properties, and add a little CSS3 animations for giving the ball a “bouncing” effect.

Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties (gradient, shadow, border-radius, keyframe animation).css-3d-bouncing-ball

THE HTML

Let’s start with some very basic HTML:

<div id="ballWrapper">
     <div id="ball"></div>
     <div id="ballShadow"></div>
</div>

What we have here are 3 simple DIV elements. “#ballWrapper” is the main DIV which wraps the ball. This DIV will determine the ball’s position and height on the screen. Next, we have the “#ball” element which is the ball markup, and finally there is the “#ballShadow” which holds the ball’s shadow separately from the ball itself.

THE CSS

First, we’ll want to set a basic width and height to our ‘#ballWrapper’ DIV. It will help us position it to the center of the screen:

#ballWrapper {
    width: 140px;
    height: 300px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin: -150px 0 0 -70px;
}

Note that I gave the DIV both top and left position properties of  ‘50%’, and a negative top and left margin which is calculated to be exactly half of the original height and width of the DIV. That way we can center the ball on the screen.

Next in line, let’s give our ball some styles (grow up, it’s not that funny… :])

#ball {
    width: 140px;
    height: 140px;
    border-radius: 70px;
    background: linear-gradient(top,  rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
    box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), 
                inset -2px -1px 40px rgba(0,0,0,0.4), 
                0 0 1px #000;   
}

We are giving the ball equal width and height and a ‘border-radius‘ property with a value of  ’70px’ (which is half of the original width and height we’ve set) so it will be a ball and not an oval shape.

Another thing you’ll notice is the background. I gave the ball’s element a linear background and 3 different box shadow levels so it would get the 3D effect. The first box shadow level is for the dark shadowing at the bottom of the ball (see image). Then, we have the second level that is responsible for the blurry glow – again, at the bottom of the ball. Finally the third level is a hardly noticeable blurry shadow behind the contours of the ball.

If you take a look at the ball you’ll notice that there is another small oval shape on top of the ball that gives it a reflection effect. Here is how I created it:

#ball::after {
    content: "";
    width: 80px; 
    height: 40px; 
    position: absolute;
    left: 30px;
    top: 10px;  
    background: linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);
    border-radius: 40px / 20px; 
}

I used the CSS pseudo element ::after and gave it a linear gradient with an opacity. In addition, I’ve set the border radius to  ’40px / 20px’ so it has an oval shape.
Next, let’s handle the ball’s shadow:

#ballShadow {
    width: 60px;
    height: 75px;
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 50%;
    margin-left: -30px;
    background: rgba(20, 20, 20, .1);
    box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
    border-radius: 30px / 40px; 
}

view demo

Again, I used the same properties for centering the shadow, but this time I pinned it to the bottom of ‘#ballWrapper’. I also added a semi-transparent background to it, a fitting box shadow and a border radius.

THE BOUNCING ANIMATION

Now let’s take a look at the fun stuff…

I’ll start by adding the animation property to our ball:

#ball {
    animation: jump 1s infinite;
}

All I did was to define the animation’s name (jump), the animation’s duration (1 second) and how many times the animation will happen – in our case we use ‘infinite’ which means that it will run forever.
The animation itself:

@keyframes jump {
    0% {
        top: 0;
    }
    50% {
        top: 140px;
        height: 140px;
    }
    55% {
        top: 160px; 
        height: 120px; 
        border-radius: 70px / 60px;
    }
    65% {
        top: 120px; 
        height: 140px; 
        border-radius: 70px;
    }
    95% {
        top: 0;
    }
    100% {
        top: 0;
    }
}

So, basically what I’m doing here is to play with the ‘top’ position property of the ball.  Starting from 0, through 160 and back to 0. You’ll notice that in the middle of the animation I’m also playing with the ‘border-radius’ property – that way I handle the “impact” of the ball on the ground.

And now the ball’s shadow; first let’s add the shadow’s relevant animation property:

#ballShadow {
    animation: shrink 1s infinite;
}

I used the same values that I used with the ball, only with a different keyframes animation called shrink which looks as follows:

@-keyframes shrink {
    0% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
        border-radius: 30px / 40px;
    }
    50% {
        bottom: 30px;
        margin-left: -10px;
        width: 20px;
        height: 5px;
        background: rgba(20, 20, 20, .3);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
        border-radius: 20px / 20px;
    }
    100% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
        border-radius: 30px / 40px;
    }
}

In the shadow’s animation I played with different properties then in the ball’s animation. In order to give it all a realistic effect when it comes to the ball’s distance from the floor, I needed to animate the shadow width, height and opacity. While the ball is close to the floor, the shadow needs to be darker and smaller. When the ball jumps up, the shadow should be lighter and bigger.

Last, but not least, let’s add the “click effect” to the ball which makes it appear as if it moves away from us when we click and hold. To achieve this effect, all we have to use is the ‘:active’ pseudo-class, add a transition and play with the CSS3 transform ‘scale’ property like this:

#ballWrapper {
    transform: scale(1);
    transition: all 5s linear 0s;
}

#ballWrapper:active {
    transform: scale(0);
}

The transition from a transform value of scale(1) to scale(0) will make it look as if the element is moving away from you.

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

Creating CSS Starbursts Design with CSS3 Transform

Working with the new CSS3 rotation property I got that I could create image free starbursts. All I needed was a series of nested block-level elements each rotated by a slightly different amount. The rotation would distribute the box corners around the circumference of the star.

About these CSS3 Starbursts:

A good thing is if you create your starbursts with CSS3 you can do so much more than with images. You can experiment with different numbers of points/corners, rounded borders, resize, text-shadows and animations also.

To see the animations you will need to use latest browsers like IE 9+, Firefox 4.0+, Safari 4.1+ and Chrome 3.0+.

css-starburst-design

No CSS Hacks

There are no CSS hacks required for these CSS3 starbursts. CSS is designed to be backwards compatible so any browser that cannot understand CSS3 will simply ignore these new rules without any error.

iPhone, iPod Touch, & iPad Compatible

The Safari browser is one of the most advanced when it comes to CSS3 because it uses the powerful Webkit rendering engine. This means all these animated starbursts will work fine on the iPhone, iPod Touch and the iPad.

SEO Friendly

Because the text in each starburst is actually real text it will be crawled and indexed by Google like everything else. It also means that people who are vision impaired can more easily read and understand your web page if they are using a screen reader.

No Images Required

All of the shapes, colours and shadows in the starbursts above are created using CSS3 rules. No images are used at all.

No JavaScript Required

The animations in these demos are made possible with the CSS3 transition rules. No JavaScript is used to create any effects.

Resizable Text Compatible

All the dimensions of the starbursts are set in em measurements. This means that you can increase the text size in your browser and the starburst will grow in size along with all other text. This is great news for web accessibility.

view demo

The HTML

<div class="price-container">
  <div class="price">
    <span class="label">Buy</span>
    <span class="number">$99.95</span>
    <span class="label">Now</span>
  </div>
</div>

I have <div> that, you guessed it, contains the price starburst. I’ll use this for the background of the starburst. The <div> is the container for the text inside (the price info.) That’s it for the markup. From here, I’ll be styling pseudo classes to create the multiple points. Also, I mentioned earlier that there were a few less points in the CSS version of this starburst. This markup doesn’t really have anything unnecessary in it.

The CSS

Now on to the fun part. Let me overview what I’m going to do, then I’ll show you the styles needed to achieve it. I’m going to style .price-container.price, and the :before and:after pseudo elements for each. Essentially, I’ve got six elements to work with. I created this background image to apply to each of the elements and I will rotate 15 degrees each:

image used for starburst

The CSS is a little bit longer. I’ve used the rotation rules in the CSS, one is for Firefox (prefixed with -moz-), one is for webkit i.e. Safari and Chrome (prefixed with -webkit-), one is for Internet Explorer (prefixed with -ms-), one is for Opera (prefixed with -o-), and the other is the standard rotation rule as it will be used once this rotation property becomes standard:

.price-container,
.price-container:before,
.price-container:after,
.price-container .price,
.price-container .price:before,
.price-container .price:after {
	height: 8.5em;
	width: 8.5em;
	background: #760B1F url(price-bg.png) top left no-repeat;
	background-size: 8.5em;
}

.price-container:before,
.price-container:after,
.price-container .price:before,
.price-container .price:after {
	content: "";
	position: absolute;
}

.price-container {
	margin: 100px auto; /* Centering for demo */
	position: relative; /* Context */
	top: 2.5em;
	left: 2.5em;
	-webkit-transform: rotate(-45deg);
	  -moz-transform: rotate(-45deg);
	   -ms-transform: rotate(-45deg);
	    -o-transform: rotate(-45deg);
	       transform: rotate(-45deg);
}

.price-container:before {
	top: 0;
	left: 0;
	-webkit-transform: rotate(-30deg);
	  -moz-transform: rotate(-30deg);
	   -ms-transform: rotate(-30deg);
	    -o-transform: rotate(-30deg);
	       transform: rotate(-30deg);
}

.price-container:after {
	top: 0;
	left: 0;
	-webkit-transform: rotate(-15deg);
	  -moz-transform: rotate(-15deg);
	   -ms-transform: rotate(-15deg);
	    -o-transform: rotate(-15deg);
	       transform: rotate(-15deg);
}

.price-container .price {
	padding: .5em 0em;
	height: 7.5em; /* height minus padding */
	position: absolute;
	bottom: 0;
	right: 0;
	-webkit-transform: rotate(45deg);
	  -moz-transform: rotate(45deg);
	   -ms-transform: rotate(45deg);
	    -o-transform: rotate(45deg);
	       transform: rotate(45deg);
	z-index: 1; /* important so the text shows up */
}

.price-container .price:before {
	top: 0;
	left: 0;
	-webkit-transform: rotate(60deg);
	  -moz-transform: rotate(60deg);
	   -ms-transform: rotate(60deg);
	    -o-transform: rotate(60deg);
	       transform: rotate(60deg);
}

.price-container .price:after {
	top: 0;
	left: 0;
	-webkit-transform: rotate(75deg);
	  -moz-transform: rotate(75deg);
	   -ms-transform: rotate(75deg);
	    -o-transform: rotate(75deg);
	       transform: rotate(75deg);
}

A few things I’ll point out about the styles:

  • Notice the order of the rotation angles: This order is important because there is going to be text inside the inner-most element. Therefore, the last element (the one the text going in, in this case .price) has to be straight. Notice that .price-container is rotated -45 degrees and .price is rotated 45 degrees – back to 0.
  • The height and width: The height and width has to be set since we are dealing with background images here. I’ve set it in ems to adjust appropriately when the text size increases.
  • There’s a padding top and bottom on .price-container .price. That’s why the height is a little different than all the others.
  • Everything is positioned absolutely inside the first container. .price-container hasleft: 2.5em and top: 2.5em just to move the whole thing a little. When everything is rotated, the corners go of the page and out of the container a little.
  • z-index: There’s a z-index defined for .price-container .price. This is so the price information inside this div is visible.

Now all that’s left is styling the text.

.price-container .price span {
        position: relative;
	z-index: 100;
	display: block;
	text-align: center;
	color: #FE0;
	font: 1.8em/1.4em 'georgia',Sans-Serif;
	text-transform: uppercase;
}

.price-container .price span.number {
  font-weight: bold;
  font-size: 2.5em;
  line-height: .9em;
  color: #fff;
}

Some more CSS used in hover effect:

.price-container.one:hover {
	-webkit-transform: rotate(-20deg);
	-moz-transform: rotate(-20deg);
	-ms-transform: rotate(-20deg);
	-o-transform: rotate(-20deg);
	transform: rotate(-20deg);
}

Doing It Image-Free

Now, I have some extra stuff in here because the design called for this very subtle inner border. If you don’t like or need the inner border, just remove the bit about background image and background size and design will hold up fine.

Browser Support

This works as-is in IE 9+, Firefox 4.0+, Safari 4.1+ and Chrome 3.0+. IE 8 and below do not support background-size, and Chrome 1.0, Firefox 3.6 and Safari 3.0 will require some vendor prefixes. IE8 does support pseudo elements, however doesn’t support transform.

The fallback would be a colored square. Very likely not a huge problem.

auto-adjustable-dynamic-starburst-design-css3-html5

There You Have It

It’s a price star thing. Flexible enough to grow when you increase your font size. Made with some CSS. You can use this for highlighting prices, discounts etc.

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