There are no other blogs such as Jason Santa Maria’s one. It looks like each post belongs to a different blog. You click “prev” to go to a previous post and when you see it you wonder: “Am I still on the same blog?”. Yes, you’re on the same blog.

As the author himself says, this blog is an experiment: Santa Maria - a truly web design guru - has developed a system that allows him to apply a different style to each post of his blog. Colors, images, fonts, layout - everything changes.

Each article in magazines (the ones made with paper, do you remember about them?) has a different look, why shouldn’t this be possible for blogs too, Santa Maria wondered. And then he went and found a way to style each post in a unique way to consistently support the content. Here is a few screenshots:

Isn’t it amazing?

There’s more…

Jason Santa Maria’s blog is inspirational for other several reasons, such as a rich and informative footer and the use of beautiful typography (if you are wondering, the condensed font he used is Trade Gothic Bold). Oh, and did you notice there is no sidebar?

So, what do you think?

If you’re into web design you had most probably already seen Jason Santa Maria’s blog, but I just couldn’t not write about it. I mean, isn’t it the most inspirational blog you’ve ever seen? Share your thoughts in the comments!

Before we start, you can:

• see the CSS menu we’re going to build
• download the source files (Photoshop file included)

Warning: if the download link doesn’t work, please send me an e-mail so I can fix it. Thanks in advance ;)

Why Build a Menu With Images?

The answer is obvious: to do things you couldn’t do with plain text, like using a texture, a non web-safe font or to create a little more sophisticated hover effect.

CSS Sprites

The best way to build a menu with images is by using a CSS tecnique called CSS sprites. This tecnique consists in using combined images; in the specific case of menus, the CSS sprite combines the graphic images of both the link’s normal state and the hover state.

Why is it convenient to combine two images together? For one, it helps stay us organized (by using CSS sprites we need half of the images we would need by not using them), but more importantly it cuts in half the number of requests sent to the server, reducing the overall time it takes for the page to load.

The Photoshop File

Open a new document at 800×400px. Our menu will be smaller, but let’s keep some extra space for our convenience.

Menu Background

Select the Rectangular Marquee tool from the toolbar, then choose Fixed Size from the Style dropdown menu in the tool options bar. Choose 550px for the width and 50px for the height. This will be the menu size.

Add a new layer by going to Levels > New > Level or clicking on the second icon from the right at the bottom of the Layer palette. Now click anywhere on the document canvas to get a 550×50px rectangular selection. It’s not necessary that it’s perfectly centered but try to go for the center anyway. Create guides around the selection.

Choose a color for the menu background. I went for a dark brown (#514537). Select the Rounded Rectangle tool and make sure that the Shape Layers mode is selected in the tool options bar.

While the rounded rectangle tool is selected, place the cursor over the top left corner of the rectangle created by the four guides, then drag towards the opposite bottom right corner. You should get something like this:

This rectangle will work as the menu background. As a last touch, let’s apply a subtle gradient. Click twice over the rounded rectangle layer to get the Layer Styles window to pop up, and check the Gradient Overlay style in the left column. Click twice on the gradient colors bar, then choose the same color you used for the background as the two colors of the gradient, but make the second one lighter.

If you’re using the same brown I picked, choose a lighter brown (#71604d) as the second color. This is what you get:

Remember that the secret to a good gradient is subtlety. Don’t you fade a midnight dark blue into a midday light blue or a vivid red into a pale pink. The second color must be just a little lighter than the first one.

The Menu Items

We can now take care of the menu items. Our menu has five items: Tutorial, Siti CSS, Risorse, Showcase and Offtopic (the items are in Italian because this is the translation of a tutorial previously written for the Italian blog. This should be no problem to your understanding though).

The menu is 550px wide, so each menu item’s width will be equal to 550 / 5 = 110px. Create a 110×50px rectangular selection (the height is the same as the menu’s) and drag it to the top left corner of the menu background, then create a guide to its right:

Do the same for each menu item until you will have created all necessary guides. Be pixel perfect while creating guides: this will be essential when we’ll slice the images later.

Now for the items. Select the Type tool and choose a font you like; I picked a condensed font called Bebas. Write the five menu items using font size and color appropriate to the background menu you’ve created. If you’re following my lead, select 18px as the font size and white as the color.

We want text to be perfectly centered in each of the five cells created by the guides. To do so, write the menu item, the Tutorial one for example. Create a new 110×50px rectangular selection and place it exactly over the first cell until the selection perfectly snaps to the guides. Select then the Marquee tool from the toolbar (or by pressing V on the keyboard) and in the tool options bar click the Align Vertical Centers icon first and then the Align Horizontal Centers one (they’re highlighted in red in the following image):

Doing so aligns the text at the center of the cell:

Repeat these same steps for each menu item. Tip: to avoid to repeat the horizontal alignment for each menu, duplicate the first text item, replace the text as needed and then move it rightwards using the directional arrows. You’re going to have to align the items vertically everytime, sorry!

Once you’re done, you should have something like this:

Tip: group the items together and name the group (what about Items?). This is an easy tutorial and we’re only dealing with a few layers, but when you’re working on a real project layers easily stack up - renaming them and grouping them is a best practice to stay organized and improve your workflow.

The Hover Effect

The “hardest” part of the job is behind us already. We’re left with creating the hover effect, and that’s just easy. Group all the layers you have so far (except for the white background layer), name it Normal State or something like that, then duplicate it by right-clicking on the group and selecting Duplicate Group from the contextual flyout menu. Rename the group in something like Hover State.

Move the duplicated group upwards until the bottom border of the background menu in the duplicated group is perfectly adjacent to the top border of the background menu in the original group (there must not be any distance between them, not even one pixel). See the following image for reference:

We create the hover effect by changing the text color. I picked an orange (#ffcc00), and here is what I got:

Slicing The Images

It’s time to slice the images needed for the menu. The guides are all there already, you just have to add another one on top of the duplicated menu. Once again, be precise when creating guides: zoom in the page with the Zoom tool if needed.

Select the Crop tool in the toolbar (or by pressing C on the keyboard) and select the first rectangle, the one for the Tutorial menu item:

Accuracy is essential in this step too: the crop area should be exactly as wide as the area surrounded by the guides. Zoom in the page to have a better vision.

Once you’ve created the selection, hit Enter. Only the cropped area will be left in your document. Hide the white background layer in the Layer palette: the first and last menu items have two rounded rectangles each through which you can see the background; if we ever changed the background to a different color those white small bits would be visible, and that’s not what we want. This is the same reason why you should save the menu images in .png format.

You’re now ready to save the image, but before you do that, create a root folder for this project and a subfolder called Images: this is where you will save the sliced images. Save them in .png format.

Repeat this process to slice each and every image sprite needed for the menu. Once you’re done, you should have five images in your image folder.

Alright, we’re done with Photoshop and ready to move on to HTML/CSS coding!

The HTML Code

Open a new HTML document in the text editor of your choice. The most semantic HTML code to use for a menu is a list as a menu is actually a list of items. It’s also necessary to add a class to each link because we’re using different images - I’ll explain this later in greater detail.

    <ul>
        <li><a href="@" class="tutorial">Tutorial</a></li>
        <li><a href="@" class="siticss">Siti CSS</a></li>
        <li><a href="@" class="risorse">Risorse</a></li>
        <li><a href="@" class="showcase">Showcase</a></li>
        <li><a href="@" class="offtopic">Off topic</a></li>
    </ul>

The CSS: The Theory

Here is what we’ll do with CSS: we’ll start by zeroing all default margins and paddings of the list, then we’ll float the <li> next to each other. The rest of the job will all be about the links: we’ll apply the image sprites we’ve created as backgrounds and create the hover effect by playing with the image background position.

The CSS: The Practice

Create a new CSS file and save it in the root folder, then add the following lines:

ul {
   margin: 0;
   padding: 0;
   list-style-type: none; }

li { float:left; }

What we need to do next is to turn links from inline elements in block elements so that we can assign them fixed sizes (if you want to know more about inline and block elements you can read this tutorial about the display property and its values).

a { display: block; }

How big should links be? Each of the image sprites we’ve created is 110px wide and 100px tall. Image sprites include both the normal state image and the hover state image though, while we only want to display the latter on mouse hover. This means we only want to show one half of the image and hide the other half until we hover it. For this purpose, we can go with the image width as it is but we must cut the height in half:

a {
   width: 110px;
   height: 50px; }

Did you ever notice that after clicking a menu item a dotted border is displayed around it? That’s a system to let users know they clicked on something, but in some browsers this border runs across the page rather than just sticking around the menu item. To prevent this from happening, we can add the overflow property in the CSS file:

a { overflow: hidden; }

We should also hide the text so that the image is the only thing displayed. We can do this by shifting the text to the left:

text-indent:-9999px;

The text is usually shifted by 9999 pixels so that it’s not visible even with large screen resolutions. Why not deleting it completely anyway? Because of accessibility issues: if CSS are disabled for any reasons, the user can still read the text link instead of the image.

The Image Sprites As Link Backgrounds

It’s time to assign the image sprites as the links backgrounds.

There are several CSS properties that relate to the use of image backgrounds. In this tutorial we’re going to use three of them:

• background-repeat lets us decide if we want the image to repeat or not;
• background-position lets us set the image position.
• background-image lets us insert the path to the image sprite we want to use as a background.

Background-repeat

We would need the image to repeat if for instance we were using a pattern as a background image. For the purpose of this tutorial though, we don’t need the image to repeat:

a { background-repeat: no-repeat; }

Background-position

The concept behind background-position is a little complex, so pay attention - but don’t be scared!

Let’s consider a single item menu, the Tutorial one. The image sprite for this item is 110px wide and 100px tall. We have agreed we should only display half the image though, which equals to a 110×50px area, and hide the rest until we need it. It’s like this area is the glass of a picture frame: it allows us to see the part of the picture under the glass but covers the part under the frame.

The CSS sprite techniques works pretty much in the same way. We have a picture (the image sprite) and we have a glass (the 110×50px link area) that shows a half of the picture (the normal state half of the image sprite) and hides the other half (the hover state half of the image sprite). The question is, how do we move the picture so that the second half is visible when we hover the menu item?

Enters the background-position. The purpose of this property is in fact to move the background image of an element. But in relation to what should we move it? We need a reference point, which is the top left corner of the link area (see the image for reference).

The background-position property takes two values: the distance of the image from the left of the reference point; and the distance of the image from the top of the reference point. Both values are 0 by default, which means that the top left corner of the background image will perfectly overlap the top left corner of the link area.

Take a look at this image. You can see the 110×50px link area only allows us to see half of the background image. But, wait a second, it’s the hover state half, not the normal state one - how comes?

That’s because we haven’t assigned the background-position property to the link yet, so its default values are 0. To display the other half we should modify the background-position values.

background-position:0 -50px;

And here is what we get:

I’m sure you guess what should we do to generate the hover effect. Take a second to think about it…

a:hover { background-position: 0 0; }

Did you guess? Bravo!

Background-image

Let’s recap all the CSS code we wrote so far:

a {
   display: block;
   overflow: hidden;
   width: 110px;
   height: 50px;
   text-indent:-9999px;
   background-repeat: no-repeat;
   background-position: 0 -50px; }

a:hover { background-position: 0 0; }

The only thing left is to assign each image sprite to its respective menu item. We can do so taking advantage of the classes we assigned in the HTML code:

a.tutorial { background-image:url(immagini/tutorial.png); }
a.siticss { background-image:url(immagini/siti-css.png); }
a.risorse { background-image:url(immagini/risorse.png); }
a.showcase { background-image:url(immagini/showcase.png); }
a.offtopic { background-image:url(immagini/off-topic.png); }

Images With Differents Widths

In this tutorial we have built a menu with images which all have the same width. But what if each image had a different width? In such a case, it’s enough to declare each image width in the group of properties assigned to the respective link classes (the ones for which we assign the background images).

The last code snippet we’ve written would therefore become as following:

a.tutorial {
   width:100px;
   background-image:url(immagini/tutorial.png); }	

a.siticss {
   width:70px;
   background-image:url(immagini/siti-css.png); }

a.risorse {
   width:83px;
   background-image:url(immagini/risorse.png); }

a.showcase {
   width:89px;
   background-image:url(immagini/showcase.png); }

a.offtopic {
   width:94px;
   background-image:url(immagini/off-topic.png); }

That’s It, Folks!

This is the final result. I realize it’s quite a long tutorial but I went in deep detail so that you could really grasp how the CSS sprite technique works. Don’t panic anyway: after a few trials it’ll be easier and more intuitive for you to use.

So, what do you think?

Did you find this tutorial useful? Do you have questions to ask? Share your thoughts in the comments!

There is a good number of websites out there that are awesome in every way. It’s a good number, but not great: perfection is not exactly around the corner. I also happen to see a lot of websites that are just nice but won’t make your jaw drop thinking “Geez, why didn’t I design that?”. Yet some of these websites have really great details, such as a nice color palette or a well designed form.

Enters Bits of Inspiration, a series that showcases nice web design bits.

1. Koodòz Design Menu

http://www.koodoz.com.au/

This menu is very rich and creative. On normal state it features simple white links, but on hover a big effective red arrow and a handdrawn description for the linked section appear. Also, when needed a submenu shows up with a little Javascript magic.

2. Upstruct Contact Page

http://upstruct.com/contact

Using a Google map as a web page background I’d never seen before…

3. Sevenality Color Palette

http://www.sevenality.com/

Ooh, lovely color scheme. Don’t you think?

4. Particletree Comments

http://particletree.com/

I don’t really like how comments are styled on this blog, but they are unconventionally laid out in two columns. I’m not so sure it’s the right way to go as it looks a little hard to understand who commented before who, but it could be fun to pitch the idea and play with a little more.

5. Guggenheim Museum Home Page Slideshow

http://www.guggenheim.org/

I really like the transitions in the Guggenheim home page slideshow. You hover over the next item in the list and the corresponding image slides up vertically. I also like how the text link gets bigger when hovered, although the color transition should have been smoother in my opinion.

6. CSSBuilt Pagination

http://cssbuilt.com/

I was browsing CSS Built for inspiration when my eye was caught by its pagination. It looks very interface-y and I love the color scheme they used. The hover effect is a soft gradient, just like how gradients are supposed to be.

7. Nicole Bishop Header

http://www.nicolebishop.info/

The header of this website is probably not the best crafted one, but the drawing is just fun.

8. Life in Mono Mood

http://www.lifeinmono.net/

I was immediately attracted to this website as soon as I saw it. The graphics set an elegant but welcoming mood that draws you in - it drew me on, at least. I particularly like the header and the vertical menu.

9. Meomi Footer

http://www.meomi.com/

I was almost going to rule out this element from the list because the footer is a Flash animation, but then I thought this series is meant to inspire you, and have you ever thought of using a Flash animation as the footer of your blog? I hadn’t yet. Now I have.

10. Storypixel Diet

http://www.storypixel.com/

Storypixel is the portfolio website of web developer Sam Wilson. Wilson presents himself as a paesant, hence the detail of his professional skills presented as a diet.

It’s actually a nice websites in any way. Beside the strong concept behind it, it features nice graphics, a warm color scheme, good typography and a particular effect on the header - try resizing your browser window…

So, what do you think?

Did you like these bits? Did they inspire you? If you’ve seen something that could qualify for this series and want to suggest it, email me.

The Header

I like the text effect they used for the headline in the header. The slab-serif fonts are run across by a sort of dashed blue “skeleton” which produces a neon effect, or at least that’s my impression.

The Menu

The main menu of this website is just sexy. Each menu option has a circle as a background, which is a rather rarely used shape in web design per se. Each circle has a radial gradient with different colors to differentiate the four menu options. But the nicest aspect is how the circles intersect each other, and since they’re not completely opaque the intersections create some nice light plays.

Such plays are enhancedwhen passing the cursor over the menu options: on hover state a second circle that’s slightly smaller than the first one overlaps it. The result is just nice.

The menu options are intersected thanks to the use of negative margins in the CSS.

The Use of Background Images

The most original and creative detail of this website is the use of background images for the blog posts. Each post is presented by a visually appealing image sided by a box that contains the post title and a small description; the post image is also used as a background with a pixelated effect that I really like.

This same technique is actually used in several other sections of the website, like in the portfolio.

So, what do you think?

Do you like this website? What do you think about the pixelated background images? Share your thoughts in the comments!

Cross-browser compatibility

CSS3 aren’t supported by all browsers yet. The border-radius property is supported by Firefox (since version 3.0), Safari (since version 3.1) and Chrome (since the first version), but it’s not supported by Internet Explorer or Opera (it should be implemented in Opera 10).

Since CSS3 aren’t standard yet, you must add prefixes to border-radius in order to work with the browsers that support it. If you want to work it with Firefox, you must write -moz-border-radius in the CSS; if you want it to work with Safari/Chrome, it’s -webkit-border-radius.

Note that although Firefox, Safari and Chrome support this property, they do so in slightly different modalities. For the sake of simplicity, I’ll first show you how it is supported by Firefox and then explain the differences in Safari and Chrome.

The box

Let’s start by creating the box we will experiment the border-radius property with. In the HTML we simply build an empty box:

<body>
<div id="box"></div>
</body>

In the CSS, we give it a width, a height and a background color:

#box {
   width:590px;
   height:100px;
   background-color:#6B86A6;

Declaring the border-radius property

The border-radius property is declared pretty much like the margin and padding properties. It can be used alone as a shorthand property for all the four angles of the rectangle, or in combination with specific suffixes for each of the four angles.

Declaring the border-radius property as a shorthand property

If used as a shorthand property, assigning just one value will set that value as the radius of each angle:

#box { -moz-border-radius: 20px; }

With this CSS, all four angles will have a 20px radius:

If you assign two values, the first one will represent the radius of the top-left and bottom-right corners while the second one will represent the radius of the top-right and bottom-left corners:

#box { -moz-border-radius:20px 40px; }

With this CSS, the top-left and bottom-right corners will have a 20px radius, the top-right and bottom-left corners will have a 40px radius:

You could also assign three values: the first one will be the radius of the top-left corner, the second will be the radius of the top-right and bottom-left corners, the last will be the radius of the bottom-right corner.

#box { -moz-border-radius:20px 40px 5px; }

With this CSS, the top-left corner will have a 20px radius, the top-right and bottom-left corners will have a 40px radius, the bottom-right corner will have a 5px radius:

Your last option is to assign four values - one for each angle - in this order: the top-left corner radius, the top-right corner radius, the bottom-right corner radius, the bottom-left corner radius:

#box { -moz-border-radius:10px 20px 30px 40px; }

With this CSS, the top-left corner will have a 10px radius, the top-right corner will have a 20px radius, the bottom-right corner will have a 30px radius, the bottom-left corner will have a 40px radius:

Declaring the border-radius property for each angle

If you need to assign the border-radius property to a single angle - maybe to override a previously assigned value - you can do so by adding a suffix to “border-radius” depending on the angle you want to modify.

The suffixes are as follows:

• -moz-border-radius-topleft for the top-left corner;
• -moz-border-radius-topright for the top-right corner;
• -moz-border-radius-bottomright for the bottom-right corner;
• -moz-border-radius-bottomleft for the bottom-left corner;

So if for example you only want to round the top right corner:

#box { -moz-border-radius-topright: 30px; }

Here is what you’d get:

The horizontal radius and the vertical radius

I have so far made examples that assumed that we want each angle to be a perfect quarter circle, so that I could focus on showing you the basic syntax of the border-radius property. But with CSS3 you can also have quarter ellipses rather than quarter circles.

Let’s round the top-left corner of our box with the following CSS code:

#box { -moz-border-radius-topleft: 30px; }

Here is what we get:

The top-left corner is a perfect quarter circle. But let’s add a second value to the above CSS code:

#box { -moz-border-radius-topleft: 30px 15px; }

You can see the top-left corner is now a quarter ellipse. This is because the two values represent the horizontal radius and the vertical radius of the angle respectively. When using one value, the browser interprets that value as assigned for both the horizontal and vertical radii, and therefore renders a quarter circle.

The radii with the shorthand property

How can we declare different values for the horizontal and vertical radii when we use the shorthand property though? Enters the slash. Look at the following CSS code:

#box { -moz-border-radius: 30px / 15px; }

In the above CSS code, the first value works as the horizontal radius of each angle, while the second works as the vertical radius.

The syntax to declare all the other forms of shorthand properties follows the same logic. If we wanted to use different values for both the horizontal and vertical radii of each angle, we would write the following CSS code:

#box { -moz-border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px; }

Here is the result:

Why would you ever want such a rectangle is beyond me ;) But my job here is to present you with all the possibilities. The rest is up to you!

What about Safari and Chrome?

As pointed out at the beginning of the tutorial, everything as described so far works in Firefox, while Safari and Chrome currently use a slightly different syntax (by currently I mean July 13th 2009).

Declaring the border-radius property for each angle in Safari and Chrome

The formulas used to declare the border-radius property for each angle are different in Safari and Chrome. Here they are:

• -webkit-border-top-left-radius for the top-left corner;
• -webkit-border-top-right-radius for the top-right corner;
• -webkit-border-bottom-right-radius for the bottom-right corner;
• -webkit-border-bottom-left-radius for the bottom-left corner;

Note that Safari and Chrome use the same syntax suggested in the W3C CSS3 Working Draft.

Using the shorthand property in Safari and Chrome

Safari and Chrome only support the possibility to declare one value for all the four angles. If you want to assign different values to one or more angles, you’ll have to do so by using the specific properties for each desired angle (as listed above).

The following shorthand property to assign different values for the four angles doesn’t work in Safari/Chrome:

#box { -webkit-border-radius: 10px 20px 30px 40px; }

To get the desired effect, you should change the CSS as following:

#box {
   -webkit-border-top-left-radius: 10px;
   -webkit-border-top-right-radius: 20px;
   -webkit-border-bottom-right-radius: 30px;
   -webkit-border-bottom-left-radius: 40px; }

Horizontal and vertical radii in Safari and Chrome

Safari and Chrome support the possibility to assign different radii with specific-angle properties. To make the top left corner a quarter ellipse, you should use the following CSS code:

#box { -webkit-border-top-left-radius: 30px 15px; }

As to shorthand properties, the only case Safari and Chrome allow for assigning a vertical radius is when all the four angles have the same value. Besides, the syntax doesn’t require a slash; it’s enough to write the two values consequently:

#box { -webkit-border-radius: 30px 15px; }

The above CSS code results in the following image:

Attention, please

I found out about Safari and Chrome inconsistencies by trying different CSS codes - not reading about them somewhere - so I might have made some mistakes. If you actually spot any inaccuracy, please contact me and I’ll correct the tutorial.

What can apply the CSS3 border-radius property to?

The answer is: everything. All border-related properties are applied to the boxes each HTML elements is included in according to the CSS box model. Therefore you can apply border-radius to menus, paragraphs, images, lists, etc. In the following images there are three examples: a paragraph, a menu with rounded links, and another paragraph with a border. Note how the border gets rounded, too:

So, what do you think?

Are you excited about creating rounded rectangles just with CSS? Have you used the border-radius property already? Share your thoughts in the comments!

There is a good number of websites out there that are awesome in every way. It’s a good number, but not great: perfection is not exactly around the corner. I also happen to see a lot of websites that are just nice but won’t make your jaw drop thinking “Geez, why didn’t I design that?”. Yet some of these websites have really great details, such as a nice color palette or a well designed form.

Enters Bits of Inspiration, a series that showcases nice web design bits.

1. Arcade Wordpress theme light spots

http://demo.obox-design.com/arcade/

I really like all the light spots on the Arcade Wordpress Theme. They’re very well crafted and add a metallic feel to the design.

2. Demonico the Day Dreamer headings

http://dthe3d.tumblr.com/

The headings on this Tumblog are very creative and catchy.

3. Carsonified background gif

http://carsonified.com/team/mike/

This gif actually isn’t the background of the whole website but it is only used on the page of one of Carsonified team members. Gifs like this one are probably not the best choice to go with in most cases, but we’re talking about one of the most creative agencies here.

4. Carsonified typography

http://carsonified.com/

Yep, Carsonified new website makes the list once again. I’m a fan of typography so I couldn’t ignore the way they used big Cooper Black headings.

I strongly advice you to browse all the rest of the website because it’s creative in a lot of other ways. Check out how little icons show up hovering on the main menu, how illustrations are consistently used through the whole website and how each page has a different background color. Lots of inspiration.

5. Hope Unlimited color palette

http://www.hopeunlimited.org/

Hope Unlimited uses a nice palette made up of grungy light colors.

By the way, I have created a profile for Blogging CSS over at COLOURlovers where I create palettes from websites with nice colors. Go take a look if you want to ;)

6. 5pieces background texture

http://5pieces.com/

This website isn’t exceptionally designed in my opinion, but I think the background texture is a good one.

7. Mirasim header

http://www.mirasim.com/

I think it’s great how colorful and vivid this website header is. You just can’t not like it.

8. Treforest contact page

http://www.treforestdesign.com/contact.html

The contact page on Treforest portfolio is quite unusual, starting with the nice What can we do for you? headline to the “untidy” layout of the contact information. Huh.

9. James Chambers portfolio layout

http://www.jameschambers.co.uk/

You can totally feel the use of grids on this portfolio website, which features a very clean, tidy and well-spaced layout.

10. Weightshift headline

http://weightshift.com/

This image is an example of how great graphic design can serve a website well. Love it.

So, what do you think?

Did you like these bits? Did they inspire you? If you’ve seen something that could qualify for this series and want to suggest it, email me.

This resource is great for many reasons: first of all, Piervincenzo also shows you how you could create the HTML/CSS from scratch, so it’s basically a tutorial about HTML and CSS; beside this, you can also grab the PSD template which he made available for free download in a previous post; lastly, Piervincenzo will publish another tutorial to show you how to turn this HTML/CSS template into a Wordpress theme. Don’t miss it!

Cross-browser compatibility of box-shadow property

Let me tell you which browsers support the box-shadow property so that you know if you can have fun playing with it with your browser.

Box-shadow is supported by Firefox (since the latest 3.5 version), Safari (since version 3.1) and by Chrome (since its first version). It’s not supported by Internet Explorer (maybe in 9?) and Opera (it should be supported in version 10).

Warning: since the box-shadow property is not standard yet, you’ll need to add a prefix before its name depending on the browser you want to experiment it with. To use it with Firefox the property must be declared as -moz-box-shadow, with Safari and Chrome it must be -webkit-box-shadow.

The box-shadow property values

Box-shadow can take up to four numeric values:

• the first value is the horizontal offset of the shadow;
• the second value is the vertical offset of the shadow;
• the third value represents the shadow blur radius;
• the fourth value represents the shadow spread radius;

The box-shadow property can also take two non-numeric values:

• the exadecimal value of the shadow color;
• the inset word: if assigned, the outer shadow becomes an inner shadow.

The box

Let’s create a box to experiment the CSS3 box-shadow property with. For the HTML we simply add an empty div that will work as our box:

<body>
<div id="box"></div>
</body>

We add some colors and measures in the CSS:

body { background-color:#EBEBDF; }

#box {
	width:300px; height:300px;
	margin:100px auto 0;
/*	-moz-box-shadow:inset 10px 10px 40px 20px #fff;
	-webkit-box-shadow:10px 10px #555;*/
	background-color:#6B86A6; }

Here is our box:

The offset

Let’s add the box-shadow property in the CSS file. Note that for this tutorial I’m using the declaration needed to work with Firefox; if you want to try it with Safari or Chrome just remember to replace webkit with moz.

We only assign a color and the offset values to begin with:

#box { -moz-box-shadow:10px 10px #aaa; }

Here is what we get:

We’ve created a shadow that is offset 10px both horizontally and vertically via CSS.

We could also use negative values: doing so offsets the shadows upwards and rightwards rather than downwards and leftwards. If we assigned the following values to the box-shadow property:

#box { -moz-box-shadow:-10px -10px #aaa; }

we would get something like this:

The shadow is still solid in both cases though. We’ll blur it in the next step.

The blur radius

Let’s add a third value to the same box-shadow property previously declared. This third value represents the shadow blur radius:

#box { -moz-box-shadow:10px 10px 10px #aaa; }

You can see how the shadow is blurred by 10px:

The greater this value the more the shadow is blurred. Negative values are not allowed for blur radius.

The spread radius

I think it’s easier for you to see how spread radius works if we cancel the blur radius for the moment. So let’s make the blur radius 0 and add a fourth 5px value for the spread radius:

#box { -moz-box-shadow:10px 10px 0 5px #aaa; }

Here is what we get:

The shadow has spread by 5px on each side. In the following image I have visualized this by coloring the expansion with a darker gray:

The dark 5px border you see on each side of the shadow is the result of assigning a 5px spread radius via the box-shadow property in the CSS. Remember you won’t see this color difference though: the effective result is the one you see in the previous image.

You can also use negative values for spread radius. If you do, the shadow will contract itself rather than expand:

We can now try applying both a blur radius and a spread radius to see the result:

The inset value

CSS3 also give the option to create an inner shadow exclusively via CSS. To do this, you just need to declare the inset value before all the other ones:

#box { -moz-box-shadow:inset 10px 10px 10px 5px #aaa; }

Here is what we get:

More on crossbrowser compatibility

After going through all the options given by the CSS3 box-shadow property, I should tell you one more thing about crossbrowser compatibility issues. Firefox is the only browser that supports all of the box-shadow property values, while Safari and Chrome don’t support the possibility to apply a spread radius and to create an inner shadow. These two browsers only allow you to offset the shadow, blur it and give it a color:

#box { -webkit-box-shadow:10px 10px 10px #aaa; }

The secret to a good shadow

In this tutorial I’ve created a very visible shadow to clearly show you how the CSS3 box-shadow property works. The secret to a good shadow though is subtlety. For our example, the following combination would have been a good choice:

#box { -moz-box-shadow:3px 3px 12px 0 #999; }

See for yourself:

Experiment

Have fun playing with the box-shadow property, and experiment. You could for example use dark colors for your elements and a light color for the shadow, turning it into a glow.

Although you can apply a shadow to each HTML element, remember to only use it if appropriate and to create subtle shadows ;)

So, what do you think?

Did you know about the CSS3 box-shadow property? Maybe you have already used it on one of your web design projects? Share your thoughts in the comments!

Grammatically speaking, these three properties are very similar. The margin and padding property in particular are declared in the exact same way; the border property on the other hand is declared in a slightly different way. This is why in this tutorial I’m only going to show you how to declare the margin and padding property. You can read about declaring the border property in this tutorial.

Declaring margin and padding properties: a premise

The margin and padding properties can take up to four values: the top margin/padding, the right margin/padding, the bottom margin/padding, the left margin/padding. You can choose whether to declare these values at once or individually.

Declaring the values at once

To declare all values at once, the margin/padding property should be followed by the four values in the same order as above (top value, right value, bottom value, left value):

p { margin:10px 10px 10px 10px; }
a { padding:5px 5px 5px 5px; }

There are shorthand versions of these properties. You can see in the example above the same value is repeated four times. In such a case, you can just declare the value once:

p { margin:10px; }
a { padding:5px; }

If the top value is the same as the bottom value, and the right value is the same as the left value, you can declare just two values: the first one will work as the top/bottom value, the second one as the right/left value. Remember: values have to be assigned in this order, otherwise you’ll get the exact opposite of what you want.

p { margin:10px 20px; }
a { padding:2px 5px; }

There is one last shorthand option. If you have the same value for the right and left margin/padding but two different ones for the top and bottom margin/padding, it’s enough to declare three values: the first one will work as the top value, the second one will work as both the right and left value, the last one will work as the bottom value.

p { margin:10px 10px 5px; }
a { padding:5px 10px 2px; }

Declaring the values individually

If you want to declare your values individually, you have to add suffixes to the margin/padding properties.

Suppose you want to just declare the bottom margin. The CSS property becomes margin-bottom, and it only takes up one value:

p { margin-bottom: 20px;  }
[css]

The syntax is super intuitive: you'll have to add to the margin/padding word a top suffix for the top value, a right suffix for the right value, a bottom suffix for the bottom value and a left suffix for the left value.

[css]
p {
   margin-top:10px;
   margin-right:10px;
   margin-bottom:10px;
   margin-left:10px;
}

a {
   padding-top:5px;
   padding-right:5px;
   padding-bottom:5px;
   padding-left:5px;
}
</div>

<h2>When should I declare the values at once and when individually?</h2>

Using the shorthand properties is much more <strong>convenient</strong>: it saves time and bytes. On a general level, you can declare the values at once the first time you assign margin/padding to a class of elements; if you need to override one of those values for a specific element in that class, you would declare that value individually later on in the CSS. 

[css]
p { margin:20px; }

p.last { margin-bottom:0; }

The second declaration overrides the 20px bottom value assigned with the first one.

This of course is just an idea. You’ll end up developing your own practice to suit to your needs and your coding style.

Remember that many HTML elements have default margins and paddings (headings, paragraphs, lists, ecc.). If you want to have full control, you can zero them at the top of your CSS file like this:

* { margin:0; padding:0; }

The * is called universal selector: the properties assigned to it are inherited by all the elements.

So, what do you think?

Did you find this tutorial useful? There’s still something you didn’t quite understand and need help? Leave a comment!

165 icons in 5 different colors

This is a nice set of 165 icons available in 5 different colors: black (see image), green, blue, red and gray. The download pack includes both the icons jpgs and the soruce file in .ai and .svg formats, so you can edit them to your liking.

165 icons in 5 different colors…

100 Adobe icon sets

Here is a massive collection of over a 100 sets of Adobe products’ icons. Some of them are really great. You could use them in your portfolio to visualize the list of Adobe softwares you can use, for example.

100 Adobe icon sets…

40 social network icons

This 40 social network icon set is really high quality. Icons are in .png format and both in 16×16 and 32×32 sizes (so you actually get 80 icons). To use these icons attribution is required.

40 social network icons…

Twitter icon set

Speaking of social network, here is a sweet free Twitter icon set released by Smashing Magazine. Don’t miss it!

Twitter icon set…

Twitter backgrounds

Yep, yet another Twitter freebie. This is a nice collection of free backgrounds for your Twitter profile page. Each background comes with the Photoshop source file so you can edit to your liking.

Twitter backgrounds…

Blogger templates

Do you run your blog on Blogger? Try Wordpress! Just kidding ;) If you use Blogger you and want to refresh your blog look you can’t miss this collection of very beautiful Blogger templates.

Blogger templates…

5 free form templates

This resource is for web designers only. It’s a collection of 5 CSS form templates. You can preview the template styles here.

5 free form templates…

7 stone textures

7 stone textures…

5 floral textures

5 floral textures…

7 coffee-stained paper textures

7 coffee-stained paper textures…

20 spray and splat Photoshop brushes

This set includes 20 spray and splat brushes. The brushes come in very high resolutions (over 2000px).

20 spray and splat Photoshop brushes…

Light swirl Photoshop brushes collection

There is a ton of light swirl brushes in this collection. Be sure to check it out!

Photoshop light swirl brushes collection…

12 paper Photoshop brushes

These brushes have very high resolutions (over 2000px).

12 paper Photoshop brushes…

8 seamless grungy stars Photoshop patterns

You can download these 8 grungy stars Photoshop patterns also in .jpg formats and use them as textures.

8 seamless grungy stars Photoshop patterns…

6 Midnight Blue Photoshop Patterns

6 pattern per Photoshop

Advent

Advent…

Women’s Fashion Vector Collection

This vector set of clothes and accessories for women was created by Chris Spooner.

Women’s Fashion Vector Collection…