Tutorial: Create A Minimal Single Page Portfolio With HTML5/CSS3

David — Thu, 02 Feb 2012 08:00:00 +0000

This tutorial is the second installment of how to create a minimal single page portfolio using HTML5 and CSS3, take a look at part one where I initially designed the single page portfolio concept. In this tutorial I will walk you through the basic front-end build and what resources I used to rapidly build the page.

The Design

Resources Used

Titillium Text – Using @font-face for heading typography.

Form Producer – Used for basic form demo.

Apple iOS Linen Texture – Used for the background texture.

Jribbble – A jQuery plugin to pull in some dribbble shots.

HTML5 Boilerplate – A HTML5 framework to build our design on.

960 Grid System – A CSS framework to provide pixel perfect from design to code.

Basic HTML5 Layout

Our basic layout section starts with the HTML5 doctype and the usual stuff such as the title/meta tags and the CSS links to two stylesheets. One is the 960 grid frame work which will allow me to quickly and easily code up the site from my previous design, the other stylesheet is where I place the styles for the page. I have kept these separate for demonstration purposes. I lastly use the HTML5 Autocorrect form attribute in the message text area, this is again useful for mobile users who may have fat or clumsy fingers ;).




  
  David Martin - A Web Designer & Developer - Tunbridge Wells, Kent.

Header

The page concept is pretty simply so semantically dividing the sections up is easy. I use HTML5 elements such as

to markup the intro block as this is the introduction to the section and to markup the intro text for the current section.

  

  

  	

		

			

		

		

			Hello! My name is David!

			A web developer & designer from Tunbridge Wells, UK.

Body

I group the body contents of the page using the HTML5 elements

and

. I use the

element to group the small ‘About’ left column and the right side ‘Contact’ form.

Notice I also nest both the left and right columns using the

element. I used the

element to markup the left and right content areas as two separate pieces of content inside the main

element.

When constructing the form you can see I was able to use some new HTML5 form elements to improve the form functionality. Notice for the text inputs I use the Placeholder attribute, this displays text in the field until the field is focused.

A useful HTML5 form attribute is Auto capitalization, this is useful for mobile users who may not want their phones to add capital letters to their email fields.

I lastly used the HTML5 form attribute Autocorrect on the message textarea to help mobile users who may have clumsy fingers ;).

There are more HTML5 form elements you could add to this form, but for now this is simply a demo. I would recommend also using the Required attribute to improve your form validation. Have a play around and enjoy!

The Dribbble shot feed is pulled in using the jQuery plugin, for now I simply add

to the page, this is where the feed will be pulled in. There are some configuration options you will need to amend in the plugin, you can read up on this here or simply view the demo.


   

		
			

				

					

						About

					

					Maurizzle tellivizzle nibh bling bling for sure. Ghetto izzle sheezy. Pellentesque yo mamma rhoncus owned. Gangster hac nizzle platea dictumst.

					Maurizzle tellivizzle nibh bling bling for sure. Ghetto izzle sheezy. Pellentesque yo mamma rhoncus owned. Gangster hac nizzle platea dictumst.

					Maurizzle tellivizzle nibh bling bling for sure. Ghetto izzle sheezy. Pellentesque yo mamma rhoncus owned. Gangster hac nizzle platea dictumst.

				

			

				

			

				

					

						Contact

					

							

								Name
								

								Email
								

								Message
								

								

							

						

				

			

			

				

						

							Projects

						

						You can check out some of the designs I am working on which are being fed from my Dribbble feed, one day when I have some spare time I’ll develop this site a little further to actually show some full project details...I promise.

Footer

I can once again use more HTML5 elements to semantically divide the footer section up, I first wrap the entire footer with the

Tutorial: Creating A Sticky Sidebar Using jQuery

Alexandre Smirnov — Thu, 15 Sep 2011 09:00:00 +0000

DesignWoop welcomes this guest post by Alexandre Smirnov a web designer and developer who lives and works in California.

Today, I will be showing how to create a jQuery sticky sidebar script. Now, I’m sure many of you have a question: Why can’t I just use “position:fixed”?

Well, you can, but then the element with that style will stay where it is relative to the top of the viewport.

This means, if the element you are “fixing” in place is in the center of the page, it will stay in the center of the page as you scroll down. With this script, it will stay wherever you want it to be.

Check out the demo

jQuery sticky sidebar script

Setting the HTML

Now, we’re going to start off with some simple HTML for the sticky sidebar. In this case, we’ll be “sticking” a div with an id of “sticky”.



&lt;div id=&quot;sticky&quot;&gt;
&lt;/div&gt;
&lt;div id=&quot;text&quot;&gt;
&lt;/div&gt;

Setting the CSS

Now that we’ve got the foundation, we can apply some styles to it to make the page look nice.



body {

    background: #fbfbfb;

}
#container {

    width: 744px;

}
#text {

    color: #333333;

    margin-top: 100px;

    width: 500px;

    height: 10000px;

    float: right;

    font-size: 15px;

    line-height: 23px;

}

Of course, we’re also going to need to style our sticky element.



#sticky {

margin-top: 50px;

margin-left: 50px;

padding:5px;

background: rgba(255,255,255,1);

height: 120px;

width: 305px;

-webkit-border-radius: 7px;

-moz-border-radius: 7px;

border-radius: 7px;

}

Setting the jQuery

Great, now we can move on to the jQuery that will make this all work. Before we begin, let me clarify exactly how the logic behind this goes. We have a normal element, just sitting on the page. Then, when the page is scrolled enough that the element we’re sticking is touching the top of the viewport, we “stick” the element.

What that means? We set the element to be “position:fixed”, after which we give it margins that will place it into the same stop where it was before being fixed? Sound complicated? Don’t worry, the code is actually quite simple.

First, we declare some variables.



var obj = $('#sticky');

var offset = obj.offset();

var topOffset = offset.top;

var leftOffset = offset.left;

var marginTop = obj.css(&quot;marginTop&quot;);

var marginLeft = obj.css(&quot;marginLeft&quot;);

We need these values to be able to position the element correctly when it is “stuck”.

Next, we have to create a window scroll function. This function will execute every time the page is scrolled.



$(window).scroll(function() {

	var scrollTop = $(window).scrollTop();

});

As you can see, the syntax is quite simple. Also, take a look at the “scrollTop” variable. This variable will be updated every time the page is scrolled. It holds the value of how far the user has scrolled. Specifically, how far away the top of the viewport is from the top of the actual page.

Now, we’re going to need two “if” statements. One of them will execute if the user has scrolled to the sticky element. Now, the next “if” statement may seem extra at first.

However, it is actually very important. Image that the user has scrolled down, and the sticky element has been “stuck”. Then, imagine what would happen if the user were to scroll back up the page?

The element would stay “stuck”, instead of going back to its previous position. In order to fix it, we’re going to have a function that checks if the sticky element is higher than its original position. If it is, the function reapplies the original styles. That’s why we need so many variables at the top of the javascript.

These are the “if” statements:



	if (scrollTop &gt;= topOffset){
		obj.css({

			marginTop: 0,

			marginLeft: leftOffset,

			position: 'fixed',

		});

	}
	if (scrollTop &lt; topOffset){ 		obj.css({ 			marginTop: marginTop, 			marginLeft: marginLeft, 			position: 'relative', 		}); 	}

Those “if” statements are the meat of this code – they make everything work. Here’s the end result:

 var obj = $('#sticky'); var offset = obj.offset(); var topOffset = offset.top; var leftOffset = offset.left; var marginTop = obj.css(&quot;marginTop&quot;); var marginLeft = obj.css(&quot;marginLeft&quot;); $(window).scroll(function() { var scrollTop = $(window).scrollTop(); 	if (scrollTop &gt;= topOffset){
		obj.css({

			marginTop: 0,

			marginLeft: leftOffset,

			position: 'fixed',

		});

	}
	if (scrollTop &lt; topOffset){
		obj.css({

			marginTop: marginTop,

			marginLeft: marginLeft,

			position: 'relative',

		});

	}

});

Well, that’s the end of this tutorial. I hope you enjoyed it! Also, don’t forget to actually include the jQuery library, and don’t forget to wrap everything in a $(document).ready(function(){} as well.

Check out the demo

jQuery sticky sidebar script

I actually made this into a jQuery plugin, so if you intend to use this in one of your future projects, I would suggest downloading the plugin: jSticky.

Tutorial: Create A Minimal Single Page Portfolio Design In PhotoShop

David — Mon, 01 Aug 2011 14:00:00 +0000

Today I will show you how I created this minimal & stylish single page portfolio design in Photoshop, I will show you step by step how I use the 960 Grid System with textures, icons and fonts to build this single page portfolio.

Final Result Preview

This is the finished product of the tutorial. (View Large)

Tutorial Resources

TitilliumText font, @font-face Compatible.

Social Media Icons by Gedy Rivera.

Apple iOS Linen Texture by Orman Clark.

960.gs Grid System.

Set The Canvas

Before you begin designing and creating the structure of your portfolio, it is a good idea to work to set of grid lines, I like to use the 960.gs grid. Once you have downloaded this and unzipped the file contents, you will find the PhotoShop PSD grid in the folder named templates. For the purposes of this tutorial I will be using the 12 column grid template, I find it really useful to turn the ‘Guides’ on, – View -> Show -> Guides.

Open the downloaded grid PSD called ’960_grid_12_col.psd’ and re-size the canvas to width: 1021px and height:1400px. Image -> Canvas Size. Create a new layer and fill this with the color:# f5f2f2.

To add a some more depth to the background canvas I will use the Apple iOS Linen Texture, unzip this and open the PSD called ‘os-linen.psd’. Duplicate all the layers apart from the layer named base color to your PSD file. Select the top four layers and duplicate to your file – Layers ->Duplicate – > Your_PSD_Name.psd. Set the opacity of the two dark textures to 70% and the two lighter top layers to 20% opacity.

The final background texture we will use will look like so:

Creating The Header

Create a new ‘Group’ and name it ‘Header’, - Layer -> New -> Group, whilst inside this new group create a new layer called ‘header _line’, – Layer -> New -> Layer. With this new layer selected, draw the pink line to the dimensions of width:1021px and height: 6px. To create the shape, simply use the the ‘Rectangle Tool‘ and use the color:#ee6d72 for the line. You will be able to see the line dimensions by selecting - Window -> Info from the top menu.

Once you have created this top line you will need to duplicate it, name the new duplicated layer ‘header_line_white’. To duplicate the line select the layer called header _line and select – Layer -> Duplicate Layer. Make this new line half the height but use the same width and move it to the bottom of the layer called header _line, once in place, change the color of this layer to: #ffffff;

The resulting top line will look like so:

Next we will create the typography, earlier I gave you the font I used to create the welcome message and page headings, download TitilliumText and install it onto your PC/Mac. Create a new group whilst still inside the Group you made earlier, call this new Group – ‘Strap Line’. Organizing and naming your layers and groups correctly makes it so much easier navigating around the PSD, it also makes it much easier when you come to code up your PSD into XHTML.

To create the header text, whilst inside inside the Group ‘Strap Line’ I created a new layer, selected the ‘Horizontal Type Tool’ and typed in my welcome message: “Hello, my name is David Martin.
A front end developer/designer from the UK.”. I set the font size to: 11pt and the color to: #000000.

Notice I place my welcome message to the right of the first three columns of the 12 bar grid, this leaves me room to place my logo in columns two and three as I will be leaving columns one and twelve blank. I do not want to create a cramped and confused design.

To help separate the welcome message from what will be the page body, I created a simple divider line, to do this, whilst still inside the ‘Header’ group, create a new group called ‘Line Separator’. Create a new layer called ‘Separator Line Top’ and using the ‘Rectangle Tool‘ draw a line which will cover a full ten columns on the grid. The line dimensions will be – width: 780px, height: 1px and the color of this top line will need to be set to #d5d5d5.

To create the illusion of a letterpress style on the line, select the layer ‘Separator Line Top’ and duplicate it, rename the new layer ‘Separator Line Bottom’ and move this new layer to the bottom of the layer ‘Separator Line Top’, set the color of ‘Separator Line Bottom’ to #ffffff.

Creating The Body Content

The left and right content areas will be created with a width equal to four grid lines each and will be separated by two grid columns.

Creating The Form

Create a new group and name it ‘Contact’, within this group, create a new layer for the heading text “Contact me”. Using the the same font as before ‘TitilliumText’ type the contact message into the grid lines, I aligned it so that the heading starts on grid column 8. The character settings used are – size: 8pt, weight: thin.

The form input fields are created using the ‘Rectangle Tool‘, I create the ‘name’ and ‘subject’ input fields so they start on grid column 8 and have the dimensions – width: 300px, height: 30px. The message textarea has the dimensions width: 300px, height: 130px. For each input field and the textarea I will add a very subtle Inner Shaddow. Select the input field layer and select – Layer -> Layer Style -> Blending Options -> Inner Shaddow. Set the Inner Shaddow settings to - Blend Mode: Multiply, Opacity: 75%, Angle: -90, Distance: 1px Choke:0px, Size: 0px, Color: #ebe9e9.

Keeping consistent with the grid guidelines, I will create the form button to sit between grid columns 10 and 11. Using the using the ‘Rectangle Tool‘ I create the button to the dimensions of – width: 140px, height: 30px.

For the form button I will add a Gradient and Stroke. Select the button layer and tick – Layer -> Layer Style -> Blending Options -> Stroke & Layer -> Layer Style -> Blending Options -> Gradient Overlay. The button color is set to #ebe9e9, the Stroke settings are - Size: 1px, Color: #ebe9e9. The settings I used for the button gradient are – Blend Mode: Normal, Opacity: 100%, Style: Linear, Angle: 90. Set the left Stop Location color to #ebe9e9 and the right color to #f1f1f1, set both the Stop Locations for the gradient sliders to 50% like below -

Creating ‘About Me’

This is, as you can see pretty straight forward, the only thing to note is the font in use which is Helvetica Neue 45 Light. Download and install this font and set the font settings to size: 2.5pt, Leading: 4pt, Tracking: 100, Color: #2a2828. Create a new Group and name it ‘About me’. Within this group create a new layer, using the ‘TitilliumText’ fonthis will create the ‘About me’ heading. The font settings for this font is - size: 8pt, weight: thin. Below this I will create a new layer for the ‘About me’ text blurb. All the text is aligned to the start of the second grid column and will span no more than four columns in total.

Creating the ‘Project Feed’

The project feed will span an entire ten columns of the grid. I create a new group called ‘Project Feed’ and within this two new layers for the heading text and paragraph below. The heading text font is again – size: 8pt, weight: thin and the font settings for the paragraph below is – size: 2.5pt, Leading: 4pt.

I decided that I wanted to pull a feed of images into the page using the Dribbble API, in the future, when I expand on this design I will modify it to show more detailed information about project work. Within the ‘Project’ group I create a new sub group called ‘Feed’. For each feed image the total size will be exactly three grid columns, including the image padding and border.

Create a new layer and use the ‘Rectangle Tool‘ to create a box to the dimensions of – width: 220px, height: 144px. The box background color needs to be set to #ffffff and a 1px stroke will need to be added to this box. Select the layer and click Layer -> Layer Style -> Blending Options -> Stroke. Set the stroke to 1px and the stroke color to #dedbdb. The actual feed images will sit inside this white box, the image size will be - width: 200px, height: 124px.

Creating the ‘Footer’

Creating the footer is very straight forward due to the simplistic concept, firstly create a new group named ‘Footer and create a new layer. This will form part of the two dividing lines at the top and bottom of the footer. Select the new layer and using the ‘Line Tool’ draw a 1px line that spans across a whole ten grid columns. Set the color of this 1px line to #dedbdb and duplicate the layer – Layer -> Duplicate Layer. Change the color of the new duplicated layer to #ffffff and move it to the bottom of the grey line we just created, merge these two layers to create the dividing line so we can duplicate this to use again at the bottom of the footer.

The Twitter and Dribble Icons are courtesy of Gedy Rivera download the PSD ($5 – well spent) and duplicate the Twitter and Dribbble icons into the PSD. I re-sized each icon to 30px by 30px and set the icon color to #dedbdb.

The Final Result

This is the finished product of the tutorial. (View Large)

Coding the concept…

Subscribe to the RSS feed or follow DesignWoop on Twitter for part two of the tutorial, where I will code the concept from a PSD to a responsive HTML5 single page portfolio.

Tutorial: Getting Started With jQuery Animations

Alexandre Smirnov — Thu, 07 Jul 2011 14:00:34 +0000

DesignWoop welcomes this guest post by Alexandre Smirnov a web designer and developer who lives and works in California.

jQuery. No doubt you have heard about this popular JavaScript library. It has taken the throne of all the JavaScript libraries out there because of its many features and easy syntax. Today, I will show you one of the simpler uses of jQuery: you can animate things. this will be the focus of today’s tutorial.

Before we begin, you should learn one very important thing: this next snippet of code.

The following snippet of code basically says, when the document is ready, do something:

$(document).ready(function(){
//Jquery code goes here
});

This is important because if you don’t use it, jQuery could try to manipulate DOM elements that don’t exist yet. It wouldn’t be able to, and there would be complications.

Now that you know that, we can move on to the article’s focus.

A typical animate function:

$('#something').animate({

});

In order to animate something, you have to give it some parameters. For example what to animate, what the new value is, and how long you want the animation to take.

Let’s include the code that will actually make this work:

$('#something').animate({
	opacity: '0.5'
}, 120);

View the demo

Opacity is what is being animated, and it’s being animated to 0.5. I’m also saying that I want it to take 120 milliseconds to complete. That is the meat of it – however, there are some more things you should keep in mind.

The built in jQuery animate function cannot animate strings. For example, you cannot animate an object from float: left to float: right without doing a lot of extra work. Likewise, you can’t animate colors. If I wanted to animate the color of an element, I would have to use jQuery UI.

Multiple Animations

If you are animating multiple things, you must use commas to separate them. A common mistake is to use a semicolon; Don’t do that!

Here’s what you should do:

$('#something').animate({
	opacity: '0.5', //<-- notice the comma
	height: '10', //<-- notice the comma
}, 120);

View the demo

jQuery assumes by default that the value you are animating is in pixels, so if you are too lazy to write the “px”, you don’t have to. It is also possible to animate “em” and “%”.

Also, the jQuery selector syntax is much like CSS. Notice I have a number sign in front of the “something” text. That would work only if what I’m animating has an ID of “something”. If I wanted to animate all the elements with the class “something” on the page, I would do this:

$('.something').animate({
	opacity: '0.5',
}, 120);

Animate On Hover

Now, you know how to animate elements with jQuery. That’s useful, but what if we don’t want an element to animate the moment the page finishes loading? What if we want it to animate only when we hover over it? Take a look:

$('#something').hover(function(){
 $(this).animate({
 opacity: '0.5',
 });
});

View the demo

What this is saying is, “when you hover over #something, animate its opacity to 0.5. Also, keep this in mind: “$(this)” is a keyword which can be used in instance methods to refer to the object on which the currently executing method has been invoked. In this case, “$(this)” is equivalent to “$(‘#something’)”.

Using Callbacks

Now, back to animating. What if you don’t want it to stay that way, and want it to animate back to opacity: 1 when you hover off of “#something”? This is where callbacks come in.

$('#something').hover(function(){
 $(this).animate({
 opacity: '0.5',
 });
}, function(){
 $(this).animate({
 opacity: '1',
 });
});

View the demo

This snippet of code makes an element animate to 0.5 opacity when you hover over it, and animates it back to 1 when you hover off of it.

Animate On Click

Hovering is a popular way to start a jQuery animate function. However, clicking is also a great way to initialize an animate function.

$('#something').click(function(){
 $(this).animate({
 opacity: '0.5',
 });
});

View the demo

As you can see, the syntax is basically the same. Unfortunately, jQuery doesn’t support click callbacks, so this will be a one-time animation. If you aren’t satisfied with that, there’s a marvelous plugin just waiting for you: Clickoutside.js

Also, a problem with animations is that the queue up. Check out this article for more info: Animations Without Queueing up.

If you want more info, take a look at the official jQuery page on animating.

Well, that’s the end of this tutorial. Good luck!

Do You Support Non Standards-Compliant Browsers

David — Mon, 23 May 2011 10:44:32 +0000

I have written a couple of previous tutorials using HTML5 and CSS3 to create a clean and stylish login form with HTML5 and CSS3 and create a clean and stylish CSS3 menu, the problem designers and developers often encounter when using HTML5 or CSS3 is how best to support older browsers and browsers which do not support features such as border-radius, gradients and text-shadows. The list could go…

Why support old browsers?

It is becoming more common to see websites that no longer support old outdated web browsers, even the WordPress dashboard has discontinued to support IE6. However if a large proportion of your visitors still use IE6, they will be missing out on the aesthetically pleasing eye candy that CSS3 and HTML5 has to offer, you may also inadvertently be serving them a website that is not rendering correctly, thus loosing conversions and repeat business.

In a ideal world, we would not have to include additional scripts to render a web page the same in all browsers. Not all people are technically capable or knowledgeable as to why or how to change or update their browser, so unfortunately we are left with a situation where we have to choose to either support them or disregard their browsing experience.

How to use CSS3 and HTML5 in old browsers

Last week I was searching for a simple, lightweight non intrusive way of easily integrating a Javascript library which will allow older browsers to render CSS3 and HTML5. In particular I was very concerned with including additional JS files and the impact these have on load times, I settled for a small JS script library by the name of CSS3 PIE, whist searching for different JS solutions I found few to choose from, take a look:

CSS3Pie

Head JS

Borderradius.htc

Modernizr

Selectivizr

ie7-js

Questions:

Do you add support for users in older browsers?

Should we add support?

How To Make A Lomo Stye Photo Using Photoshop

David — Mon, 16 May 2011 14:00:04 +0000

Follow this tutorial to see how I recreate the popular lomo style photography effect on a rather dull and dark photo. Photos taken with modern digital cameras lack the processing faults that older cheaper cameras would encounter when processing rolls of film. In this tutorial I will recreate some of the imperfections to create a cool lomo style photo.

Finished Product

Original Photo

Color Adjustments

I first would like to adjust the colors in the photo, they look dull and dark. In Photoshop, select Image -> Adjustments -> Curves.

Select the Channel setting to ‘Blue’ withing the Curves settings, I adjusted the input and output until I was happy with the colors.

How To Create The Vignette

Using the Elliptical Marquee tool in Photoshop, draw out an oval shape selection, I set the feather to 50px and draw the oval to cover a majority of the photo.

Choose Select -> Inverse. With the oval and image still selected, select Image -> Adjustments levels.

This will create a masked layer, allowing you to add a vignette effect around the edges of the oval shape. You can adjust how subtle or how intense you want the effect using the sliders, sliding right will make a lighter subtle effect and sliding left will create a harsh dark shade around the photo.

Additional Effects

I will duplicate the original image layer and add a blur to it. Select the layer and choose Filter -> Blur -> Gaussian Blur. Set the blur radius to 8.0.

Place the layer with the blur effect above all other images so the blur is on top and visible, select the Elliptical Marquee tool and cut out an area roughly similar to the Vignette, set the opacity of the layer to 60%, this will result in subtle blurred edges.

To complete the image, I again duplicated the first image layer, with this I then wanted to add some subtle noise. Select the layer and choose Filter -> Noise -> Add Noise. Set the noise level to 60% and set the layer opacity to 20%. The will add a subtle amount of distortion to the image.

End Result

(View Large)

Lomo Inspiration

If you have never explored lomography, here is a few great examples of lomo photography:

Design Woop | The Web Design and Development Blog » Tutorials

Tutorial: Create A Minimal Single Page Portfolio With HTML5/CSS3

The Design

Resources Used

Basic HTML5 Layout

Header