In essence Animatable is an application that allows you to create cross browser animation in a simple to use interface. If you have ever used Windows Movie Maker, an Adobe product, or even Microsoft applications for a few years, you will feel comfortable tackling the user interface.

If you hover over the green arrow on the bottom of the page, it moves and places dots along the graph. It is quite an impressive animation for CSS3 if you think about the complexity that this would normally involve or at least the FLASH application work that would be needed. This removes Flash and makes it cross browser friendly. I love the concept that the Animatable team has developed and can see the value in their work. This could easily become a huge resource for developers since it provides the functionality in one central location.

The Animatable team includes: Naomi Atkinson, Andy Clarke, Mircea Piturca and Dan Rubin.

Check out their video for a detailed analysis and demo.

Extra note: iPad version: we are building a web-based, in-browser tool — as such we are doing our best to make sure it works on iPad.

It would be very impressive if they built the app such that it would responsive to a tablet or mobile device. The web is sure getting exciting with these new HTML5 and CSS3 animation features!

You simply choose what type of new styling you want to achieve, input the values needed to make it function through prompts, and then you preview while you make changes. It reveals the preview, if available, on the screen so you can alter the prompted values and watch your CSS3 transform before your eyes.

After you are finished with the code generation, you can export the code. It will tell you what browsers support the style and it even gives a convenient little copy button. This allows you to keep the code 100% accurate.

There are several different types of stylings that you can acheive with this product. One of them is the text transform. You can add shadows and colors to elements that normally won’t receive special treatment. In the past you would need to create

Randy Jensen is a Web Developer based in Dallas, TX. My passion is great design and usability. He developed this great CSS3 tool.

This is NOT my code. This was taken from 9 lessons.

Javascript Code

< script type="text/javascript" src="jquery.js">
< script type="text/javascript" >
$(document).ready(function()
{
$(".comment_submit").click(function(){
var element = $(this);
var Id = element.attr("id");
var test = $("#textboxcontent"+Id).val();
var dataString = 'textcontent='+ test + '&com_msgid=' + Id;
if(test=='')
{
alert("Please Enter Some Text");
}
else
{
$("#flash"+Id).show();
$("#flash"+Id).fadeIn(400).html(' loading.....');
$.ajax({
type: "POST",
url: "insertajax.php",
data: dataString,
cache: false,
success: function(html){
$("#loadplace"+Id).append(html);
$("#flash"+Id).hide();
}
});
}return false;});});
< /script>

PHP and HTML Code

< div id="loadplace< ?php echo $msg_id; ?>">
< div id="flash">
< div class='panel' id="slidepanel< ?php echo $msg_id; ? >">
< form action="" method="post" name="< ?php echo $msg_id; ? >">
< textarea id="textboxcontent< ?php echo $msg_id; ? >" >< br />
< input type="submit" value=" Comment_Submit "
class="comment_submit" id="< ? php echo $msg_id; ? >" / >
< /form>
< /div>

insertajax.php

< ?php
if(isSet($_POST['textcontent']))
{
$textcontent=$_POST['textcontent'];
// Some SQL data values insert into comments table
}
? >
< div class="load_comment">
< ?php echo $textcontent; ?>

As you can see the value of being able to have multiple form submissions can not be underrated. To see a full demo check out the link above. I will be developing a simple chat script for download utilizing multiple form submissions similar to the Facebook chat of old where you could have multiple windows open.

If you wanted to mass style the form submission it would be easy to take something like jqTransform or better yet utilize the article on CSS form styling for a more contemporary method!

Main feature about this application is the fact of using the nested set model hierarchical data structure instead of the old adjancy list. Nested set Modal is a much more robust and faster way of storing and retrieving hierarchical data on a database that strugles with relational calculus and relational algebra such as MySQL.

Easy Menu Manager is an AJAX /PHP powered menu management system. You can add, edit, delete, and reorder menu items easily using this application.

This is a CSS3 navigation mega menu with 4 variants (horizontal, sticky footer, vertical left and vertical right), 11 premade color schemes and a lot of nice features. Is very easy to use and install, well documented and no JavaScript/jQuery. For more info watch the video preview and the screenshots.

This is a CSS3 Menu inspired in the new Microsoft Metro UI. It comes with 4 different “box” layouts, 5 images animations and more nice features. Is very easy to use and install, well documented and no JavaScript/jQuery. For more info watch the video preview and the screenshots.

CSS3 Clean Mega Menu is simple and easy to use full-width mega menu with 6 built-in color themes. It supports up to six columns out-of-the-box. You can easily customize it adding more columns or color themes.

This Menu with CSS3 Effects and Notification Bubbles has everything you need. The functionality is divided in different parts and that makes it very powerful. The core is a rock solid base for every css menu with unlimited menu levels and a mega menu. The effects are pure css, but you can use the jQuery plugin for support in older browsers. The menu styles are also pure css and there are no images used.    As the name suggests, Sherpa is a total solution for all your navigation requirements.

Sherpa brings together the three main navigation elements of every interface – Navbar, Sidebar and Sticky Footer. Each one consists of a selection of different menu types including: Slide Menu, Mega Menu, Accordion Menu (in sidebar) and Drop Menu. You can pick, choose and mix these to make a really unique navigation.

This CSS only mega navigation bar is extremely flexible and can be used for any type of website. Just customize here and there and your dream navigation bar is ready!

This Mega Drop Down Menu is a flexible and easy to integrate solution to build your custom menus. The drop down relies only on CSS /XHTML and comes with a fully working contact form. 3 main variants are included : horizontal, vertical aligned on the left and vertical aligned on the right. The content can be organized into 6 columns based on the 960 grid system. This item comes with 9 color variants (and 2 color schemes for the drop downs – dark and light) and a detailed documentation to help you to customize it.

Mega Dropdown Enhanced is a CSS3 dropdown menu which is easily customizable and features 7 included color schemes (red, blue, orange, green, grey, tan, teal).

It has valid HTML / CSS, there is no javascript or jQuery, it is cross browser compatible, and there are four different colors.

Super flexible and semantic HTML5 /CSS3 drop down menu, absolutely no JavaScript. Very easy and quick to implement!

Modern Vertical Menu is a clean looking navigation coming in two colour schemes. It can handle dropdown menus and it uses smooth slide effects to display them. All these stuff are made only with pure CSS3 ! Oh, and don’t worry, the menu still looks great in older browsers like Internet Explorer 8 (it even displays the gradients) and it’s functional in Internet Explorer 7. Did I mention that it’s really easy to use it?

This is a simpe but beautiful tabbed navigation completly written in CSS3 & HTML5 – clean code!

Simple CSS3 Menu is actually not a simple menu. It may have a minimalist look, but it’s a pretty complex navigation featuring a mega-menu with up to 5 columns (which can handle links, lists, paragraphs and many more), two menu levels and smooth fade/slide effects. And it’s all made by using pure CSS3!

Here are 9 awe inspiring css3 websites for the first quarter of 2012. Please enjoy!

Bagigia is an interesting website utilizing a full scale arsenal of CSS3 craftsmanship. The full scale screen image rotation is done masterfully and the diverse functionality while scrolling and providing image by image manipulation really enhances the user’s experience.

I love this website. The scrolling functionality of a single page website is great, but when you add on top the functionality of filtering and menu traversing, you get a very good product. The hovering effect on all images is done in CSS3.

Super Hero Mobile Relations has an extremely cool loading feature done in HTML5 and the site combined with CSS3 is great. The menu effect utilizes the pulsing feature in CSS3 which we covered in our previous blog / tutorial. The sprites used on this site are great. They really decrease the load time and shows that the author / developer knows how to save kbs.

My favorite feature for this website is the linear approach they took and made it very accessible through CSS. They had a lot of reveal features with their sliders where it would display an animation behind the scenes. It made the website very interactive.

Kryptis has two focus features that leave an impact on me. One is the animation of the loading at the start and the opening of the website similar to the doors on Star Wars. The second is the full screen image slider after the Star Wars doors open.

Mixpanel is a great application that analyzes data in their reporting system. The homepage has a neat CSS3 effect with images, hovering, and shadows. The actual backend is very feature rich and uses CSS3 to enhance the overall experience with rgb colors.

The Sencha framework is incredible for creating a responsive mobile HTML5 application with great CSS3 features. It uses a great menu system for running the application with only one physical web page and js combined with css power the responsive features that make it feel like a native application rather than a hybrid.

If you look onto the data page for Inigral, you can see the graphing functionality that will be a future tutorial here. It involves jQuery to power the bars from a rest state and adds the css property of height afterwards with an easing effect.

The backend of Hubspot has some great reporting features that utilize CSS graphing and simple functionality that appears to be nothing more than normal images, but is actually built on CSS3 properties that enhance the users experience and cut down on the load time.

There are a lot of CSS websites out there that deserve to be on this page. I choose the websites that I have run across and been inspired by. My portfolio has a load of CSS as well, but I felt like that would be self-promotion and this is more about getting inspired by CSS.

Hello World! So after the last tutorial on styling our menu, we are going to look into animations involving CSS3. We are going to be applying the webkit animation properties to text elements inside of a specific div tag, but you can truly do this with any dom element on the page.

This is what we are going to be making today:

Still interested? Great! That is what I was hoping to view. With CSS3 we can create animations to replace animated gifs, Flash animations, and JS features. If you aren’t interested well scroll to the bottom and check out the source for yourself.

To create animations in CSS3, you will have to learn about the @keyframes rule. The @keyframes rule is where the animation is created. This is very similar to Flash. You will specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style.

Internet Explorer and Opera do not yet support the @keyframes rule or the animation property. Firefox requires the prefix -moz-, while Chrome and Safari require the prefix -webkit-.

This is the CSS we will be using.

< style>
@-webkit-keyframes pulse {
  from {
    opacity: 0.0;
    font-size: 100%;
  }
  to {
    opacity: 1.0;
    font-size: 150%;
  }
}

div {
  -webkit-animation-name: pulse;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
  -webkit-animation-duration: 3s;
}​
< /style>

It seems simple enough because it truly is. CSS3 makes leaps and bounds to make your life easier. It reduces load time and the need for external libraries to make the UX better. The HTML / JS for this page is as follows

 < div id="content">
    < p id="log">
    < script>
      document.getElementById('content').innerHTML = 'animated content';
    < /script>

Now everything together into one file would be:

< !DOCTYPE html>
< html>
  < head>
  < style>
    @-webkit-keyframes pulse {
      from {
        opacity: 0.0;
        font-size: 100%;
      }
      to {
        opacity: 1.0;
        font-size: 150%;
      }
    }

    div {
      -webkit-animation-name: pulse;
      -webkit-animation-duration: 3s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: ease-in-out;
      -webkit-animation-direction: alternate;
    }
  < /style>
  < /head>
  < body>
    < div id="content">
    < p id="log">
    < script>
      document.getElementById('content').innerHTML = 'animated content';
    < /script>
  < /body>
< /html>

If you were to do this for Firefox, you would change the CSS to:

 < style>
    @-moz-keyframes pulse {
      from {
        opacity: 0.0;
        font-size: 100%;
      }
      to {
        opacity: 1.0;
        font-size: 150%;
      }
    }

    div {
      -moz-animation-name: pulse;
      -moz-animation-duration: 3s;
      -moz-animation-iteration-count: infinite;
      -moz-animation-timing-function: ease-in-out;
      -moz-animation-direction: alternate;
    }
  < / style>

Following these simple methods can create a nice transition period in dom elements.

So you saw the button tutorial and thought to yourself how could I make this better? Well it would help if you could apply the same style to all aspects of your website giving off a consistent look and feel. So here I am to proudly present an outstanding new menu method with CSS3. The goal of this brief tutorial is to illustrate the concepts of using gradients and movement all from within CSS3!

This is what we will be making: (Click to see it live)

Just scroll to the bottom to get the source of the style sheet and menu if you are a go getter.

The two main methods focused on here are the gradient and animation features of CSS3. The gradient tool allows you to blend colors from top to bottom and removes that specific need from creating an image. They are not perfect yet, but the speed improvement can be significant if you do it properly.

background-image: -webkit-linear-gradient(top, rgb(249, 249, 249), rgb(240, 240, 240));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f9f9f9', EndColorStr='#f0f0f0');

The animation tool is a little more complex, but still a lot easier and less resource intensive than creating the javascript to animate it. With CSS3 you can create animations to replace animated images (gifs), Flash animations, and javascript in web pages / applications.

	opacity:0;
	filter: alpha(opacity=0);

	-webkit-transition: .3s top ease-in, .3s opacity ease-in;
	-moz-transition: .3s top ease-in, .3s opacity ease-in;
	-o-transition: .3s top ease-in, .3s opacity ease-in;
	-ms-transition: .3s top ease-in, .3s opacity ease-in;
	transition: .3s top ease-in, .3s opacity ease-in;

This is how the menu should look. For some reason the syntax highlighter kept converting this to actual html. Just remove the space right before every tag. Sorry for that trouble. If you want you can just view source on the demo and copy that menu.

< ul class="menu css3tutorial">
	< li>< a href="#">My Number< span class="blue">10< /span>< /a>< /li>
	< li>< a href="#">Your Number< span class="pink">14< /span>< /a>< /li>
	< li>< a href="#">Our Number< span class="yellow">24< /span>< /a>< /li>
	< li>< a href="#">Done< /a>< /li>
< /ul>

This is how our stylesheet should look:

ul, a {
	padding:0;
	text-decoration:none;
}

.css3tutorial.menu {
	display: inline-block;

	background-image: -webkit-linear-gradient(top, rgb(249, 249, 249), rgb(240, 240, 240));
	background-image: -moz-linear-gradient(top, rgb(249, 249, 249), rgb(240, 240, 240));
	background-image: -o-linear-gradient(top, rgb(249, 249, 249), rgb(240, 240, 240));
	background-image: -ms-linear-gradient(top, rgb(249, 249, 249), rgb(240, 240, 240));
	background-image: linear-gradient(top, rgb(249, 249, 249), rgb(240, 240, 240));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f9f9f9', EndColorStr='#f0f0f0');

	-webkit-border-radius:0.2em;
	-moz-border-radius:0.2em;
	border-radius:0.2em;

	border:1px solid #cecece;

	-webkit-box-shadow:
		inset 0px 1px 0px #fff,
		0px 1px 2px rgba(0,0,0,.06);
	-moz-box-shadow:
		inset 0px 1px 0px #fff,
		0px 1px 2px rgba(0,0,0,.06);
	box-shadow:
		inset 0px 1px 0px #fff,
		0px 1px 2px rgba(0,0,0,.06);
}

.css3tutorial.menu li {
	float:left;
	position:relative;

	border-right:1px solid #d8d8d8;
	border-left:1px solid #ffffff;
}
.css3tutorial.menu li:first-child { border-left:none; }
.css3tutorial.menu li:last-child  { border-right:none;}

.css3tutorial.menu li a {
	font-family:'Helvetica Neue', Helvetica, sans-serif;
	font-size:0.75em;
	font-weight:bold;
	color:#666666;
	text-shadow:0px 1px 0px #ffffff;

	display: block;
	padding:0 1em;
	line-height:2.5em;
}

.css3tutorial.menu li a span {
	position:absolute;
	top:-2em;
	right: 0.5em;

	width: 1.5em;
	height: 1.5em;

	line-height:1.5em;
	text-align:center;

	font-family:"Helvetica Neue";
	font-weight:bold;
	color:#fff;
	text-shadow:0px 1px 0px rgba(0,0,0,.15);

	-webkit-box-shadow:
		inset 0px 1px 0px rgba(255,255,255,35),
		0px 1px 1px rgba(0,0,0,.2);
	-moz-box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.35),
		0px 1px 1px rgba(0,0,0,.2);
	box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.35),
		0px 1px 1px rgba(0,0,0,.2);

	-webkit-border-radius:4em;
	-moz-border-radius:4em;
	border-radius:4em;

	opacity:0;
	filter: alpha(opacity=0);

	-webkit-transition: .3s top ease-in, .3s opacity ease-in;
	-moz-transition: .3s top ease-in, .3s opacity ease-in;
	-o-transition: .3s top ease-in, .3s opacity ease-in;
	-ms-transition: .3s top ease-in, .3s opacity ease-in;
	transition: .3s top ease-in, .3s opacity ease-in;
}

.css3tutorial.menu li a span.pink {
	background-image: -webkit-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
	background-image: -moz-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
	background-image: -o-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
	background-image: -ms-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
	background-image: linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f78297', EndColorStr='#f46677');

	border:1px solid #ce4f5e;
}
.css3tutorial.menu li a span.yellow {
	background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba48');

	border:1px solid #dea94f;
}
.css3tutorial.menu li a span.blue {
	background-image: -webkit-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
	background-image: -moz-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
	background-image: -o-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
	background-image: -ms-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
	background-image: linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ace4f8', EndColorStr='#6ccdf3');

	border:1px solid #79b5cb;
}
.css3tutorial.menu li:hover a span {
	top:-1em;
	opacity:1;
	filter: alpha(opacity=100);
}

It is as simple as that! If you have any questions feel free to post in the comments or contact me directly. Enjoy programming, coding, or scripting.

Pure CSS3 form styling is becoming more popular. It has its drawbacks, but the increased loading time from the traditional JS overlay is wasted tenths of seconds when talking about optimizing to maximize for your entire audience. Most forms are fairly straight forward and only utilize inputs and text areas rather than radios and check boxes which create their own challenge.

The example code below is just a small sampling of what you could do. Don’t be afraid to add background gradients or color to your form. I focus on a standard gray look for most elements because it satisfies a wider audience than being color specific. You can play around with the shadow and the background color to add a completely different look to your website. If you have a dark website, I suggest swapping the CSS form code to blend and pop on a dark background. Just add this CSS to your style sheet to instantly style any form.

input {
    padding: 10px;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 5px #444;
    -moz-box-shadow: 0 0 5px #444;
    box-shadow: 0 0 3px #444;
    border: 1px solid #fff;
}

textarea {
    padding: 15px;
    border: 1px solid #fff;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 5px #444;
    -moz-box-shadow: 0 0 5px #444;
    box-shadow: 0 0 10px #444;
}

input[type="text"]:hover, textarea:hover {
    border: 1px solid #233567;
}

Default Form with no CSS. It looks like a pretty boring form to me!

Now if we added the CSS, we can really enhance the overall look of the form. This form is a lot more exciting! It gives a more updated and modern feel with the rounded corners, the gentle shadowing, and the padding that gives a bigger impression. This form style fits for a lot of websites, but it definitely doesn’t fit for every website. I hope you enjoy customizing this form to your taste.

The CSS on the form makes a big impact to your web appearance. If you are interested in enhancing your form further, you can customize with other properties that you find in the tutorials on here: background color, gradient, padding, or even an image, but I think you will be satisfied just by adding a little CSS to your stylesheet.

Example:

I like to take into account the backwards compatibility which is why you see box shadow done multiple times.

button{
   border: 1px solid #8EC1DD;
   background-color: #DDEEFF;
   border-radius: 4px;
   box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
   -o-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
   -webkit-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
   -moz-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
   color: #3985a8;
   text-shadow: 0 1px #fff;
   padding: 5px 30px;
}

Test

What a gorgeous CSS3 button utilizing shadows.

If you were looking to create a more rounded button like…

Test

You would want to increase the ” border-radius: 4px; ” – in my example I used ” border-radius: 10px; ”

The opposite is true if you want to have a square button.

Test

For the above example I used ” border-radius: 1px; ”

Following these simple steps can help eliminate the need for images thus reducing the amount of time needed to execute the loading of your site.

So that is all great with your CSS 3 button, but maybe what you want to do is give that button a hover effect. Well that is simple enough to do.

button:hover{
   border: 1px solid #8EC1DD;
   background-color: #DDEEFF;
   border-radius: 4px;
   box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
   -o-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
   -webkit-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
   -moz-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
   color: #3985a8;
   text-shadow: 0 1px #000;
   padding: 5px 30px;
}

In this case I simply changed the ” text-shadow: 0 1px #fff; ” to ” text-shadow: 0 1px #999; ” It doesn’t look as clean, but it definitely emphasizes the text and you can see the color break through.

Test

Think about all of the great possibilities with CSS3 using these techniques. Sure we applied them to buttons, but you could apply this to any object: boxes, dividers, menus, and on.

Stay tuned for more developments on CSS3. My next blog is going to be about CSS3 forms and how to make those forms come alive.