The goal of this post is to harness some new functionality provided by CSS3 and move away from images. We are going to create a CSS3 login form without images yet still have a visually pleasing result.

DEMO

Writing the HTML

First lets begin with creating the HTML markup that makes up the login form. Start with the basic HTML page as I will not include that portion in the code.

<form>
		<label>Username:</label>
			<input type="text" name="username" />
		<label>Password:</label>
			<input type="password" name="password"  />
			<input type="submit" value="Submit" name="submit" class="submit" />
</form>

This is the basic markup with a few labels and Input elements. Now there are many different ways to markup the HTML you see above, but I tried to make it as simple as possible. Make sure you add the Class SUBMIT to your button because it will require different styling.

HTML Only Demo

As you can see above we really need the power of CSS in order to give this login form some visual appeal. Enter CSS3!

Writing the CSS

It is now time to give this login form some life. CSS3 has some really powerful new features and we will be covering only a few of them. First lets get some of the basic layout styles down nothing having to do with CSS3

Styling the Form Element

We will begin writing our CSS targeting the form element as some of the other elements on the page will rely on the parent element. I’m going to go through the properties in logical order not in alphabetical order. We want to set the width to 250px with 20px of padding on all sides and a 1px border also.

form {
    width: 250px;
    padding: 20px;
    border: 1px solid #270644;
}

Adding CSS3 to the Form Element

Now lets add in the CSS3 magic to bring this form to life.

form {
    width: 250px;
    padding: 20px;
    border: 1px solid #270644;

    /*** Adding in CSS3 ***/

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

    /*** Background Gradient - 2 declarations one for Firefox and one for Webkit ***/
    background:  -moz-linear-gradient(19% 75% 90deg,#4E0085, #963AD6);
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#4E0085));

    /*** Shadow behind the box ***/
    -moz-box-shadow:0px -5px 300px #270644;
    -webkit-box-shadow:0px -5px 300px #270644;
}

Styling the Input Elements

Styling the input elements is pretty easy but it does have some complications that can frustrate. We will apply a background color, a top border, some padding, and a width.

input {
    width: 230px;
    background: #8a33c6;
    padding: 6px;
    margin-bottom: 10px;
    border-top: 1px solid #ad64e0;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 0px;
}

Adding CSS3 to the Input Element

For the input element we will implement the new features of CSS3 called transitions. Unfortunately this only works in Webkit browsers such as Safari and Chrome.

input {
    width: 230px;
    background: #8a33c6;
    padding: 6px;
    margin-bottom: 10px;
    border-top: 1px solid #ad64e0;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 0px;

    /*** Adding CSS3 ***/

    /*** Transition Selectors - What properties to animate and how long ***/
    -webkit-transition-property: -webkit-box-shadow, background;
    -webkit-transition-duration: 0.25s;

    /*** Adding a small shadow ***/
    -moz-box-shadow: 0px 0px 2px #000;
    -webkit-box-shadow: 0px 0px 2px #000;
}

Now that we have the styles for the inputs in place lets style the hover events for those same inputs.

input:hover {
    -webkit-box-shadow: 0px 0px 4px #000;
    background: #9d39e1;
}

Some of you may not have caught it but I increased the radius of the shadow on hover from 2px to 4px. That is why we used the transition effects on the inputs because it triggers that change on hover.

Styling the Button

Ok we’re almost done, on to the button! Since we gave our button the class SUBMIT we can use that selector in our CSS.

input.submit {
    width: 100px;
    color: #fff;
    text-transform: uppercase;
    text-shadow: #000 1px 1px;
    border-top: 1px solid #ad64e0;
    margin-top: 10px;
}

Adding CSS3 to the Submit Button

input.submit {
    width: 100px;
    color: #fff;
    text-transform: uppercase;
    text-shadow: #000 1px 1px;
    border-top: 1px solid #ad64e0;
    margin-top: 10px;

    /*** Adding CSS3 Gradients ***/
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#781bb9));
    background:  -moz-linear-gradient(19% 75% 90deg,#781bb9, #963AD6);
}

That’s it! Now you have an awesome login form styled strictly with CSS3 and no images. Of course it only works in webkit browsers currently which are Safari and Chrome, but CSS3 support will be coming to a browser near you soon. If you liked this post please promote it below!

FINAL DEMO

Who says you need Cinema 4D, 3DSMax or even Illustrator to create a simple 3D icon? In this tutorial, you’re going to learn how to do it in Photoshop with the help of layer masks.

The main point of this tutorial is to demonstrate how we are able to apply semi-realistic lighting and shadows in Photoshop [omitting the need for 3D manipulation tools]. Note that we used the term "semi-realistic", we wanted to give the illusion of a 3D object, at the same time keeping the illustration effect.

In addition, the variety of perspective we are capable of achieving solely in Photoshop is of course meer. Do take advantage of the Bevel & Extrude feature in Adobe Illustrator. Nevertheless, aside being able to give reasonable lighting to the icon in Photoshop, we were also able to complete impression of a faux 3D object — only with the use of Photoshop.

Preview

1. Create a new Photoshop document.

Create a new 512 pixels by 512 pixels Photoshop document, the standard maximum size for application icons.

2. Facebook Logo Outline

To facilitate the creation process i.e., so you wouldn’t have to draw your own Facebook logo, download the Facebook Logo Vector Outline in .AI format here: http://j.mp/facebookLogoVectorOutline

Copy the vector into your clipboard, CTRL or CMD + C.

3. Paste the Facebook Logo Vector Outline into Photoshop as a Smart Object.

Paste the vector into the newly made Photoshop document, CTRL or CMD + V.

Select Smart Object in the dialog, press OK then press enter [to get rid of the resize tool].

4. Set up the Gradient Overlay – First gradient.

The main difference of this screenshot from the previous screenshots is the background that has been pasted in. Don’t worry, that’s not part of the tutorial, it’s there just to make things look better.

Right click on the layer with the logo outline and select Blending Options.

On the left side of the panel, tick the box Gradient Overlay.

Set the first gradient slider to the color #00225b.

4. Set up the Gradient Overlay – Second gradient.

Set the second gradient slider to the color #006ed5.

5. Set up the Stroke color.

Tick the Stroke box below Gradient Overlay.

Size: 1px.
Position: Outside.
Blend Mode: Normal.
Opacity: 100%.
Color: #00103e.

6. Set up the Inner Glow.

Tick the Inner Glow box.

Blend Mode: Overlay.
Opacity: 100%.
Noise: 0.
Color: #ffffff.
Technique: Softer.
Source: Edge.
Choke: 0.
Size: 2px.

7. Set up the Inner Shadow.

Tick the Inner Shadow box.

Blend Mode: Overlay.
Color: #ffffff.
Opacity: 100%.
Angle: 120 degrees.
Untick the Use Global Light box.
Distance: 1px.
Choke: 0%.
Size: 0px.

8. Create the Perspective.

To create the bevel of the icon, duplicate the layer with the logo outline [that now has the styles shown above implemented].

(1) Move this newly duplicated layer to the right to create the 3D illusion.

(2) Move this newly duplicated layer below the original layer.

(3) On the duplicated layer, click the eye icons on Inner Shadow, Inner Glow and Stroke to uncheck them. We only want the Gradient Overlay showing on the duplicated layer.

Let’s call this layer the "bevel layer".

9. Paint the Shadows – 1.

(1) Duplicate the "bevel layer" we’ve made in Step 8.

Let’s call this newly duplicated layer the "shadows layer".

(2) This time, uncheck the Gradient Overlay on it by clicking the eye icon next to it.

Or we can simply right click on the "shadows layer" and choose Clear Layer Style (we will lose the layer style). It’s personal preference.

(3) The color of the icon on the "shadows layer" should be black.

(4) Make sure have this layer selected and click on the Set Vector Mask icon below, its icon is a rectangle with a circle inside.

(5) Then make sure you have the layer mask of the "shadows layer" selected, not the layer itself.

10. Paint the Shadows – 2.

Again, make sure you have the layer mask selected of the "shadows layer" selected.

Choose the Brush Tool.

Make your foreground color #000000.

With the Brush Tool [or the Color Fill Tool], paint all over the "shadows layer" to hide all the black so that all that is revealed is the blue gradient of the "bevel layer". You will know why we do this in a second.

11. Paint the Shadows – 3.

Select the Brush Tool.

Make your foreground #ffffff.

Ensure you select the layer mask on the "shadows layer" created in Step 9.

With the Brush Tool, paint the corners of the icon on the "shadows layer" with #ffffff to reveal shadows.

The reason why we cleared all the black color in Step 10 was so that we would have a more natural approach of painting shadows.

We could easily use the Brush Tool loaded with the color #000000 to hide the shadows and start there but it would rather seem as if we were painting highlights not shadows.

If we do it this the other way around, it would seem as if we were painting shadows [which is what we're aiming for], instead.

To achieve best results, it’s best you study how lighting and shadows fall onto your household objects.

12. Paint the Shadows – 4.

13. Paint the Shadows – 5.

14. Paint the Highlights – 1.

With the same technique used above regarding layer masks from Step 9 to Step 13, let’s paint some highlights on the front of the icon.

The process is similar to that used in Step 10.

Duplicate the first layer we made in Step 3. This newly duplicated layer will provide the highlights on the [front] face of the icon. Let’s call it the "front highlights layer".

Right click on this "front highlights layer" and choose Clear Layer Style. The color would only be #000000 or black.

Right click on it again and choose Blending Options.

Tick the Color Overlay box and choose the color #ffffff or white.

The color of the icon should now be white.

With the "front highlights layer" selected, click the Set Vector Mask icon below to set a layer mask on this layer, its icon is a rectangle with a circle inside.

15. Paint the Highlights – 2.

Make sure you have the layer mask selected of the "front highlights layer" selected.

Choose the Brush Tool.

Make your foreground color #000000.

With the Brush Tool [or the Color Fill Tool], paint all over the "front highlights layer" to hide all the white so that all that is revealed is the blue gradient of the front face.

Select the Brush Tool.

Make your foreground #ffffff.

Ensure you select the layer mask on the "front highlights layer".

With the Brush Tool, paint the front face of the icon on the "front highlights layer" with #ffffff to reveal highlights.

Final Product

And that’s all there is to it.

I hope you enjoy it, and if you have any questions please leave a comment below.

So you just purchased a new hosting account and you some great ideas for your next project. Instead of just having the host default page up for your domain name why not create a coming soon page that is simple and effective.

There are many reasons to create these coming soon pages. The first reason is to make your product or service look more professional instead of having the “This is a website” page that your hosting company provides you. Secondly, it can help promote your site before it is even launched. Be sure to include your twitter account or an email subscription so people can follow the progress of the site. It allows them to get more excited about something they haven’t even seen yet.

Example Screenshot

Designing the page

When you start the design keep in the back of your head that this does not need to be a complex page on the contrary actually. This page needs to be simple yet effective. It must also convey a message of what the site will offer to get people interested. Don’t spend too much time on this page as you need that time to complete your other ideas. Let’s go ahead an open up photoshop and get started.

1. Open up a photoshop document 900px by 700px with a transparent background and the settings below.

2. Now lets fill in the background by going up to Edit > Fill.. chooser color from the drop down and put in the hex code #333333 and hit OK.

3. Now select the rectangular marquee tool and in the drop down box at the top choose Fixed size. Enter 900px for the width and 300px for the height.

4. Before you click anywhere go up to Layer > New > Layer… and name it Top. Now you can click anywhere in the document and make sure you drag the selection to the top.

5. Make sure you are selected on the newly created layer not the dark layer and go up to Edit > Fill… choose color from the drop down and enter #ececec for the hex code.

6. Now we have our top section put together all we have to do is bring in the logo. Open up your logo and drag it into your document. This is an important one because you want the brand to really stand out so make sure your logo is prevalent.

7. Next we need to add in the COMING SOON portion so they know that the site is not just a broken site. You don’t have to necessarily use COMING SOON, just something that lets the customer know that it’s not available yet. First create another new layer by going to Layer > New > Layer… name it Shadow. Grab your rectangular marquee tool and set a fixed size to be 400px wide and 30px high. Click and make the selection directly underneath the logo.

8. Grab your gradient tool and in the Gradient Picker (which is in the top left) choose your second option which should be foreground to transparent. Also set your foreground color to black by pressing D on your keyboard. Click approx. 5px above the selection that you have and while dragging down hold the shift key and let go when you get to about the middle of your selection. Once that is done drop your opacity for this layer in your layers palette to 10%.

9. Next we will use a layer mask to fade the corners out diagonally. Go up to Layer > Layer Mask > Reveal All. This allows us to see the complete layer and then fade it out by using the color black. You should still have your gradient tool selected and Foreground to Transparent selected and black as your foreground color if not make sure you do. Next drag the gradients below each of the corners in an upward diagonal direction like the screen shot below.

10. Once that is finished go ahead and add the coming soon text in.

Coding the page with CSS3

I just recently did a post on The basics of HTML5 but today we are going to stick with XHTML and use the XHTML Strict DOCTYPE.

The Basics

11. This is the bare bones of what an HTML page must consist of in order to display properly. Add the code below to a blank HTML file and save it as index.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Alive Again Apparel</title>
</head>
<body>

</body>
</html>

12. Next create a CSS file and name it style.css. Now lets link our CSS file to our index.html file so we don’t forget. Add the piece of code below directly above the closing head tag. Oh and to save you some trouble make sure the index file and the CSS file are in the same directory.

<link href="style.css" rel="stylesheet" type="text/css" />

The HTML Structure

13. Now let’s choose exactly how the page is going to be laid out. We will be using a 100% width layout in this tutorial so we will need two divs for the top section. One to fill the color 100% across and the other to center the content. In the example below I took out all of the other tags except the body tags and what’s between them, but that was only to make it easier to see. You still need the other tags in order for the page to work.

<body>
     <div id="top">
          <div id="topcon">
               <img src="logo.png" id="logo" />
          <div><!-- This div will be centered and contain the logo -->
     </div><!-- 100% color all the way across -->
     <p>Alive Again Apparel is a Christian T-Shirt business that is getting ready to launch. We will be delivering spirit filled T-Shirt designs for a unique way to spread the gospel.  

     <p>If you would like more information please feel free to email us at <a href="#">test@test.com</a> or follow us on <a href="#" target="_blank" id="twitter">Twitter</a> to get news about the upcoming launch.</p>
</body>

14. Now we have our content and you guys should now have an html page that looks pretty boring with no styling at. Enter CSS3! Open up your CSS file and start with the code below. I know how dare I say use this. I recommend that you use some type of CSS reset instead of using this * method, but I used this for the sake of simplicity.

/*** Resets all elements ***/

* {
   margin: 0px;
   padding: 0px;
}

/*** Gives the body the dark gray background we used in PS ***/

body { background: #333; }

/*** Styles the links ***/

a { color: #999; }

/*** Sets paragraph styles ***/

p {
   color: #ececec;
   font-family: verdana, arial;
   font-size: 12px;
   line-height: 18px;
   margin: 0px auto 20px auto;
   text-shadow: 1px 1px 1px #111; /*** New CSS3 Property that adds the shadow ***/
   width: 450px; /*** Allows paragraphs to be centered ***/
}

I used the Text-Shadow property right here which is brand new in CSS3. It gives our text a nice shadow behind it in most modern browsers.

15. Now that we’ve styled some of our HTML elements lets move on to the layout.

/*** Top section 100% color ***/

#top {
   background: #ececec;
   border-bottom: 1px solid #fff;
   margin-bottom: 30px;
   width: 100%;
}

/*** Topcon centers the page at 900px ***/

#topcon {
   margin: 0px auto; /*** Centers the page ***/
   width: 900px; /*** A width is required in order for it to center ***/
}

16. Notice in the HTML above I added ID’s to the twitter text and the logo. We will use these specific ID’s to style them

/*** Styling the Logo ***/

#logo {
   width:445px;
   height: 125px;
   display: block;
   margin: 0px auto; /*** Centers the logo in the 900px box ***/
   padding: 100px 0px;
}

/*** Styles the twitter link ***/

a#twitter { color: #4ce6fd; }

LIVE DEMO

The Final Product and Plug

If you hadn’t guessed already Alive Again Apparel is a Christian T-Shirt Business I am starting and I wanted to walk you through my process of creating a coming soon page that can be seen here.

Please keep a look out for the launch of our Christian T-Shirt Business and be sure to follow us on twitter to keep up to date with the progress @AliveAgainApprl

HTML5 and CSS3 are now able to be used in most modern browsers. You might be thinking to yourself why should I use such new technologies that don’t have complete cross browser compatibility? The answer to that is simple.

As with any job pushing your technical skills in your field will always help you to become a more well-rounded person. Sure HTML5 isn’t widely supported and is vastly changing, but taking the time to learn it and follow it’s changes will surely help you to be more prepared when the technology is finally ready.

HTML5 New Tags

1. DOCTYPE
2. Charset
3. Header
4. Nav
5. Aside
6. Article
7. Figure
8. Hgroup
9. Section
10. Address
11. Footer

DOCTYPE

The beautiful part about the new way to declare a DOCTYPE is that it’s so simple. It takes one line of code and 15 characters, no more long DOCTYPE s that are hard to remember.

<!DOCTYPE html>

CHARSET

This is a simplified version of the charset property which also helps you to memorize this bit of code.

<meta charset="utf-8">

HEADER

The new header element was created to contain the introductory information of your site.

A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.

The header element will usually contain the primary navigation of your website. Here is an example below of a semantic header section.

<header>
      <nav>
            <ul>
                  <li><a href="#">Home</a></li>
                  <li><a href="#">Portfolio</a></li>
                  <li><a href="#">About Us</a></li>
                  <li><a href="#">Contact</a></li>
            </ul>
      </nav>
</header>

NAV

Normally when creating a site in XHTML I either use a div that has the class of NAV or I give the UL the ID of nav. The new NAV element allows you to section off your navigation.

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

As you saw in the above example the NAV element is being used in the HEADER section which is not necessary but semantic.

 <nav>
     <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">Portfolio</a></li>
         <li><a href="#">About Us</a></li>
         <li><a href="#">Contact</a></li>
     </ul>
</nav>

ASIDE

The new ASIDE element is a bit confusing. It should only be used when it is related to the content around it, but is considered different from it. The official definition from W3C is below.

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography

In the example below I used the new ASIDE element as a featured section of the website. It is still related to the content on the page but is “Featured” so the ASIDE element works.

<aside>
         <p>This is some featured content that works well with the new ASIDE element</p>
</aside>

ARTICLE

The ARTICLE element is used for content that is intended to be distributed or reusable.

The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

The documentation also addresses when to nest the ARTICLE element in your HTML.

When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.

Inside of the ARTICLE element you can use HEADER and FOOTER elements to separate the content in your article.

<article>
   <header>
      <h2>Article Title</h2>
      <p><time pubdate datetime="2010-3-09T14:28-08:00"></time></p>
   </header>
   <p>This is the main content of the article that is not in the header or the footer of the article.</p>
   <footer>
      <a href="#">Show Comments</a>
   </footer>
</article>

FIGURE

The FIGURE element allows you to have an element that is separate from the content its in and has an optional caption.

The figure element represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.

<figure>
   <img src="figure.jpg" alt="figure image" />
   <figcaption>This is a figure</figcaption>
</figure>

HGROUP

The HGROUP element allows you to group heading tags together in essence giving the section more weight.

The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

<hgroup>
   <h1>Main Title</h1>
   <h2>Subtitle</h2>
</hgroup>

SECTION

The SECTION element allows you to section off content that is nested within content. This is a complicated one because you need to know when to use ARTICLE or the regular DIV tag.

The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading. Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, contact information.

<article>
   <hgroup>
   <h1>Main Title</h1>
   <h2>Subtitle</h2>
   <hgroup>
   <p>This is a description of this main section</p>
   <section>
   <h1>Category 1</h1>
   <p>Description of category 1</p>
   </section>
   <section>
   <h1>Category 2</h1>
   <p>Description of category 2</p>
   </section>
</article>

ADDRESS

The ADDRESS element is used specifically for contact information. Not just site wide contact information but could be per page or per node. This tag is NOT ONLY for a Physical Address it can hold other information.

The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole.

<address>
 <a href="#">Joe Bob</a>,
 <a href="#">Matt Smith</a>,
 <a href="#">Contact Info Related to this page</a>
</address>

FOOTER

The FOOTER element is used specifically for sectioning content at the end of a specific section of content. This tag could be used at the end of an article not just as the main footer for your site.

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

<article>
 <header>
    <h1>Post Title</h1>,
 </header>
    <p>This is the post content</p>
 <footer>
   <p>Comments: 8</p>
 </footer>
</article>

Enabling HTML5 Elements

In order to use these new tags currently you will need to display them block in your CSS, because the browsers don’t really know how to handle them.

header, nav, article, section, footer, figure, aside {
    display: block;
}

Well that’s it for this tutorial on HTML5 if you enjoyed it please promote it to all the social networks you can at the bottom of this page. Start coding for HTML5 now and you will be ready when the switch is finally made.

For more information on HTML visit the W3C documentation here

The Giveaway

One lucky winner will receive a GRAFPEDIA vip account for one year with Commercial license. This will give you access to Photoshop Gradients, Vector Patters, Layer Styles, Stock Images and much more. The winner will be announced on March 2nd.

The total value of this account is $199

How to Enter

1. First and foremost you must Follow Grafpedia on Twitter or be a fan on Facebook
2. Secondly you must comment on this post saying what you would use it for.
3. Third (This one is optional) subscribe to Three Styles RSS Feed or Follow us on Twitter. Remember this is optional, the first two ARE NOT OPTIONAL.

A Big Thanks Too

I want to send out a huge thank you to Grafpedia for making this giveaway possible!

Blogger Friends

This is a list of bloggers that have really helped Three Styles make it to where it is today. I can’t thank you all enough.

• Callum Chapman – Circleboxblog
• Jacob Gube – Six Revisions
• Mat Carpenter – Add To Design
• Jean-Baptiste Jung – Cats Who Code
• Chris Thurman – Visual Swirl

There are many more, but I can’t list everyone. Thank you so much for all of your votes and bumps and I look forward to doing even greater things in the future. Good luck with the giveaway the winner will be announced on March 1st.

Being a successful remote designer isn’t quite as simple as hopping onto a plane with your notebook. From poor internet access to baggage restrictions, there are hundreds of potential problems that can plague a remote design business. These ten tools, applications, and utilities are out attempt to solve those problems through technology. Check ‘em out, incorporate them into your mobile office, and keep your business rolling while you’re out of the office.

1. Western Digital My Passport Portable HD

Most portable hard drives are big, ugly, and prone to damage from even the most gentle bump. The Western Digital My Passport Portable HD is small enough to fit in your shirt pocket, big enough to store all of your music and movies, and fast enough to stream data straight to your media player. If you like having all of your data available when you’re working out of hotel rooms, this is the portable drive to pick.

Alternatively, for designers that only need a small amount of remote storage, why not keep your important information on an encrypted thumb drive? This option is perfect for designers that are stuck working from internet cafes and other people’s PCs.

2. Canon PowerShot G11

No, it won’t take photos as clear and crisp as a 5D Mk II, but it is great for on-the-move photography. As much as we all wish online work involved 100% online paperwork, there’s always the occasional offline invoice, contract, or NDA that requires scanning and submission. Instead of taking a portable scanner with you everywhere, using a good digital camera to ‘scan’ documents can save time and a ton of storage space. The G11 has a flip-out LCD screen, awesome low-light shooting capabilities, and a slim form factor, making it the perfect remote ‘scanner’ and camera for designers.

3. Deuter Futura 28 Backpack

Most notebook bags are terrible for long-term travel, or even a quick weekend away. Remote working is all about maximizing options, and the Deuter Futura 28 is perfect for designers, developers, and remote professionals that need a versatile backpack. Two pockets means more space for your notebook, spare hard drive, or even a graphics tablet. The Deuter Futura 28 has a built-in rain cover, which can save you having to worry about expensive design gear getting water damaged. Hat-tip to Tynan for the recommendation.

4. Bamboo Fun Graphics Tablet

Big tablets are always ideal, especially for ultra-detailed designs and illustration work. The only problem is that they’re annoying to lug around in a backpack, especially when you’re already carrying a notebook and other equipment. The Bamboo Fun Graphics Tablet is small enough to slide into the front pocket of your backpack, and powerful enough to be used for professional design projects. It runs on USB power, which means there are no batteries to worry about. As much as we wish it was wireless, the no-battery USB charger makes the wire worth it this time.

5. TimeSvr

How much time do you think you could save with a virtual secretary? TimeSvr lets you make the most of an online assistant, without ever having to worry about managing freelancers, paying wages, or any other administrative tasks. For just $69 per month, TimeSvr gives you access to a digital assistant, who can help with managing emails, finding potential clients, and even researching your competitors. Save time on trivial tasks and focus on the most important aspects of your work when you’re out of the office.

6. Google Applications

Short of setting up a remote PC connection, there’s no easier way to access your documents from anywhere than with Google Docs. While the interface certainly isn’t perfect and the applications don’t compare to MS Office, or even Open Office, Google Docs lets you easily share documents with coworkers and freelancers, and even access your own files from anywhere with an internet connection. Don’t expect to design a high quality presentation (leave that to Prezi instead) but do expect to make accessing work much more simple.

7. Skype

If you’re frequently traveling to different countries while you work, managing multiple sim cards can get difficult. Skype is great for video conferencing with clients, getting low-cost phone calls out of the way, and managing multiple phone numbers. Instead of listing five different cellphones on your business card, set up SkypeIn numbers and SkypeOut credit and take calls from anywhere on earth with a single phone number.

8. Mobile 3G Modem

When there’s no Starbucks around for wireless, don’t panic. Most smartphones can easily tether to your notebook, providing a cheap and simple 3G access option. However, there are two situations that could make this difficult.

1. You don’t have a tether-capable smartphone.
2. International 3G costs are high, and you need an option for local internet access.

Make it easy by purchasing a USB 3G modem from your country’s phone provider. We’ve linked to an unlocked modem on Amazon, but in reality it’s often easiest to just to go your calling plan provider (especially in a foreign country) and ask what they’d recommend.

9. LeechBlock for Firefox

You’re in a cheap hotel room, desperate to get your work finished so that you can go out and explore. All the while, thousands of online distractions are keeping your attention on something other than your work.

Changing work behavior is hard, especially when you’re in an unfamiliar location. Instead of trying to fight with discipline, install LeechBlock, create a list of distracting websites, and block them out for solid, distraction-free working periods. Create site profiles for optimum design productivity, uninterrupted research, and even single-purpose batched tasks.

10. QuickerTek Extended Macbook Battery

Note: If you’ve got a Windows-based notebook, your manufacturer probably has something similar that you can plug in for an additional ~5 hours of battery life.

Perfect for long bus trips and long-distance flights, this extended plug-in battery lets you almost double your battery life and dramatically increase the amount of work you can get done on the road. Flights are the best time to get grunt work done – there’s little else to do, so take advantage of the opportunity cost – and even with a 7-hour battery, your notebook is still unlikely to cover the distance on its own. Plug this baby in and enjoy extended battery life, awesome mobile productivity, and great work results.

Typography is often overlooked in todays design specifically by web developers. It really is a shame because CSS gives us so much control over our type. That being said, we our limited to certain “web safe” typefaces but that shouldn’t decrease our creativity. Here are a few CSS tips for typography on the web.

The Font Attribute

CSS provides us with the Font attribute, which is what allows us to tweak the text on our page. This is an overview of the syntax and how to effect text using CSS.

Font-size

Change the size of your font using font-size

     font-size: 1.2em;
     font-size: 12px;
     font-size: 10pt;

Live Preview

1. Font size is set to 1.2em.
2. Font size is set to 12px.
3. Font size is set to 10pt.

Font-weight

This is used to change the weight of your font (i.e bold, bolder)

     font-weight: normal;
     font-weight: bold;
     font-weight: bolder;
     font-weight: lighter;

Live Preview

1. Font weight is set to normal
2. Font weight is set to bold
3. Font weight is set to bolder
4. Font weight is set to lighter

Text-transform

The text-transform property allows you to apply uppercase, lowercase, and capitalize effects to your text.

     text-transform: capitalize;
     text-transform: uppercase;
     text-transform: lowercase;
     text-transform: inherit;

Live Preview

1. Capitalizes the first letter in every word
2. Allows your html to be lower case the converts it all to uppercase characters
3. ALLOWS YOUR HTML TO BE UPPERCASE THEN CONVERTS IT TO LOWERCASE, THIS WAS TYPED IN ALLCAPS
4. inherits the text-transform property from its parent element

Text-decoration

The text-decoration property allows you to underline, overline and put a line through your text

     text-decoration: normal;
     text-decoration: underline;
     text-decoration: overline;
     text-decoration: line-through;
     text-decoration: blink; (DO NOT USE)

Live Preview

1. Text decoration set to normal
2. Text decoration set to underline
3. Text decoration set to overline
4. Text decoration set to line-through
5. Text decoration set to blink ( Only works in Firefox and Opera )

Font-Variant

The Font variant property allows you to create the small-caps effect which capitalizes the letters then decreases the font size.

     font-variant: normal;
     font-variant: small-caps;
     font-variant: inherit;

Live Preview

1. Font Variant set to normal
2. Font Variant set to small-caps
3. Font variant set to inherit

Creating Drop Caps

Creating drop caps is easy with CSS. There are multiple ways to create the drop cap effect but I am going to show the most efficient way. To create them use the :first-letter pseudo-element which only effects the first character of a given element.

<p class="dropcaps">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>

p.dropcaps:first-letter {
      	font-size: 340%;
	margin: 8px 5px 0px 0px;
	float: left;
	font-weight: bold;
	width: 1em;
}

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Creating Attractive Paragraphs

For more attractive paragraphs use Robert Bringhurst’s method which states: Take your font size and multiply it by 30 to get the width of your paragraphs.

For example if your font size is 12px, multiply it by 30 and you get 360px which should get you approximately 65 characters per line.

Incorrect Measure

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Correct Measure

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Line-height Examples

Line height dictates the amount of space in between each line of text. A good rule of thumb is to make the line height 6-7px bigger than your font-size.

For example if your font size is 12px, add 6px to the font size and you get your line height, which would be 18px.

Incorrect Line-Height

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Correct Line-Height

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Cleanly Emphasize Text

Underlines should only be used on text that is linking to something or somewhere. Italicizing text is a cleaner alternative.

Incorrect example

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Correct example

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Looking forward – CSS3

There are already some exciting features that you can incorporate into your designs dealing with type in CSS3. Of course some of these new features do not work in IE, but your probably used to nothing working in IE anyway so give these a shot.

@Font-face

@font-face allows you to upload a raw font file to your web server and link to it in your external CSS file, then apply it to any type on your site.

This feature is the biggest one dealing with type, but along with it’s upside comes its downside. There are only a few fonts that you are “allowed” to use because of licensing issues. The fonts that are CSS3 safe can be found here.

Usage of @font-face

In this example I put a folder in the root of my server called font. First you need to declare the @font-face attribute which imports your font file and then you can use the font name to effect any other elements.

/* Declaring the font */

@font-face {
      src: (font/diavlo.otf)
}

/* Applying the font to an element */

h1 {
      font-family:  diavlo, Arial;
}

Text-Shadow

The text shadow attribute takes away the need to create drop shadows for certain elements in photoshop and gives you dynamic drop shadow control. Of course this attribute is only supported in Safari, Chrome, Firefox and Opera.

Example Heading

p {
      font-size: 2em;
      font-weight: bold;
      color: #777;
      text-shadow: 1px 1px 1px #222;
}

Example Heading 2

p {
      text-shadow: 2px 2px 2px #222;
}

Example Heading 3

p {
      text-shadow: 1px 1px 5px #FFF;
}

The Challenge

The techniques in this article are just guidelines. Take them and implement the features you like into your web designs. Typography is extremely important and can absolutely ruin a beautiful design. Don’t let that happen to you bookmark this guide!

In this photoshop tutorial you will learn how to create a blog design from scratch using a combination of gradients and selections.

Here is a preview of what we will be creating

Photoshop Document Size

1. Lets begin by creating a new photoshop document – File > New with a width of 900px and a height of 1200px.

Building the Header Section

2. Choose your Rectangular Marquee tool ( Shortcut Key: M ) and put in the following options below. Feathering to 0px, then choose the drop down menu and pick Fixed Size. Set the width to 900px and the height to 80px as this will be the width and height of our header.

3. Click and hold near the top of the document and a selection should appear. Move the selection to the very top as shown in the demo below.

4. Next create a new layer by going to Layer > New > Layer… Name the layer Header, Then go to Edit > Fill and in the first drop down choose color… Add in the hex code #7a6c5a make sure before you do this that you are selected on the new layer we just created. If you are on the background image we could have issues later on. Press ok and it should fill your selection with a dark brown.

5. Next we are going to add a little shadow to the bottom of the header. Go to your layers palette where all of your layers are stored and Command + Click (mac) Control + Click (PC) on the thumbnail of the Header layer. That will bring up a selection of that layer. After we click and the selection is made create a new layer then head over and grab your gradient tool. Make sure in the gradient picker you choose the Foreground to Transparent gradient.

6. With the selection still active and black set as your foreground color start about 20 pixels below the header and click and drag up while holding down the shift key ( keeps the line straight ) release the mouse button at approximately halfway up the header. Rename this layer Header Shadow. Change the blending mode to soft light and adjust the opacity as you see fit. I set my opacity to 78%.

Now Lets do the Logo

7. Grab the Text Tool select Myriad Pro, Bold, 52pt, white and click near the upper left side of the header type in the title of your blog in this case “Blog Title”.



8. Go ahead and highlight the text by using the shortcut Command + A or Control + A then go up to Window > Character and set the tracking to -39. See example below.

9. Once you have fixed the tracking right-click on the Blog Title layer and choose Blending Options… Add a drop shadow with the figures from below.

Creating the Navigation

10. First lets start off by bring in some guides bring a guide in from the top to about 2 pixels underneath your logo. Then drag in a guide from the left and have it stop right at the 6 on the top ruler of your document. Drag out another guide from the left and increase each one by 1.25 inches which means this time it will stop at 7.25 the next one will be 8.5 etc…until you have five boxes for your navigation to go into. Take a look at the below screenshot to see if it’s similar to mine.

11. After you have the guides in place get your text tool and choose Myriad Pro, Regular, 16pt, White and type Home in the first box. It should be positioned just like in the screenshot above. Finish the rest of the navigation items which are Tutorials, Freebies, Trends, and Contact and make sure they all fit in their box.

12. Highlight all of your navigation items and press Command + G or Control + G to group them together and name them Nav. This will keep our photoshop file cleaner.

13. Our next step is to add the active state of the navigation. Go into the Nav group and create a new layer called active. Drag that active layer underneath the Home text layer so that home will show up on top of it.

14. With your guides still up select the Rounded Rectangle Tool and set the Radius at the top to 10px. Make sure in your toolbar at the top that FILL PIXELS is selected. Start at the 6 inch mark where home is, about 8px above home is where you will start on the 6 inch guide. Click and drag to the right until you hit the other guide and drag down so that it goes past the bottom of the header. If that was confusing look at the screenshot below.

15. Grab your rectangle marquee tool, and make sure that at the top where you have the tool options that you set the style drop down box to normal instead of the fixed width. Then drag out a selection around the part that hangs over the header and hit the delete or backspace key.

16. Now we will create the outward curves at the bottom of the tab. Grab your pen tool and make your first click on the left edge of the tab and then click and drag left at the bottom of the header while holding down shift until you get the desired curve let go and just click to complete the shape.

17. Now that we have the path drawn we need to create a new layer in our layers palette. Then go to Paths and choose the “Fill path with Foreground Color” option. After you have filled the color and you have your paths panel open click off of the current selected path by clicking in the gray area below, then go back to your layers palette. Now in mine I have a little bit hanging over the header so I’ll grab my rectangular marguee tool and delete that.

18. Next we need to duplicate the layer we just made ( Command + J (Mac) Control + J (PC) ). Then we need flip it horizontally because we want to use it for the other side. Go to Edit > Transform > Flip Horizontal. Then press your “V” Key on your keyboard which selects the move tool and use your right arrow key to move that layer into position. Once that layer is in position select all three layers in your layers palette and merge them down to one ( Highlight all of them then right click and choose Merge Layers). Then be sure to move this layer under the Nav group so that the “Home” text shows through. Here is what we have so far.

19. Now it’s time to give our tab some gradient action! Right click on the tab layer and choose blending options. Click on the Gradient overlay option and copy the settings below

20. Next we want to give a drop shadow to the tab to give it a little “Pop.” Use the settings below.

21. Now you may notice that the drop shadow is hanging below the header which we DO NOT want. Here is a trick on how to get rid of a specific section of a layer style. Click on the part that says Blending Options: Custom which is at the very top of our Blending Options dialog box. Then in the Advanced Blending section check “Layer Mask Hides Effects.”

22. Now go ahead and add a layer mask to your tab Layer > Layer Mask > Reveal All. Grab your rectangular marquee tool and draw a selection around the drop shadow that is hanging over the header.

23. Once you have the selection like above go to Edit > Fill… and choose black as your color. The reason we use black is because when using layer masks white reveals and black hides.

Main Background Color

24. Now we are going to give our blog its main background color. Head to the very bottom of your layers palette and find the layer called background. If it has a lock by its name double click the lock and then press ok. Then go up to Edit > Fill… > Color… and put in the hex code #e0ceb6.

25. We are going to add a highlight at the bottom of the header so that it gives the header a subtle separation from the body background. While selected on your background layer create a new layer. Then grab your Single Row Marquee tool and click inside right underneath the header. The correct selection should look like below.

26. Fill that selection with #f3ebe0 and you should get something like the below screenshot.

On to the Content

27. First thing we want to do is clear all of our guides. So go up to View > Clear Guides. Now lets create two guides that will help us align our content correctly. Go back up to View > New Guide… choose Vertical and give it a value of 25px and hit enter. Repeat that process except this time put in 875px. This gives us 25px of “padding” on each side.

28. Lets create the box where the posts will be shown. Select the Rectangular Marquee tool and input the settings in the toolbar below. Place the selection in the exact place as seen in the second screenshot.

29. Fill the selection with a color (I used white), then open your layer style menu and choose the gradient option and copy the settings below.

30. While in the layer style menu add a stroke: 1px, #887c6a (stroke color), outside.

31. Now we will create a section for the post title to go into. Grab the Rectangular marquee and use the settings below.

32. Fill it with any color and copy the styles below to apply the gradient.

33. Now we can add a little highlight to separate the title from the preview content by using our rectangular marquee tool and setting the width to 550px and height to 1px.

34. Add a new layer and fill it with #f2e7d9.

35. Take those three layers we just made and group them together and call them “Post.” Duplicate them two times and evenly space them down the page like below.

On to the sidebar

36. The sidebar will use a lot of the same values as we used for the post so this part should be short. I created a couple more guides to help me align the sidebar. I placed one at the right edge of the post and then one 25px to the right of that. This is great spacing because it means all of our elements have 25px in between each other which we want to keep consistent.

37. Now I can draw out my sidebar using the rectangular marquee tool set the rectangle marquee to the fixed size with a width of 275px and a height of 430px

38. Create a new layer and fill it with any color. Copy the layer style from #29 earlier in the post and apply it to this new layer.
Draw out a selection at the top of the sidebar where the title “Sponsors” will go. Make sure it lines up with the darker brown part of the post title. Fill it with any color and copy the layer style from #32. Also create the 1px highlight like we did before to go right below the brown part.

39. Group all of the sidebar elements into a group called sidebar and duplicate it once. Use your move tool to nudge the duplicated group down to fit into position like the screenshot below.

The Footer

40. Grab your rectangular marquee tool and start 25 pixels below last post and select the rest of the canvas. Fill it with #716656 and it should look like the screenshot below. P.S. I had to adjust the height of the second sidebar in order for it to be lined up with the last post.

Layout Complete now add Content

41. The layout is now complete all thats needed now is to add some content. I stuck with Myriad Pro for all of the font on this website including post titles.

I hope you learned something from this tutorial, even if your not a fan of the design there are still photoshop techniques to be learned. Thanks everyone and let me know if you attempt it. Don’t forget to promote this below if you enjoyed it.

This is the second part in a three part series. Today we will be covering the Border attribute. The first article was on the Background Attribute and the last article will be on the Font Attribute so stay tuned and subscribe. Part one of this CSS series is linked below.

1. In-Depth Look at CSS’s Background Attribute

Some background on the Border Attribute

Borders used to be those ugly gray things that surrounded elements such as tables and frames, but now with CSS they are a very powerful tool for designers.

Overview

There are 3 properties available in CSS2 relating to the border attribute.

• border-color : Sets the actual color for the border
• border-style : Sets the style of the border
• border-width : Sets how thick the border will be

Usage of basic properties

Border Color

The border-color property sets a specific color for the border of the chosen element. Here are some examples of what this property may look like.

border-color: #999;
border-color: rgb(100,200,200);
border-color: red;
border-color: transparent;

Border Styles

The border-style property sets the style of the border on the specified element to whatever value it’s given.

border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
border-style: none;
border-style: hidden;

Border Width

The border-width property determines the thickness of the border on any given element.

border: 3px solid #64c8c8;
border: .5em solid #64c8c8;
border: thin solid #64c8c8;
border: 10pt solid #64c8c8;

Speed up the process with short hand

This little piece of code is a gem, you might want to take notes on this one. This combines all three border properties into one for increased productivity.

border: (width) (style) (color);
border: 1px solid #999;

Great Examples of Border Usage

1. Kammeradvokaten

This site uses a mixture of typography and borders to bring a truly effective simplistic look. The borders act as organizers for the content. Very well done.

2. Open

This is also another beautiful example of the border attribute. Open has used borders to basically section off each piece of content. Everything is well aligned and they used multiple styles of borders.

My challenge to you

When you are designing that new portfolio or a site for a client, push yourself to incorporate borders in the design. It will not only be a challenge to do it well, but you as a designer will benefit from branching out from the norm. If you do complete this challenge or have completed this challenge please leave a link in a comment so our readers can check them out!

Sometimes making something simple can be much more difficult than creating something complex in the design world. I went through and found these 20 sites that I think fall into the “minimalist” category, yet are still highly effective. Another reason a lot of these sites stand out is their typography. If you are planning a “minimalist” site you MUST have good typography or it will turn from being simple and professional to ugly and amateurish.