But if you’re not fond of learning Xcode and programming Objective-C, Photoshop may hold more interest. Below I’ll offer some of the tips I’ve picked up for designing killer iOS app mockups. And since there are always new trends emerging the design community is constantly redefining how to create apps. Think of this as more of a beginner’s resource guide to designing for Apple devices.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Proper Document Settings

Before even considering elements on the page, you should understand how the iPhone graphics are created. In the newer retina display on iPhone 4/4S models the screen is still physically measured in the same size. However the display in pixels is actually doubled from the original – meaning we use 640×960 at 326ppi resolution.

Additionally the iPhone 3/3GS icons were generally 57×57 pixels. iPhone 4 and 4S screens use 114×114 by default (but will scale up for older resolutions). Thankfully the icon design process is fairly detached from creating a UI layout. But as a designer it never hurts to build both skills.

If you’ll be using these settings a lot I recommend saving them as preset document size. In the new document window for Photoshop you’ll see a button labeled “Save Preset…”. Just give it a name and you can select this from the dropdown list every time you create a new doc.

Instead of creating the iPhone UI elements manually a blog Teehan+Lax offers a free UI kit download specifically for Photoshop. This includes an iPhone 4 render, top bars, buttons, keyboards, and tons of other useful stuff. Definitely grab this first and save it to a local directory where you have easy access to these elements.

Customize the Bars & Buttons

Both the top and bottom area of your app will likely contain menu bars. The top is used for labeling the current view, along with back and edit buttons. The bottom is generally navigation and most commonly uses tabs to accomplish this.

Teehan+Lax uses some really generic examples for these. But they are much easier to customize with your own colors, textures, and whatever other eye-candy you’ve got. So as an example let’s take the Group layer Bar (Grey-Blue) and drag it into a new iPhone-sized document window. Then click the small triangle to the left and open open another sub-group labeled Bar Top. At the very bottom is a background layer with an overlay effect for the gradient.

Open FX on this background layer and double-click on gradient overlay. I removed the default colors from Apple and have set (from left to right) #3478a7 to #5eb0e7. Also the two buttons will have to lose their gradients – for these I used the values #052b50 to #044a8e for a rich dark effect.

Fun with Textures

You can tell just by these small gradient changes that customizing your app is a fairly simple task. For just a bit of detail we can add a texture or pattern over the bar gradient area. We’ll go with some slanted stripes for this demo example.

Start by creating a new document 7×7 pixels with a transparent background. Then set your pencil tool at the smallest scale (1px by 1px) and connect from the top-right corner into the bottom left corner. I’ve used black HEX#000000 but it shouldn’t matter since you can always change the color later. Check out the screenshot below if you don’t follow:

Now hit Edit -> Define Pattern… and give it a name, then hit save. Feel free to close the window now (without saving) since all we needed was the pattern. Now back into the bar top group create a new layer above background. CMD+click or CTRL+click on the vector mask which will select all of the background gradient bar.

But make sure you click back onto the new layer just created so it’s highlighted in blue. We’re going to fill it with this new pattern but we only want to see stripes over the top bar gradient (and below the buttons). In the top menu go to Edit -> Fill and select “Pattern” from the dropdown menu. In the box below you should select the last dotted pattern and hit OK.

The lines seem fairly rigid at first. So in the layers pallet drop the fill down to about 20% value. Also we could change the blending mode to Overlay so the bars will flow with the gradient colors. Zoom back out to 100% and check out the awesome effect!

You can build another sweet texture by setting up a 3px by 3px doc and filling in a plus symbol. I added an example above of how this changes the look of our top bar gradient so dramatically. You may also try changing the color from pure black to pure white #FFFFFF.

Tab Bar Icons

The navigation buttons found at the bottom of your app are crucial to the overall user experience. Users need to figure out where to edit settings, how to perform tasks and what to do in your app quickly. Otherwise they often grow frustrated or bored and quit trying. So as one more tip let’s spruce up the nav area in the bottom bar.

Using the same iPhone 4 GUI PSD file locate the “tab bar” group. Remember you can do this by CMD/CTRL+clicking on the block in Photoshop. Similar to the top bar we can edit the background FX gradient for some matching styles. But alternatively the black default gradient does go well with most color schemes.

For some icons I highly recommend The Working Group’s retina set which come in 24px, 48px, and 64px. Each of the icons from the GUI PSD have FX layer styles applied – basically a light drop shadow and an overlay gradient. These small bits of detail really add up to a terrific design, so pay close attention to your pixels. Try using this color scheme designer if you’re having troubles.

You should think about how text labels will affect the user experience. If you feel the tab icons are enough on their own then label text may just get in the way. However it is important to keep your options open and play around with a few different ideas. Try to get the opinions of friends and co-workers to see which method is best for your app.

Another fairly popular technique is for app designers to create a center button splitting the tab bar into 5 slots. I have seen a lot of really creative applications using this design to save space and add some elegance into the navigation. Formspring is one example, I added the screen below.

Helpful Links

• Glyphish Icon Set
• Design an iPhone Bank App in Photoshop[Tutorial]
• Design iPhone Applications in Photoshop[PDF]
• Useful Collection of iPhone/iPad App Developer Tools and Resources
• iOS Usability Tips and Resources for iPhone and iPad Apps
• How To Create Your First iPhone Application

Conclusion

These strategies for working with iOS apps and Adobe Photoshop will come in handy as you further develop your design senses. Mobile applications are a whole different ballgame compared to websites and logos. Keep this in mind throughout the process since you’ll constantly be learning new techniques.

Along with the links added above you should feel much more comfortable moving forward with app interface design. Layout mockups are always difficult and require time to build and study. But if you have enough dedication the mobile market is possibly the most prosperous area to be. If you have additional questions or comments please let us know in the discussion area below.

In this tutorial we’ll be creating a magazine-style drop down nav menu. This will be created with some fancy CSS3 techniques to work in standards-compliant browsers. Even if you are shaky with jQuery you should be able to keep up with this little bit of code, and possibly learn something new. Check out the live demo script in my example.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Try it Out

View Live Demo – Download Source

Structuring our Page HTML

We should start off by constructing the basic page layout. I’ve done this in HTML with an unordered list for menu links. Both the CSS styles and jQuery library are excluded externally which saves a bit of space. Added below is the heading to our HTML code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DesignShack Sexy Magazine-Style Dropdown Menu</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>

The jQuery library v1.6.2 is hosted on Google’s servers for web developers to use. This can often cut off some of the load to your own servers. Differences are especially noticeable if you are processing tens or hundreds of thousands of visitors daily. I’ve also set my doctype to HTML5, not that it should affect our script.

Moving down a bit in the code let’s take a look at the inner body content. Below is a copy/paste of everything inside the body tag. I have removed the final jQuery code since we’ll be looking at that in a later section.

<div id="head">
	<div class="wrap">
		<h1><img src="images/logo.jpg" alt="Blog Magazine Logo" /></h1>
	</div>
</div>
 
<div class="wrap">
	<ul id="nav">
		<li><a href="#">Homepage</a></li>
		<li><a href="#">About the Mag</a>
			<ul>
				<li><a href="#">Company</a></li>
				<li><a href="#">Authors</a></li>
				<li><a href="#">Write for Us?</a></li>
				<li><a href="#">Advertising</a></li>
				<li><a href="#">Get in Touch</a></li>
			</ul>
		</li>
		<li><a href="#">Freebies</a>
			<ul>
				<li><a href="#">PSD</a></li>
				<li><a href="#">AI Vectors</a></li>
				<li><a href="#">Patterns</a></li>
				<li><a href="#">Icons</a></li>
			</ul>			
		</li>
		<li><a href="#">Tutorials</a>
			<ul>
				<li><a href="#">HTML5</a></li>
				<li><a href="#">CSS3</a></li>
				<li><a href="#">jQuery</a></li>
				<li><a href="#">PHP MySQL</a></li>
				<li><a href="#">Ruby on Rails</a></li>
			</ul>
		</li>
		<li><a href="#">Web Tools</a>
			<ul>
				<li><a href="#">Performance</a></li>
				<li><a href="#">Browser Testing</a></li>
				<li><a href="#">CMS Plugins</a></li>
				<li><a href="#">Cheat Sheets</a></li>
			</ul>
		</li>
		<li><a href="#">Originals</a>
			<ul>
				<li><a href="#">Website Design</a></li>
				<li><a href="#">Mobile</a></li>
				<li><a href="#">User Interface</a></li>
				<li><a href="#">Freelancing</a></li>
				<li><a href="#">Inspiration</a></li>
			</ul>
		</li>
	</ul>
</div>

So this should finish up our main HTML structure. All the nested lists are using ul elements which are positioned inside a parent list item. Not too difficult if you have a basic grasp in web design and coding. So let’s move right ahead into the CSS styles.

Designing with CSS

I’ll break down each segment of the small style.css file attached with the demo code. We start with a group block resetting margins/padding for the whole document. A simple man’s page reset, really.

* { margin: 0; padding: 0; }
body {font-family: Arial, Tahoma, sans-serif; font-size: 11px; color: #232323; }
 
/* @group structure */
#head { background: #e1ecf6; height: 100px; padding-top: 15px; border-bottom: 1px solid #d5dce8; }
.wrap { width: 800px; margin: 0 auto; }

The head content will hold a small logo graphic I made in Photoshop. I’ve used .wrap as a class so we can re-use the same styles with our nav menu. This wrapper creates an 800px content div and centers it on the page.

The next group is a bit larger, providing styles for the root nav menu and its list items. Note the #nav selector is on our original unordered list element, so we can use this to select all sub-ul elements later on.

/* @group core nav menu */
#nav { margin: 0; padding: 0; list-style: none; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; border-bottom: 1px solid #d5dce8; border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; height: 50px; padding-left: 15px; padding-right: 15px; background: #edf3f7; }
 
#nav li { float: left; display: block; background: none; position: relative; z-index: 999; margin: 0 1px; }
 
#nav li a { display: block; padding: 0; font-weight: 700; line-height: 50px; text-decoration: none;  color: #818ba3; zoom: 1; border-left: 1px solid transparent; border-right: 1px solid transparent; padding: 0px 12px; }
#nav li a:hover, #nav li a.hov { background-color: #fff; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; color: #576482; }

On the root UL I have added 3 solid borders: left, right, and bottom. The top border spans the entire website and this is added in the header area. I’ve additionally rounded the bottom left and right corners. This technique done in CSS3 using -moz, -webkit, and the standard border-radius properties.

The list items are given a z-index of 999 to appear above all other elements. So in this way we would hover off the original li onto our subnav and lose the popup. Instead the li element expands to take up the full height of our new sliding menu and stay on top as we mouse over links. Also position: relative; is added to properly use absolute positioning on the inner list.

The anchor links aren’t too interesting in themselves. They highlight with a white background on hover with two additional borders to the left and right side. On the final hover selector I added another class .hov to be used by jQuery. This will make it so when you move the mouse cursor over sub-menu links the original nav link stays hovered! Pretty neat.

Sub-Navigation Menu Styles

This last CSS code will style our sub menu links. We use absolute positioning to move around our sub-ul element directly to the top of its container. Also a great drop shadow effect using some new CSS3 properties.

/* @group subnav */
#nav ul { position: absolute; left: 1px; display: none; margin: 0; padding: 0; list-style: none; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2); -o-box-shadow: 0 1px 3px rgba(0,0,0,0.2); box-shadow: 0 1px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2); padding-bottom: 3px; }	
#nav ul li { width: 180px; float: left; border-top: 1px solid #fff; text-align: left; }
#nav ul li:hover { border-left: 0px solid transparent; border-right: 0px solid transparent; }

The individual properties I’ve used and their supporting browsers can get a bit confusing. Below is a small translation guide.

• -moz-box-shadow – Firefox/Mozilla Engine
• -o-box-shadow – Opera
• -webkit-box-shadow – Standard WebKit browsers, Google Chrome or Safari
• box-shadow – Most others including Microsoft Internet Explorer

Each sub-nav list item is set 180px in width. This defines the max size our menu will pop out to be. If you port over the code you should change this to accommodate sizes in your own template.

#nav ul a { display: block; height: 20px; line-height: 20px; padding: 8px 5px; color: #666; border-bottom: 1px solid transparent; text-transform:  uppercase; color: #797979; font-weight: normal; }
#nav ul a:hover { text-decoration: none; border-right-color: transparent; border-left-color: transparent; background: transparent; color: #4e4e4e; }
 
* html #nav ul { margin: 0 0 0 -2px; }

Each sub-menu anchor is set to a height and line-height of 20px. This will keep the menu text centered vertically in each menu block. On hover effect I’ve hidden the borders which are inherited from the parent nav links. All fairly straightforward with CSS styles, and now the final bit of JavaScript to piece it all together.

jQuery Show/Hide Sub Menu

Directly after the final .wrap div our content area ends. So right here I’ve added a new script tag and placed all the jQuery code inside. This makes editing a lot easier, and our code is fairly small anyways.

$(document).ready(function() {	
	$('#nav li').hover(function() {
		$('ul', this).slideDown(200);
		$(this).children('a:first').addClass("hov");
	}, function() {
		$('ul', this).slideUp(100);
		$(this).children('a:first').removeClass("hov");		
	});
});

Start the script by checking if the page document has finished loading. We want to trigger our first function after the user hovers over a list item in the root #nav ul. The first block of function code is made up of two lines.

It targets our inner ul element and adds a slide-down effect to complete in 200 milliseconds. Secondly we need to add the .hov class onto the currently selected anchor link. This keeps the hovered effect in the main link even when moving over sub-navigation links. The second function is our callback parameter for the .hover() method which happens on mouse off.

This is also comprised of 2 simple lines of code. These actually just reverse what we’ve done in the first area. The inner ul is forced to slide up in a quicker animation (100 milliseconds long) and we remove the hover class as well.

View Live Demo – Download Source

Conclusion

I’ve left the menu fairly basic so other designers can tweak the template to fit their own website. It is quite impressive what is possible with just a couple lines in jQuery! If you have implemented anything similar on your own site please let us know. And don’t forget to download and play around with the demo source code.

I have designed the functionality to look and feel like a private messaging solution. This is perfect to implement on a user profile page or author’s page in a blog. We will be using some handy CSS3 techniques along with coding the page structure in HTML5. You don’t need to be a master jQuery artist to understand this tutorial, but it wouldn’t hurt to brush up on the basics. Check out my live demo example and download the project source code below.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Try It Out

View Live Demo – Download Source

The HTML Structure

Before we dive into jQuery let’s examine a bit of the HTML first. If you’re interested in examining the whole document layout I suggest downloading from the source code. But I’d like to focus on the modal box HTML code for further explanation.

I split the template using HTML5 <section> tags. Inside I have a div with the class .containmsg which holds our modal box and button to show/hide the contents. The modal container uses the class .mainCompose. This is also how we target in jQuery – let’s look at the HTML code for this below.

<!-- begin modal msg box -->
<div class="containmsg">
	<p><img src="img/compose.gif" alt="compose" class="compose" /></p>
 
	<div class="mainComposeD">
		<div class="calloutUp">
			<div class="calloutUp2">
			</div>
		</div>	
		<div>
 
		<form name="sendprivatemsg" action="#" method="post">
			<label for="tofield">To</label>
			<ul class="userslist clearfix">
			<li><a href="http://designshack.net/author/jakerocheleau/" target="_blank" class="recipient">Jake Rocheleau</a></li>
			</ul>
 
			<div class="break"></div>
			<label for="mymsg">Message</label>
			<textarea name="mymsg"></textarea>
			<p>**Enter some text!</p>
			<div><a class="sendbtn">Send Message</a><img src="img/ajax-loader.gif" class="loader" /></div>
		</form>
		</div>
	</div>
</div>
<!-- @end modal -->

Inside our form element there aren’t any surprises. A small label and input message field. Also a to: field with a link to the user’s page. In this demo I linked to my DesignShack author page. It’s not required, though. You could even remove the link altogether and still keep the CSS styles in-tact. The users list is coded as a UL element so you could support messaging to more than one person.

Now before we dive into jQuery there’s one more technique I wanted to cover. If you click the compose icon you’ll notice our modal box has a small triangle tip at the very top. You could use images for this technique, but there is a simpler alternative using strictly CSS.

Cool CSS Tooltip Triangles

There is a small div which appears directly above the message form. This contains two classes labeled calloutUp and calloutUp2. The former behaves as a continuation of our outer border (the darker tan) while the latter connects to the center of our form area. Using both we can create matching triangles in a tooltip style connector.

This works because of a setting in CSS that makes all borders come together in center as a triangle. So we can set both of these divs to have no height or width, but massive borders. If we only give color to one of the borders and the rest are transparent we create the triangle effect seen here. Check out the CSS classes for both of the callouts.

.calloutUp { height: 0; width: 0; border-bottom: 12px solid #f0ecd0; border-left: 12px dotted transparent; border-right: 12px dotted transparent; left: 0px; top: 0px; margin-left: 30px; z-index: 10; }
 
.calloutUp2 { position: relative; left: -12px; top: 8px; border-bottom: 12px solid #faf7e3; border-left: 12px dotted transparent; border-right: 12px solid transparent; z-index: 11; }

I’m also setting details for the surrounding borders because this keeps the div block looking square. Otherwise our shape would turn rectangular, and then our triangles would come out lopsided with jagged edges. The z-index property is also important so that our inner tip will stay above the outer tip. The other styles are used to mockup our fonts in the demo example, certainly nothing extraordinary.

Developing Interactions with jQuery

Now we can delve into the good stuff! If you have used jQuery before you’ll likely be familiar with starting off a new document. First include the latest version of jQuery into your page. If you don’t wish to download and host the file yourself Google offers all versions of jQuery live for developers. The latest I’m using is library 1.6.2 mini.

Once that’s included you should open another script tag for JavaScripting. I decided to write my code within the head block of the same HTML page. But you could alternatively move this to the body, footer, or even into an external file. The first snippets of code I’ve added below.

$(document).ready(function() {
    $(".mainCompose").hide();
    $('.loader').hide();
    $('#errortxt').hide();
 
 
    $('.compose').click(function() {
    	$('.mainCompose').slideToggle();
    });
});

We call our $(document).ready() function to hold off on any actions until the page is finished loading. The first task is to hide 3 page elements right away. These are .mainCompose to hide our modal box, .loader to hide the ajax loading gif, and #errortxt which only displays if the user hasn’t entered anything and tries to submit the form. Each of these elements will only be displayed under certain conditions so it’s best to keep them hidden immediately.

And finally our first scripting action is checking for a click event handler. The .compose class is actually tied to our compose image even though there is no anchor link to be clicked. jQuery can handle the click events and call slideToggle() either way. Now the last bit of code to examine is how we can pull data out from user input.

Processing the Modal Form

We are only checking for one more final event handler. This is tied to the click event of our .sendbtn, which is actually tied to an anchor link in our modal box. Directly next to this is our animated ajax .gif image which was hidden right after the page loaded.

$('.sendbtn').click(function(e) {
	e.preventDefault();
	$('.sendbtn').hide();
	$('.loader').show();
 
	if($('#mymsg').val() == "") {
		$('#errortxt').show();
		$('.sendbtn').show();
		$('.loader').hide();
	}
	else {
		$('sendbtn').hide();
		$('.loader').show();
		$('#errortxt').hide();
 
		var formQueryString = $('#sendprivatemsg').serialize(); // form data for ajax input
		finalSend();    		
	}

The execution function right after our button is click now has a parameter. function(e) just passes the instance of our click event right into the function as a variable. We use this event selector to call the preventDefault() method so that our link doesn’t behave as a link. We also immediately hide the .sendbtn and replace it with our .loader image.

Next we pass into a standard if/else clause checking the #mymsg textarea value. If this contains no text then we know the user hasn’t entered anything. In this case we display our error message and re-hide the loading image while displaying our button again. Otherwise we enter the else{ } clause which assumes we can send the message!

I haven’t written any Ajax/PHP code since it jumps out of range of this tutorial. But you should check out the jQuery ajax() function which can speed up backend development tenfold. I have set aside a variable formQueryString which can be used to pass the form data into an Ajax call. Instead I’ll be just finishing up the aesthetics in a small function finalSend();

	// possibly include Ajax calls here to external PHP
	function finalSend() {
		$('.mainCompose').delay(1000).slideToggle('slow', function() {
			$('#composeicon').addClass('sent').removeClass('compose').hide();
 
			// hide original link and display confirmation icon
			$('#composebtn').append('<img src="img/check-sent.png" />');
		});
	}
});

What we want to do now is close our modal box and display a small check icon to let the user know everything is fine and dandy. I’ve used .delay() to keep the modal box open for 1 second before calling our final slideToggle() method. This was added solely for appearances in this tutorial so you can see how it looks waiting for the server to load. If you want to keep your users waiting an extra second you could leave this – but it serves little point otherwise!

After the slide animation I’ve added a callback function. It only includes 2 lines of basic code. First we target the compose icon and change its class from .compose to .sent, then hide it from view. Finally we target #composebtn which is the container div of our icon and append a new check mark icon. Now our users know the message was sent and we’ve barely used any screen real estate!

View Live Demo – Download Source

Conclusion

This tutorial should have gotten you a bit more comfortable building a scalable modal box in jQuery. We have built some great CSS styles and used some basic form processing to enhance the user interaction. There is certainly a lot you could add on but our example lays the ground structure and paves the road for higher possibilities.

If you’re still looking to check out my demo or download the source code you can do so below. Reading code can be confusing after long periods of time, so I recommend downloading the source directly to get a better idea of how this small app functions. Similarly if you have any questions or ideas you can offer them in the discussion area.

Below I’ll be going over how to build a small Apple-styled input form with some basic structure and scripting. All code included is based off XHTML Transitional Doctype along with newer CSS2/CSS3 techniques. We’ll also be using the jQuery 1.4.1 library to support our display label functions.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Try It Out

Here’s a sneak peak of what we’ll be building. Check out the demo page to see it live and download the example for a closer look.

Live Demo – Download

Building our HTML and CSS

Before we can start developing it’s important to get frontend code structure in order. Luckily this process is very simple and shouldn’t take long at all to complete. Below I’ve included a stripped copy of the HTML code from our example “index.html” document. This should all be standard code to display a very basic input form, nothing further than any basic HTML developer’s knowledge.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Apple-style Input Field</title>
</head>
 
<body>
 
<div id="c">
	<form id="basicform" action="#" method="post">
	<input type="text" name="username" id="unameblock" title="Enter your username" class="u1" />
    <input type="password" name="password" id="pwblock" title="Enter your password" class="u1" />
    <br /></br />
 
	<input type="submit" id="submitbtn" value="Submit Button!" />
    </form>
</div>
 
</body>
</html>

Here I’ve set up 2 very important input elements under the IDs “unameblock” and “pwblock”. These stand for username block and password block, respectively, and will be very important later in our script. Now that our code is looking good it would be wise to jump into CSS styles.

These are the real bare-bones structure rules since CSS is what gives all HTML elements their form. There aren’t many changes we will be including. Some basic resets for global variables along with alignment and positioning for input fields. Below are clips from the source code, explained in bit intervals.

* { margin: 0; padding: 0; }
body { font-family: Arial, Helvetica, sans-serif; padding-top: 150px; background: #dbe9f7; }
 
#c { width: 850px; margin: 0 auto; }

Here we have our global reset with the asterisk (*) selector removing all browser-standard margins and padding. We also give some styles to the body element for positioning our form front and center. The #c division is our container div which has been centered for the sake of our demo.

input.u1 {
	padding: 6px 12px;
	font-size: 1.6em;
	color: #787878;
	letter-spacing: -0.02em;
	text-shadow: 0px 1px 0px #fff;
	outline: none;
	background: -webkit-gradient(linear, left top, left bottom, from(#e0e0e0), to(#ffffff));
	background: -moz-linear-gradient(top,  #e0e0e0,  #ffffff);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border: 1px solid #717171;
	margin-right: 20px;
	-webkit-box-shadow: 1px 1px 0px #efefef;
	-moz-box-shadow: 1px 1px 0px #efefef;
	box-shadow:  1px 1px 0px #efefef;
}
input#submitbtn { font-size: 1.3em; padding: 4px 9px; font-family: Arial, Helvetica, sans-serif; letter-spacing: -0.05em; color: #444; }
input.fail { -webkit-box-shadow: 0px 0px 5px #ff4848; -moz-box-shadow: 0px 0px 5px #ff4848; box-shadow: 0px 0px 5px #ff4848; }
input:focus { -webkit-box-shadow: 0px 0px 5px #007eff; -moz-box-shadow: 0px 0px 5px #007eff; box-shadow: 0px 0px 5px #007eff; }

The first noticeable block is used to style our input fields. It targets all input elements with a class of “u1″ which both our username and password fields run. Instead of placing 10-20 style declarations on a single line it’s much easier for editing to keep this in block-level.

In here we have the styles to configure how our input fields will look. Padding, font-size, among many borders and text manipulation properties as well. We’re using many new CSS3 techniques here which should be apparent to all CSS developers.

New CSS3 Entities

Two brand new CSS3 functions we’re using are -webkit-gradient and -moz-linear-gradient which can generate gradients on-the-fly. This is an amazing feature which hasn’t been discussed in many CSS3 articles. This removes the need for any images in creating standards-compliant background gradients.

We also have -webkit-box-shadow and -moz-box-shadow. Similar naming schemes help with confusing between Webkit browsers and Mozilla-based Gecko browsers.

Further down we have 3 more styles which attack our submit button along with states for our input forms. The :focus pseudo-targeting means CSS will only apply our styles when the user is focused on either input field. These styles will display a blue glow for focus and red glow for errors (very useful when debugging user logins and registration forms).

So far this all looks great! In fact all we need to do is include a few scripts/styles in our header section to really get started on our dynamic effects. If you take the current document and include our stylesheet we can get the hover effects immediately.

Working with jQuery Effects

jQuery is an amazing JavaScript library which has proven useful time and again. Your average web developer is heavily focused on speed and precision of scripting. This is something jQuery takes in and internalizes with their ideas.

Below is a small section which needs to be added between the head tags of your document. I’ll explain a few of these below and also get into some of the behind-the-scenes code.

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/tip-yellowsimple.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="src/jquery.poshytip.js"></script>

Our style.css is the file which includes all of our CSS rules listed above. Another inclusion is tip-yellowsimple.css which hasn’t been mentioned yet. It’s a script written through jQuery as a plug-in for tooltip hovers. With this stylesheet (download with demo source) we are able to style tooltips on any action.

Our two JavaScript files are really basic and self-explanatory. We’re accessing jQuery 1.4.1 min so as to cut down on processing and download speeds. We’re also reading through Google’s APIs code database which stores all previous and active versions of popular scripts. This is a tremendous effort and helps development projects surge forward without the need to constantly download the jQuery library manually.

The second file we have “jquery.poshytip.js” contains our plug-in code. Poshytip is a jQuery class written by Vasil Dinkov to support dynamic tooltips. The code is vast and unnecessary to learn in-detail. However if you’re a jQuery geek feel free to check out his manual efforts to see how these methods are called and what variables you could edit.

Basic Action Call

All we need now is our infamous call to action! This is our main function which will load on document load and prepare to launch upon whatever signal we call. In this case we’re looking for an event which happens when a user focuses on one of the input fields.

One last step is to add this code into the head beneath all our file includes. This is straight JavaScript code so it should be encapsulated with a script tag. For easing I’ve removed the tags in the code below so we can focus on just the js functionality.

$(function(){
	$('#unameblock').poshytip({
		className: 'tip-yellowsimple',
		showOn: 'focus',
		alignTo: 'target',
		alignX: 'inner-left',
		alignY: 'top',
		offsetX: 10
	});
 
	$('#pwblock').poshytip({
		className: 'tip-yellowsimple',
		showOn: 'focus',
		alignTo: 'target',
		alignX: 'inner-left',
		alignY: 'top',
		offsetX: 10
	});
});

So what we’re doing is calling a generic function() {} to check on some events. We are creating 2 new instances of the poshytip() method based off our input forms. This can be seen when we parse the DOM for the element IDs “unameblock” and “pwblock”.

Each of the individual settings in place expands on the functionality of poshytip. If you’d like to view documentation for all methods there is a great collection which Vasil has put online. Namely showOn is our most important variable which tells the parsing engine to check for any focus activity in these two elements.

AlignX and AlignY are important in regards to placement. These hold the values for where our tooltip will show up in page. This can be bottom, center, top, along with offset placements such as inner-left and inner-right. Try messing with these if you’d rather have the tooltips pop up on the side or bottom instead of the top.

What you may not have noticed by now is where our text is loaded from. Poshytips makes it simple here, too, where the value of our title attribute is displayed in tooltip text. This makes targeting specific elements extremely simple and very productive!

Conclusion

These are some of the most basic steps towards building an Apple-style input field. There are many other unique effects which can be applied using jQuery that range out of the scope on this tutorial. Check out some demos from Apple’s website for more inspiration. Also if you’d like to download the entire demo package you can do so here.

Not only is the software very powerful but the underlying classes and functions give developers an all-access pass. It is extremely simple to develop apps and modules within WordPress. Today we’ll be looking into author meta data functions for building an “About the Author” box.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Towards the end of single post pages you may frequently see a box explaining a bit about the writer. This will generally include their Gravatar or some sort of photo, a description about them, and possibly links to their profiles or personal website.

If things seems difficult check out some of WordPress’ documentation on template tags. These include much of what can be covered in this project and a whole lot more. The WP community also runs a very pleasant forum for in-depth system questions.

The WordPress Architecture

There is something referenced throughout WordPress code titled The Loop. This is a section where meta functions can be called based on a single article to pull down specific information from the database. As per our example we can call functions to pull out author data from any single post within The Loop.

Most notably this should be done within your template folder. For the lazy, it may be easier to edit individual files by adding code you’ll need. For example, the WP theme single.php file generally contains all code to parse on an individual posts’ page. You may find it easier to pull data while inside The Loop and add HTML code here.

Alternatively, a safer method would be to add a new file to your theme directory and include it whenever you’d want your author box to appear. This allows for greater control regarding variable terms and template files. This also saves you time and energy so as to not go back and re-invent the wheel.

WP Template Code

There aren’t many functions we’ll be using, though many could be new to WP amateurs. Below are just a few examples which you should familiarize yourself with. Much of what we’ll be covering works within the WordPress library with just a few key ideas – nothing that can’t be learned with a few hours of study.

<?php echo the_author(); ?>

The author function pulls data from within the loop to display the author’s name. This can be changed in the WordPress backend on anybody’s profile settings page. You are able to set this value to First/Last name, username, or even a custom set.

To make this process simpler, WordPress has released an entire function library for the_author_meta(). This replacement takes in arguments which can pull any author data from the database on request. You can check out the page documentation if you’d like to research more into the subject.

What’s fascinating about this function is how much information can actually be obtained. By default the function accepts two arguments: the type of data you need and the user ID to pull. The ID is an optional parameter which is only required in cases outside of The Loop. Possible values to pull include user_login, user_email, user_url, nickname, description (bio), jabber/aim/yim, and so much more!

What many don’t consider here is just how much potential information can be shared. WordPress allows for administrators to edit author profile pages to add in custom avatars, bios, and even home page links. These can then be pulled from the database and used as marketing information for each author.

With just these functions alone we are able to display all of the set data we will need. The only thing left to do is add our sample HTML and CSS code and publish the file!

Cordial Author Box Styles

CSS is an important language in our project scope, being a web application. We need to define specific sets of styles and display cases to incorporate for all major browsers, monitor resolutions, and other hidden variables. As web developers it is our job to study and work over these climates.

.aboutauthor { overflow: hidden; background: #f4f4f4; border: 1px solid #999; padding: 5px; margin-bottom: 10px; }
.aboutauthor img { background: 0px; border: 0px; padding: 0px; }
#aboutauthorimg { float: left; padding: 5px 0 5px 10px; }
.aboutauthor .span-desc { overflow: hidden; margin: 0px; width: 500px; float: left; }
.aboutauthor .span-2 {display: block; float: left; margin: 0px 10px 0 0; padding: 10px 0 0 10px; }

The simple class .aboutauthor should be applied to your covering box. We have added a light background color with a solid border and extra padding. Our img tag is also displayed floating left with extra padding. This will keep our author’s avatar in line with box content.

Further, we have two classes which demonstrate how we need our inner data to perform. .span-2 is a class held inside where our main content will be found. Inside here we have removed all extra margins/padding to keep spacing neutral, along with rearranging the box model for left alignment. This code would do best inside your template’s style.css file, though it could be added inline with your block element.

The HTML code is very short and similar as seen below. Here we have added a few extra functions which can be explained very quickly.

<div class="aboutauthor">
<div id="aboutauthorimg" class="span-2"></div>
 
<div class="span-desc">About Author: <strong><?php the_author(); ></strong>  (; Articles)
<strong><?php the_author_meta('display_name'); ></strong>
</div>

We are calling a function get_avatar() which takes a set of parameters. The two we have passed above are the current author’s e-mail address which is the unique identifier for a database query. This could be equivalent to a user’s ID, too. We also pass in 64 as a string value – this represents the size of the image we want returned squared off in width and height.

the_author_posts() is another fairly straightforward function which pulls the total number of articles a writer has published. This is more of an added feature as I don’t see many blogs running this info. Commonly, though, this is useful from a users’ perspective since it gives more information about the current author and deeper insight into their interaction with the blog itself.

These are just some of the basics techniques for building a simple WordPress author block. From here it’s very simple to save a new file, let’s say author-box.php into your themes folder and upload into your root directory. From there a simple PHP include can add all of your code right into any source automatically.

<?php include(get_bloginfo("template_url").'/author-box.php'); ?>

If this is still a bit fuzzy, check out the example code above. This would be the most direct way to include your file and sustain security in your actions. Here we are calling the get_bloginfo() function to pull our entire template directory structure out first, followed by our single data file. Be sure to rename this file to whatever will suit your theme best and don’t get confused between function calls!

Conclusion

Hopefully this tutorial has given you a starting point for reference in WordPress development. Blogs are all too common in today’s web, but adding an author box gives your online articles some flare. They also give incentive for authors to post more frequently and build up a small portfolio of their writing. Many of the most popular magazines online now feature detailed information and profile links from their article writers.

If you’d like to experiment with these features without messing around in PHP or HTML/CSS, there are a few alternatives. The WordPress plugins system is one such scenario which works perfectly. I recommend the Cool Author Box plugin which will automatically add author info and supports gravatar icons. Do you have any suggestions or tips for building unique author boxes in WordPress? Share your ideas in the discussion below.

Today we’re going to build a simple web page with an amazing and free tool: Cu3er.

Cu3er is a really neat 3D image slider with crazy visual transitions and lots of customization options. Though it’s built with Flash and JavaScript, you don’t really need to know either of these to use it.

In this article, we’ll get the page built and the slideshow up and running. Next time we’ll return and see how to customize some of Cu3er’s many features and variables.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

What We’re Building

To see how easy it is to incorporate Cu3er into a design, we’ll build a simple web page that contains a header, footer, paragraph copy, and a navigation area.

Before we get started, you might want to check out the demo and download the source files.

Note: In my own testing, cu3er works great in Safari and Firefox but has some troubles in IE (surprise). Due to this as well as the little bit of CSS3 we’ll be using, be sure to view the demo in Firefox or Safari.

To keep things interesting, we’ll also be using a little CSS3 and learning how to setup a “sticky footer” that stays anchored to the bottom of the page. Let’s get started!

Step 1: Grab Cu3er

The first thing you’ll want to do is stop by the Cu3er website and hit the download button. When you open up the .zip you should see the following files:

The first thing you’ll want to do is to copy this entire folder and put it in a safe place so you’ll always be able to revert back to the original versions of any or all of the files.

Once you’ve done that, open up demo.htm in your favorite IDE or text editor.

Step 2: Customize the Demo Page

When you open up the demo page, you’ll see that it’s pretty straightforward and already contains a centered div with a working version of cu3er. I told you this would be easy!

We need only to add content and restyle this page and we’ll be all finished. To begin this process, replace the Step 1, Step 2, etc. comments in the head portion of the document and add something more descriptive. Also delete any inline styling and insert a link to an external stylesheet. You should have something like the following.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CU3ER - demo!</title>
 
<!--  Path to SWFObject JavaScript -->
<script type="text/javascript" src="js/swfobject/swfobject.js"></script>
 
<!--  Configure SWFObject JavaScript and embed CU3ER slider -->
<script type="text/javascript">
		var flashvars = {};
		flashvars.xml = "config.xml";
		flashvars.font = "font.swf";
		var attributes = {};
		attributes.wmode = "transparent";
		attributes.id = "slider";
		swfobject.embedSWF("cu3er.swf", "cu3er-container", "600", "300", "9",
		"expressInstall.swf", flashvars, attributes);
</script>
 
<!--  Path to CSS -->
<link rel="stylesheet" href="style.css" type="text/css"
 
</head>

Next, go into the body of the HTML and throw the cu3er-container into a “slideshow” div.

<body>
 
	<!--  Cu3er -->
	<div id="slideshow">
		<div id="cu3er-container">
			<a href="http://www.adobe.com/go/getflashplayer">
			<img src="http://www.adobe.com/images/shared/download_buttons/
			get_flash_player.gif" alt="Get Adobe Flash player" />
			</a>
		</div>
	</div>
 
 
</body>
</html>

Customizing the Pictures

Before we go any further, you might want to customize the slides in the “images” folder. To do this, simply open up the jpgs, drop in your own artwork and save over the files.

You can use whatever you like, but in case you’re curious, I just stopped by Flickr and grabbed five photos:

• Misty Lepelenburg, Utrecht – black & white
• Esso Black & White
• Pencil Crayons Black & White
• Rainy Day Black & White
• Hamburg Fair 1 black & white

Step 3: Add a Header

Next we’re going to throw everything into a single page wrapper and add a header. The wrapper will serve as a way to center everything on the page and easily define a width for the content. The header will simply be a little text with a CSS background.

<!--  Begin Page Wrap -->
	<div id="page_wrap">
 
		<!--  Header -->
		<div id="header">
			<p>Design Shack</p>
		</div>
 
		<!--  Cu3er -->
		<div id="slideshow">
			<div id="cu3er-container">
				<a href="http://www.adobe.com/go/getflashplayer">
				<img src="http://www.adobe.com/images/shared/download_buttons/
				get_flash_player.gif" alt="Get Adobe Flash player" />
				</a>
			</div>
		</div>
 
	</div>

The Header Graphic

The header will be fairly basic and could easily be done with CSS, but to keep things simple we’ll use a repeating background image. In Photoshop, make an image with a thick horizontal black bar and a thin red bar (#5c0000) like the one below.

My final file was 15px wide by 55px high. Yours can be as wide as you want but if you’re following along make sure you get the height right so everything will line up.

Step 4: Start Some CSS

Create a style.css file and add in the following CSS.

 
/* Reset */
 
* {
	margin: 0px;
	padding: 0px;
}
 
/* Float Clear */
 
.clearDiv {
	clear: both;
}
 
/* Body Styles */
 
html, body { 
	background: #4a4a4a url(images/header_repeat.jpg) repeat-x;
	text-align:center;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial,
	"Lucida Grande", sans-serif;
	font-weight: 300;
	height: 100%
}

Let’s go over these chunks of code one at a time. First off, I added a simple margin and padding reset just make sure various browser defaults don’t screw up our layout. Next is a trick I learned from Chris Coyier at CSS-Tricks for clearing floats (so yell at him if you don’t think it’s semantic). We’ll be floating a few things in this design and now that we’ve setup this CSS we can just throw in a .clearDiv class to make sure the content following that section will be reset back to where we want it.

Next, I’ve assigned a few text styles such as font-family and font-weight. I’ve also set the background to a dark gray and inserted out header graphic. Make sure you set the header slice to repeat so you get a bar that stretches all across the page. Finally, I’ve set the height at 100% and made sure these styles applied to both the html and body portions. This has to do with the sticky footer trick we’ll be setting up later. For now just make sure these styles are present.

Your file should be coming along nicely now and look roughly like the image below.

Step 5: Style the Page Wrap and Header

Next up, add the following text to your CSS:

 
#page_wrap {
	width: 850px;
	margin: 0 auto;
}
 
/* Header Styles */
 
#header {
	color: #fff;
	float: left;
	margin-top: 10px;
	font-family: "Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif;
	font-size: 25px;
}

Here we’ve set our page wrap to 850px (a little unorthodox, but it just seemed right) and our margin to auto. This centers all of our content nicely within the browser window.

Next I’ve set the text to white, floated it left, set it apart from the top and assigned a font family and size. This should position the “Design Shack” text nicely in your preview.

Step 6: Position the Slideshow

Before we add the navigation into the header, we need to get the slideshow out of our way. To do this, first place the clearDiv class we talked about earlier after the header and before the slideshow in your HTML.

 
<!--  Header -->
		<div id="header">
			<p>Design Shack</p>
		</div>
 
		<div class="clearDiv"></div>
 
		<!--  Cu3er -->
		<div id="slideshow">

Now that we’ve cleared the float from the header, we can go into our CSS and add some styles for the slideshow.

 
/* Slideshow Styles */
 
#cu3er-container {
	width:600px;	
}
 
#slideshow {
	background: url(images/cube_shadow2.jpg) no-repeat;
	background-position: top center;
	height: 350px;
	margin-top: 70px;
 
}

Here we’ve added most of the styling to the wrapper around the slideshow. This is so we can keep the cu3er-container div at 600px (the width of the slideshow) while having a shadow graphic that extends beyond this boundary.

You can either make your own shadow in Photoshop or just grab mine from the source files.

Now your slideshow should be positioned perfectly on top of a nice shadow graphic to give it a sort of floating illusion.

Step 6: Add the Navigation

Now that the slideshow is out of our way, we can add in the navigation area. We’ll keep this pretty basic and just use an unordered list of links. Like the header, the navigation will use a float so place the navigation HTML after the header and before the clearDiv.

 
<!--  Header -->
	<!--  Begin Page Wrap -->
	<div id="page_wrap">
 
		<!--  Header -->
		<div id="header">
			<p>Design Shack</p>
		</div>
 
		<!--  Navigation -->
		<div id="nav">
			<ul>
			<li><a href="http://designshack.net/">Home</a></li>
			<li><a href="http://designshack.net/articles">Articles</a></li>
			<li><a href="http://designshack.net/gallery/">Gallery</a></li>
			<li><a href="http://twitter.com/designshack">Twitter</a></li>
			</ul>
		</div>
 
		<div class="clearDiv"></div>

Now we’ll need a large chunk of CSS to style everything involved with the navigation. We need to cover the navigation div as a whole, the unordered list, list items, list item links, and list item link hover effects.

 
#nav {
	float: right;
	color: #fff;
	text-transform: uppercase;
	font-size: 12px;
	margin-top: 15px;
}
 
#nav ul {
	list-style: none;
}
 
#nav ul li {
	float: right;
	padding-left: 20px;
}
 
#nav ul li a{
	color: #fff;
	text-decoration: none;
}
 
#nav ul li a:hover{
	color: #fff;
	text-decoration: underline;
}

Everything here is pretty straightforward. The navigation is floated right (this sets it to the right side of the page and puts the elements in a line), set to white, positioned into place and transformed to uppercase. We’ve set the list-style to none to ditch the bullet points and eliminated any link text decoration except on hover, where we applied an underline.

And with that our navigation is finished. Now all that’s left is some superfluous text and the footer and we’ll be all finished!

Step 7: Add the Text Below the Slideshow

Just to round off the design a little, we’ll add a heading and paragraph under the slideshow. Just a few lines of html is all we’ll need:

 
<!--  Text Under The Slideshow -->
	<div id="tagline">
		<h1>Cu3er Slideshow</h1>
		<p>A Design Shack Tutorial</p>
	</div>

Then we’ll style both the h1 and the paragraph tags individually. Notice I used the letterpress technique we learned in the Google Fonts article. This uses a CSS3 text-shadow that’s lighter in color than the background to give the illusion of inset text.

 
/* Tagline Styles */
 
#tagline h1{
	font-family: "Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif;
	font-size: 70px;
	font-weight: bold;
	color: #272727;
	text-shadow: 0px 2px 3px #555;
}
 
#tagline p{
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
	    Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 20px;
	font-weight: 300;
	color: #272727;
	text-shadow: 0px 2px 3px #555;
}

That brings us to the end of most of our design. You can even stop there if you wish but I’m going to press on and show you a neat sticky footer trick I learned this week.

The image we use below for the footer is the exact same as the header image, only rotated 108 degrees so the red is on top and the black is on the bottom.

Final Step: Add the Footer

If you’re wondering what a sticky footer is, it’s simply a footer that adheres to the bottom of the page as you resize the window. This can be tricky to implement but Ryan Fait has created a pretty ingenious method of accomplishing it with very little code; see that method here.

The basic idea is that you can use negative margins and a “push” to keep the footer at the bottom of the page. The first thing we need to do is insert the push and footer divs into our html. Place the push div inside of the page wrap and the footer div outside of the page wrap (so it will extend to the edges.)

 
		<!--  Text Under The Slideshow -->
		<div id="tagline">
			<h1>Cu3er Slideshow</h1>
			<p>A Design Shack Tutorial</p>
		</div>
 
		<!--  For the Sticky Footer -->
			<div class="push"></div>
 
	</div>
	<!--  End Page Wrap -->
 
 
	<div id="footer">
	</div>

Now go into your CSS and insert the following code:

 
/* Footer Styles */
 
.push {
	height: 55px; /* .push must be the same height as .footer */
}
 
#footer {
	height: 55px; 
	background: #4a4a4a url(images/footer_repeat.jpg) repeat-x;
}

Notice that the height of the push has been set to the exact height of the footer. This is very important and the trick will not work without it. I’ve also placed in the background image that I mentioned above (just rotate the header image).

Finally, we’ll add one more snippet of CSS into our page wrap:

 
#page_wrap {
	width: 850px;
	margin: 0 auto;
 
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -55px; /* the bottom margin is the negative value of the footer's height */
}

The height and min-height have both been set to 100% and the bottom margin has been set to the negative value of the footer height (55px). This creates the effect of keeping the footer at the bottom of the page. The height: auto !important; bit is an IE hack to get around min-height issues with that browser.

Final Result

Our page is complete! If you’ve done everything right your page should look like the one below. You might notice that my version auto-starts when the page loads, don’t worry if yours doesn’t, we’ll deal with this in the next article.

Now you have an awesome page with a mind-blowing 3D flash image slider to begin building a portfolio site.

Conclusion

Notice that virtually all the work involved was setting up the website. Cu3er was actually running just fine in the very first step! Check back soon for part two where we’ll learn to tweak some of the basic features, add text and links and more.

Getting Started with Ruby on Rails

Creating More Using Less Effort with Ruby on Rails

They look like an easy way to get started, aiming to to demystify Ruby on Rails and convince you that you can make the leap.

1. CSS Fancy Menu

This article gos through the creation of a custom navigation bar with some cute Javascript effects that will certainly impress your friends. Thanks to the great Mootools library, this beauty is contained in 1.5kb. Not only that, but it’s also cross browser (tested on Internet Explorer 6/7, Firefox and Safari) and accessible!

2. cssMenus

This navigation menu works both vertically and horizontally, being fully compatible with all browsers.

3. Advanced CSS Menu

This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level – code an advanced (un-typical) list menu utilizing the CSS position property.

4. Taming CSS Lists

In this article, I’ll demonstrate how to use CSS to bring unwieldy lists under control. It’s time for you to tell lists how to behave, instead of letting them run wild on your web page. Specific attention is paid to using a list as a vertical CSS menu.

5. Mini Tabs

I came up with these little “mini tabs” for navigation while working on a few projects. They’ll probably appear in the real world eventually. They are generated with pure CSS of course, and require no images.

6. Inverted Sliding Doors Tabs

This is an explanation of how I adapted Doug Bowman’s Sliding Doors technique to work with inverted tabs for a recent redesign of netrelations.se.

7. A collection of free CSS menus

8. A simple gradient CSS menu

9. A walk-through of different CSS navigation techniques

10. Mini sliding navigation

CSSEdit is, as the name implies, a CSS editor for the Mac. It has come on leaps and bounds in the latest version and is now one of the best apps available on the Mac for designers. CSSEdit is created by the great delopers over at MacRabbit, who are also responsible for DeskShade.

One of the strongest features of CSSEdit is the simple, easy to navigate and beautiful interface. Even people who have no experience in styling web pages can find their way around this amazing app and create some stunning web pages. In this tutorial we’re going to be looking at the interface and how to get the most out of it.

The Main Window

The main window has three main sections, the first section (on the left) is the styles section. Here you can see all the styles you have applied to your site. The middle section is the actual editor of the app, here you do all the coding of your css file all with the ever-helpful code completion feature. The right hand section is a way of styling your page without coding anything whatsoever. You can type in or select with drop down boxes how you wish to style a certain element and the code is inserted for you. This is a great feature for anyone new to CSS or anyone who isn’t sure how to code a certain technique.

The Toolbar

The toolbar of CSSEdit has some of the best features in the app and is therefore used quite a bit, especially in more advanced use, we’ll go through each toolbar icon one-by-one and I’ll explain what each one does.

Along the left hand side of the toolbar there are 5 tools, the first is the new style feature, this allows you to add a new style to your stylesheet quite easily. The second allows you to group certain styles together into a folder to make them easier to navigate through. The third is a simple of way of adding a comment into your stylesheet without having to code it in by hand. The fourth is a more advanced way of styling elements, it allows you to style a certain element wherever it appears in your stylesheet. With these four features there is no coding needed, CSSEdit does it all for you. The fifth feature is a simple search function, useful if you have a very large stylesheet.

The right hand side of the toolbar contains some of the more advanced features of CSSEdit. The first allows you to insert a link to the stylesheet into a HTML file, this assigns the HTML file the CSS file to style it. The second is a way of previewing your web page without having to open an external web browser. The third is called Milestones, it is a way of saving your current progress in the stylesheet, allowing you to revert if a mistake is made. The fourth is a way of validating your CSS and the final icon allows you to change which three columns of the main interface you can see, meaning that if you can’t code you can just edit your CSS with no coding needed.

If you don’t have this app, as a web developer I seriously suggest reading more at MacRabbit. It really is the ultimate in stylesheet creation.

1. A CSS Styled Table

Further to my article about the creation of a CSS calendar the thought crossed my mind to show you an example on how you can style a table using CSS. The data of tables can be boring so all the more reason that we need to attract attention to it and make it as pleasant to read as possible. Presentation and design with some basic accessibility rules in mind is the way to go.

2. A CSS Styled Table Part 2

This article is about the proper usage of tables, for tabular data. How you can implement them with accessibility in mind and how to make them appealing for the eye using CSS.

3. Creating a Dynamic CSS & AJAX Table

I like Crazy Egg’s pricing table on their Pricing & Signup page. When you click on “Sign Up” for an option, that plan’s column highlights, the other plans vanish, and a signup form takes their place. There is a number of impressive things happening within this small area. I wanted to try and recreate the behavior step by step, and share the power of combining CSS, JavaScript, and images in clever ways.

4. Tables With Style

It might not seem like it but styling tabular data can be a lot of fun. From a semantic point of view, there are plenty of elements to tie some style into. You have cells, rows, row groups and, of course, the table element itself. Adding CSS to a paragraph just isn’t as exciting.

5. Redesigning a Simple Table

A series of excellent examples, showcasing how to simplify a basic data table by eliminating unnecessary interface elements.

6. CSS Table Gallery

The CSS Table Gallery is a showcase of how CSS and data tables can work together to create usable and pretty results. It’s a great way to see a bunch of interesting examples.

7. Various Table Techniques

Tables styled with CSS rules are much more efficient, if done well, than the old method of using font tags, a lot of color tags, and more… These examples are forward thinking, and also degrade well to older browsers.

8. Firefox Theme Table Example

I banned the use of tables in my works when I first switched to CSS based layouts. But I was still missing the point of tables, tables are a way to markup tabular data. Once I got that point in my head, I started to think of things that really were tabular data such as the next example of Mozilla Firebird themes. Each row is a record of a theme and the columns are the fields for each theme.

9. The Table Ruler

With a bit of JavaScript / DOM sorcery, we can provide our visitors with the same functionality for long data tables in HTML, by applying rollover states to the rows. This could be implemented tediously by hand, of course, but it would be silly to do so. Instead, we will use the DOM to find the rows to highlight on mouseover.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.