What is Edge?

Straight from Adobe, “Adobe® Edge is a new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3.” You can download Adobe Edge directly from their website. Edge has a few OS requirements such a Vista+ or OSX 10.6+. The full requirements are available on their download site.

Adobe promises frequent updates to Edge. At the time of writing this post, only Preview 1 was released. You can keep up with Edge’s updates via their Twitter or Facebook accounts.

Thoughts on Edge

I picked up Adobe Edge very quickly. I had used Adobe After Effects a few times before, mainly just playing around with it, and I felt that Edge’s UI was very similar to it. If you are at all familiar with After Effects, you should feel very comfortable with Edge’s UI. If you have never used After Effects before, Edge’s UI is pretty simple, and it shouldn’t take long to get use to.

I’m assuming that it is a bug with the preview version, but on my version (running on Windows 7) I couldn’t see any of the elements on the stage. All I could see what the element’s bounding box when I selected it via the selection tool, or by clicking on the element in the timeline/elements folder. This, of course, made it pretty hard to judge my animations. The only way I could see the elements after creation and animating was previewing the stage in a browser.

I was easily able to create animations using Edge, and it took no time at all. Edge uses a combination of jQuery, custom JavaScript and CSS3 to do the animations, however JavaScript is required to run them at all (at least for all of my examples.) Edge will write all of the required files that you need to run the animation. You can then take the animation and plug it in wherever you want, usually with no conflicts to your other elements on your site.

Animations

I created a few animations with Edge to test its capabilities. The first three were very quick animations that took less than a few minutes each. The sun rising/setting animation took a little longer, but still only took about 15 minutes total. This quick animation time was even with the bug I mentioned above where I couldn’t see the elements on the stage.

You can view the animations below, as well as download the source for all of the animations.

• Bouncing Box
• Fading Colors
• Animating Text
• Sun rising and setting, then the moon rises

Download SourceDemo

Download SourceDemo

What’s new

• Totally reworked code allows you to use no images, but still obtain the gradient effect with ease.
• Improved user experience
• Improved webkit (Safari, Chrome) support
• Interactive states including hover, focus and click

Improved user experience

The old menu limited the user to only be able to click on the menu where the text was. The new menu allows the user to click on the entire button to be taken to the link. Also, the new menu now features four states: normal, hover, focus and click. Focus is where the user would use tab to select the menu link. The browser default outline was removed with CSS, so this feature was added for users who depend on that state. The fourth state is the click state, which happens when, you guessed it, the user clicks on it. This is a subtle effect, but it adds just enough to intrigue your user.

How it’s done

Everything is done with CSS, so there are no images needed. Below is the CSS for the buttons.

.cbdb-menu li a {
	/* This generators the gradient on top of the solid color */
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, rgba(255,255,255,.5)),
		color-stop(1, rgba(0,0,0,.1))
	);
	background-image: -moz-linear-gradient(
		center top,
		rgba(255,255,255,.5) 0%,
		rgba(0,0,0,.1) 100%
	);
	color: #f4f4f4; /* IE */
	color: rgba(255, 255, 255, 0.8);
	display: block;
	font: bold 18px "Myriad Pro","Lucida Grande",Helvetica,Arial,sans-serif;
	outline:none;
	padding: 5px 15px;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
	-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
	-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
}
	.cbdb-menu li a:active {
		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0,rgba(255,255,255,.5)),
			color-stop(.1,rgba(255,255,255,.2)),
			color-stop(.85, rgba(0,0,0,.2)),
			color-stop(100, rgba(0,0,0,.4))
		);
		background-image: -moz-linear-gradient(
			center bottom,
			rgba(255,255,255,.5) 0%,
			rgba(255,255,255,.2) 10%,
			rgba(0,0,0,.2) 85%,
			rgba(0,0,0,.4) 100%
		);
	}

This CSS is for the basic button, without any color. This applies the gradient to the button, using RGBA colors. RGBA allows the developer to set the color, as well as transparency (the A). The white and black in the gradient all has a transparency to it, allowing the solid color below to show through.

In this demo, color is added to the buttons with classes to demonstrate the flexibility. The colors are added using basic hex code to the link:

.red {
	background: #B80202;
	border: #B80202 1px solid
}
	.red:hover, .red:focus{
		background-color:#e30606
	}

Because the basic styling for the button is a transparent gradient, and it is applied using the background-image property, the solid color can be shown underneath the gradient. Think of it as a two layered button, with the transparent gradient being on the top, with the solid color below.

Get Creative

Please, use this on your own projects – and get creative with it. Since the menu is styled entirely using CSS, it is very flexible and open to any customization. If you use it on your site or in one of your projects, drop a link in the comments below so we can all see it in action.

Download SourceDemo

Along with the new articles, I am going to be making various enhancements to the blog, and possibly roll out a new design. Please stay tuned, and thanks again for the support.

Download SourceDemo

The Markup

The markup is simple. All that is needed is a form, a text box and a submit button.

CSS3 Magic

The rest is done with CSS. This includes everything from gradients to rounded corners. CSS3 takes out a lot of the need for images, allowing elements to be more scalable as well as being easier to create. There are regular background colors included in the CSS for browsers that don’t support CSS3. They may not look as spiffy as the CSS3 version, but it will appear somewhat close.

#search-form {
	background: #e1e1e1; /* Fallback color for non-css3 browsers */
	width: 365px;

	/* Gradients */
	background: -webkit-gradient( linear,left top, left bottom, color-stop(0, rgb(243,243,243)), color-stop(1, rgb(225,225,225)));
	background: -moz-linear-gradient( center top, rgb(243,243,243) 0%, rgb(225,225,225) 100%);

	/* Rounded Corners */
	border-radius: 17px;
	-webkit-border-radius: 17px;
	-moz-border-radius: 17px;

	/* Shadows */
	box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
}

/*** TEXT BOX ***/
input[type="text"]{
	background: #fafafa; /* Fallback color for non-css3 browsers */

	/* Gradients */
	background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230)));
	background: -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%);

	border: 0;
	border-bottom: 1px solid #fff;
	border-right: 1px solid rgba(255,255,255,.8);
	font-size: 16px;
	margin: 4px;
	padding: 5px;
	width: 250px;

	/* Rounded Corners */
	border-radius: 17px;
	-webkit-border-radius: 17px;
	-moz-border-radius: 17px;

	/* Shadows */
	box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
	-webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
	-moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
}

/*** USER IS FOCUSED ON TEXT BOX ***/
input[type="text"]:focus{
	outline: none;
	background: #fff; /* Fallback color for non-css3 browsers */

	/* Gradients */
	background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(235,235,235)));
	background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(235,235,235) 100%);
}

/*** SEARCH BUTTON ***/
input[type="submit"]{
	background: #44921f;/* Fallback color for non-css3 browsers */

	/* Gradients */
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(79,188,32)), color-stop(0.15, rgb(73,157,34)), color-stop(0.88, rgb(62,135,28)), color-stop(1, rgb(49,114,21)));
	background: -moz-linear-gradient( center top, rgb(79,188,32) 0%, rgb(73,157,34) 15%, rgb(62,135,28) 88%, rgb(49,114,21) 100%);

	border: 0;
	color: #eee;
	cursor: pointer;
	float: right;
	font: 16px Arial, Helvetica, sans-serif;
	font-weight: bold;
	height: 30px;
	margin: 4px 4px 0;
	text-shadow: 0 -1px 0 rgba(0,0,0,.3);
	width: 84px;
	outline: none;

	/* Rounded Corners */
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;

	/* Shadows */
	box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
	-moz-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2);
	-webkit-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
}
/*** SEARCH BUTTON HOVER ***/
input[type="submit"]:hover {
	background: #4ea923; /* Fallback color for non-css3 browsers */

	/* Gradients */
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
	background: -moz-linear-gradient( center top, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);
}
input[type="submit"]:active {
	background: #4ea923; /* Fallback color for non-css3 browsers */

	/* Gradients */
	background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
	background: -moz-linear-gradient( center bottom, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);
}

Compatibility

CSS3 works in most new browsers, with the exception of Internet Explorer (any version). This has been tested cross-browser and cross-platform. If you have any issues, please comment below and I will try to patch them.

In addition, this tutorial is just to style the search form. You can slap these styles on a search form such as the WordPress search form for functionality.

Download SourceDemo

Minified?

What exactly does minified mean? The plugin goes through your entire theme and takes out unnecessary code and space, as well as optimizes it. Extra spacing between elements in your markup and CSS is great for development because it separates everything into sections, but you don’t need these extra spaces for production. Visitors on your website can’t tell if there is extra spacing in the markup or not when just viewing the website, so why have it there? That extra spacing bloats your file size which in turn causes longer load times and increased bandwidth usage.

Customizable and Reversible

Many may be worried that this plugin is going to break your theme. After all those hours and long nights of coding your perfect theme, you don’t want it to all be destroyed by a plugin. Worry not, Theme Minifier understands and has your back. There are various levels that you can minify your theme. The standard level will rip out all the white space in your markup. You can also choose which method to use when the plugin optimizes your JavaScript: JSMin or Packer. JSMin is the default because it is the most popular and most used, and Packer is often considered evil, however it results in smaller file size. You can then take it a step further and optimize your site’s CSS. For now, using this CSS optimization will break any CSS3 styles that you may be using such as any -moz or -webkit tags because it is not valid CSS.

After you choose your settings and the plugin runs, it will create a copy of your theme, and it will not automatically make your site use the new theme. If something in the theme would break and the plugin forced your site to use the new theme, all of your visitors would immediately see the broken theme. You will also have a backup which you can revert to at anytime in case there is a problem.

Having two copies of your theme, one original theme and one minified, has another advantage other than speed and optimization. You can deliver the minified theme to your visitors, and still have the markup laid out the way you like it. The original theme then becomes the development theme, which you can make all of your changes to with ease. When you are done making the changes, you can simply run the plugin again to minify the new changes.

Image Optimization

The Theme Minifier will also analyze and convert your images to whatever file type is the most efficient. Just like your theme, it will create a new version of every image it converts so your original images aren’t gone forever and damaged. Theme Minifier shows you a nice table showing what images it converted and gives you details like how much space you can save by using the new format. If you choose to use the new images, it is up to you to make the necessary changes in the markup.

Risk Free

Since the plugin gives you options and backs up your theme, why not try it out? It will only take a few seconds to install, and just as long to run. Make sure to visit the plugin’s page in the WordPress Plugin Directory or visit the author’s blog about the plugin. After your run the plugin, it will even give you a report on how much you saved, and where it was saved.

How Much Space Did You Save?

After you install and run the plugin, comment below and let us know how much space you saved!

Supported CSS

There may be some things that you don’t have to change for your mobile site’s CSS. Opera supports all of the advanced CSS selectors and pseudo classes that you have grown to love. Opera also supports the following CSS3 that you may have already been using:

• text-shadow
• RGBA
• outline

Assuming you have been using -webkit specific CSS code, you may need to add some more CSS to get it to look right in Opera. Opera uses a mix of the generic properties, as well as specific Opera properties which has the “-o-” in front of the normal property such as “-o-box-sizing”.

Box Shadows

box-shadow: 1px 1px 2px rgba(0,0,0,.4);

Rounded Corners

border-radius: 5px;

Box Sizing

-o-box-sizing: border-box;

Transforms

Transforms can be done by using the special “-o-” property. In this example I am going to be rotating my element.

-o-transform: rotate(7.5deg);

Gradients

This was one of my favorite CSS3 properties. Unfortunately, this is one of the properties that Opera doesn’t support yet. Since Opera Mini is a regular iPhone app, they can put out regular updates. If they do support CSS gradients eventually, the update will be made available to all users.

More resources

CSS3 Please – A quick guide that lets you see how to create different effects right on the site. The CSS on the site is editable, and all the changes are reflected live on the site.

CSS3 Generator – A very quick tool that lets you select what you want to do, and gives you all CSS code for each browser (if available) to achieve it

New installation

I noticed new features before WordPress finished installing. The installation process has been reworked to make it more friendly and your blog more customized from the beginning. You now have the opportunity to chose your username, so you can have something other than the old default, “admin”. In addition, you can set your password right at the installation screen. There is no more automatically generated password, and the “Hey, change your password!” reminder when you first sign in. This not only reduces the steps you need to take to set up your site, but increases security greatly.

Since they added the password reminder, most people do change their password right away when they install, but some may forget about it. Hackers may be able to get into your site using a tool that generates passwords similar to WordPress’ generator. Now your site can have a custom password from the beginning, and a custom username if you wish. Hackers will have to guess your username and your password.

New themes

New backend theme

The WordPress backend theme has been updated to a more modern looking grey color. In addition to the color, the font in the content editor for pages and posts has changed. It got a bump up in size and change from black to a dark grey.

New site theme, Twenty Ten

The default theme has been updated as well. The new theme, aptly named “Twenty Ten”, includes support for all of the new features, and six widget areas. There are two widget areas in the right sidebar, and four in the footer.

Comments directly on the page/post in the backend

When you’re viewing a page or post in the backend, you can now view all the comments that have been posted to it. The new comments section is not a replacement for the existing comments section, it’s just a way to extend it. In the new section, you can control all aspects of the comment like you can now in the existing section.

Theme management

The themes section has been revamped to include tabs for your existing themes, and to install themes. Both of these functions are available now, but the tabs make them more prominent. In WordPress 2.9, there is also no way to get back to the “Manage Themes” page without selecting it from the menu on the left, or using your back button.

Menu system

This may be one of my favorite new features. Keep in mind that this is far from complete. They say that it will not function/look the same in the next beta, but they didn’t want to hold up the beta release for this one section.

The new menu system gives non-web-savvy people control over their menus on their website. I just had an experience that this menu system would have been perfect for. I created a client’s site that had all menus and dropdowns dynamically populating from their pages and categories. They only wanted some of these pages to be displayed, so I created a custom field solution to display certain pages in the menu.

With this new menu system, users can just go into the “Menus” page and select what they want to display in the menu. Users can create multiple menus, which can then be placed on the page via PHP code or widgets. Users can put any link in the menu they want. They can link an existing page or category, and even custom links to any URL. When linking to an existing page or category, the user can search for the page name, and WordPress will find all the pages with that word in the title. From the results, that link can added to the menu.

Miscellaneous Features

There are a few other new features such as the ability to change the background and header images within the backend. I’m assuming these are theme dependent features, but I haven’t tested them out yet. There is also a new “featured image” area when editing a post or page. I added a featured image to one of the posts, but didn’t notice any changes. I’m assuming this feature isn’t quite finished.

Explore WordPress 3.0

If you want to check out WordPress 3.0 for yourself, hop over to the WordPress blog post and download the release! Leave a comment if you find a new feature that I have missed, or comment about your favorite new feature.

Download SourceDemo

I chose loopedSlider for this slider for many reasons. Nathan Searles is constantly updating the plugin over at GitHub. All of the updates are great because they add new features, and fix any bugs that may come up. This also allows all of the users of the plugin to easily get the latest version of the plugin. I also chose loopedSlider because of all of its features.

About loopedSlider

Unlike other jQuery sliders out there, loopedSlider can do it all, and at only 10kb, or 6kb minified. LoopedSlider’s main attraction is having a constant stream of content. When you reach the end, the slider doesn’t have to slider all the way back to the beginning, it just places the first item after the last, and continues going. LoopedSlider can also use a variety of ways to navigate through the content. You can have pagination links to each slide, or a previous and next arrow. The pagination can also be added dynamically by jQuery, or hardcoded. If you chose, you can also set the scroll speed, auto start, fade speed and auto height.

The Theme

I created a custom theme based on loopedSlider inspired by the iPhone. This custom theme is easy to use and implement into any version of loopedSlider whether it be the current version, or any future versions Nathan Searles’ may put out. It is a full theme including themed pagination, previous button, and a next button with all of the active, hover and “current slide” effects. The complete package, including the CSS, images, demo and jQuery scripts, are available below.

Further Resources

For more information on loopedSlider and the latest versions, visit its home at GitHub.

Download SourceDemo

In the meantime, there’s no reason we can’t chat it up a bit on twitter! @cameronbaney

This week featuring:

jQuery plugins and libraries, freelance tips, and CSS .

Complete/Non-Queuing Animations with jQuery

Chris Coyier teaches a better way to use jQuery for animations in a Screencast.

Creating rounded corners with CSS2 & CSS3

Get those round corner designs working in both CSS2 and CSS3. This will enable your sites to look good no matter what browser the visitor is using.

jQuery imageless buttons a la Google

jQuery plugin that creates buttons, with different states, without the use of any images. The buttons also adapt to padding and other styling you wish to use.

Top 10 jQuery Snippets (including jquery 1.4)

Ten great jQuery snippets for you to use in your next plugin, including new snippets released with jQuery 1.4.

Helium CSS: JavaScript Library to test your CSS usage

This library will test your site for unused CSS styles. It is a quick way to optimize your CSS.

What to Include In Your Design Contracts

Contracts are very important when it comes to protecting your business. Brian Hoff tells you what you should include in your design contract.

UKI – Simple UI Kit for complex web apps

Uki is a fast and simple JavaScript user interface toolkit for desktop-like web applications.