Here’s a great site for taking what you know how to do inside Photoshop and converting it to CSS. It has to do with Layer Styles. And, the interface is just like Photoshop.

Layerstyles.org will write the CSS code to give you the same effects of adding Layer Styles inside Photoshop. The available styles are listed on the lefthand side of the graphic above.

To start, click on the New Style button. This takes you into an editing area that shows you what the current settings look like and allows you to change any settings.

Change your settings as desired in the Layer Style dialog box and the image behind immediately previews those settings.

The background setting allows you to set up different types of gradients: linear, reflected, radial, and cover. You can also easily set the colors of the gradients:

You can also give the box rounded corners:

And the beauty of it all – it writes the CSS code:

The code shows up at the bottom of the window. You can quickly copy it and place it inside your own CSS stylesheet and add any other necessary CSS properties.

Beautiful! Check it out at layerstyles.org.

If you’ve done anything with CSS you have come across IDs, classes, tags, and compounds. These are types of CSS rules.

Let’s cover each one.

Tags

A CSS tag type is used when we are redefining an HTML tag. For example,

h1 {
   font-size: 24px;
   margin: 12px 0 12px 0;
}

We want the h1 headings to be at 24px with a top and bottom margin of 12px. We can use a CSS tag style for redefining almost any html tag. Some of the more common ones are body, paragraph <p>, heading tags<h1>..<h6>, and links <a>.

Classes and IDs

Classes (and IDs) take CSS to another level. It’s great to be able to redefine html tags, but classes and IDs let us create our own tags. The difference between classes and IDs is that one is used only once on a page (IDs) and the other can be used multiple times (classes).

Classes

Let’s say I want to emphasize certain text by using a red color and a bold font. And, I want to  emphasize text several times on a page. I would set up a class as follows:

.redbold {
   color: red;
   font-weight: bold;
}

Classes always begin with a period. When I want to use this class on the page it would look like this:

<p> This is text on a page. <span class="redbold">And this is in red.</span></p>

Another use of classes that I’ve done regularly is creating boxes on the right side. I set up a class to create the box and then use that as many times as needed on the web page. The class would include height and width attributes. See posts below for more info.

IDs

IDs are very similar to classes except that they are used only once on a page (theoretically) and they always begin with the # sign.

For example

#container {
   width: 960px;
}

To use the above ID on a web page I would add the id to a div tag:

<div id="container">
all the information inside the container goes here....including text and html tags
</div>

#rightsidebar {
    width: 250px;
    float: right;
}

#rightsidebar h1 {
     color: red;
}

Recently, I did a post on CSS Layout Generators. I showed you the CSS Portal website. It has a very good layout generator. In this post let’s look at CSS Menu Generators.

CSS Menu Generators do just that. It generates the code (CSS and html) and provides the images for a menu of your choice.

In the three examples below, each sites provides a group of templates. You can customize the menu to show your desired menu options and links. In one of the options, you can also set the color of the menu. In the other options, the color is set by your template selection.

cssmenumaker.com

This one was my favorite. It is very easy to use. It also had the most templates to choose from. You can choose between horizontal, vertical, or drop down menus.

After choosing the type of menu, you add your own menu and links:

As you built the menu, you can preview it at any time:

When completed, you download the CSS, html, and images and plug it into your own site. Very straightforward and easy to use.

cssportal.com

This one is also very easy to use. It doesn’t have the selection that the first one has. It has only horizontal menus and doesn’t offer drop down options. But, it is very straightforward and can be customized just like the one above.

mycssmenu.com

This site also lets you choose between vertical and horizontal options. You can also add drop down menus to both types. This option is probably the most flexible option, but with flexibility comes complexity. It has its own built-in menu editor.

If you are looking for a lot of customization options, this would be the one to use.

All these options can save you time in setting up customized menus for your site.

For those just learning CSS, here is a fantastic tool to help you generate page layouts: CSS Portal. The result is rather generic but it provides a great basis to build on.

They offer more than just CSS for page layouts. On the same site, they offer tools to generate your buttons and your menus. Fantastic!

I didn’t spend much time with the button generator, but between the layout generator and the menu generator you could very quickly come up with the shell of a website.

As with any tool, I’m sure it has it’s quirks, but what a great way to get a quick jumpstart on a website.

There are other layout generator options also available. Check out the section titled “CSS Layout Tools” in this article: 50 Useful CSS Tools and Generators for Developers.

They have a list of eight layout generators, but I found CSS Portal to be the most user-friendly. Be sure to check it out!

What’s your experience with CSS Layout Generators?

This very useful site lets you experiment with various CSS settings, then gives you the option to download the CSS. Beautiful!

And, that’s just the beginning.

Remember, these CSS options are CSS3 – meaning they may not work in older browsers. But, it even helps with that by displaying on the site which versions of browsers the current feature you are working on will work in.  And, it even shows mobile compatibility. Nice!

At the top left of the website is a drop down. Choose the specific CSS3 feature from this list.

You can also choose a feature from the options across the top:

At the top left of the screen, below the drop down feature list, are the parameters for the selected CSS3 property. Experiment with these till you get the look you want.

After setting the properties, I always glance at the Browser Compatibility section to be sure I understand which browsers will handle this CSS3 feature.

At the top right, it shows the code for this feature, and an option to download the code. The Download option will save it as a zip file, making it easy to copy and paste code into your website.

And that, my friends, is CSS3 Maker.

Visit the site and experiment with the latest CSS3 features.

We’ve discussed adding background images to our web pages – as a background for the entire page and as a background for boxes within our web pages. In this post, let’s look at adding background colors (which we’ve covered a bit already) and using gradients as our backgrounds.

Background Colors

As we’ve noticed in previous posts, background color is a CSS property we can add to our entire page, or to boxes (containers) within our page. I often use solid background colors when first designing a page layout – just so I can see where the different areas will be and that they are positioning where I want them to be – all before adding content to a page.

To add a background color that fills the entire browser window, we would add the background-color property to the body tag through CSS:

body {
   background-color: #009;
}

The navy blue color defined above will fill the browser window.

We can do the same for any boxes we define through CSS.

#wrapper {
	background-color: #FFF;
        width: 960px;
        margin: 0 auto;
}

Now, we have an area for the content of the page that is white, with a background color of the navy blue.

We can continue to use the background-color property throughout our boxes of content.

Background Gradients

To add more interest and depth to our pages, I often like to use gradients, or multiple colors in the background.

If you glance at the image at the top of this post, the background colors and gradients is actually an image, repeated across the page horizontally.

After creating the design in Photoshop, I take a sliver of the background area and save it out as a jpg.

The CSS code for the body tag would include the following properties:

 body {
   background-image: url(images/bckground.jpg)
   background-repeat: repeat-x;
}

Suddenly our page has a lot more interest that just a solid background color:

Be creative in the use of background images.

You can repeat an image down the page or vertically within a box.  (background: repeat-y)

You can use an image within an area and have it show up only once, having it fill only a portion of the area. (background: no-repeat)

The possibilities are many. Have fun creating!

Join us Thursday for a free CSS webinar!

This Thursday, July 14th, I will doing a free 1 1/2 hour webinar on CSS. I will be going through step-by-step how to take a sales page that was done using tables and converting it to use CSS without any tables.

During the webinar I will demonstrate step-by-step how to transform the inefficient, cumbersome html document into an efficient, sleek, easy-to-maintain web page. We’ll start with an html document that has over 150 lines of code.  When we’re done, the same html document will have only 50-55 lines of code and no tables. Plus, I’ll show you how to take what we’ve done and apply it over and over to additional sales pages – or to any other type of web pages.

Learning to use CSS

• Reduces clutter – eliminate a lot of extraneous HTML, so it’s easier to edit and alter code.
• Saves time. Design your site faster than using tables.
• Saves money. Shorten the development process and eliminate design obstacles found with using tables.

In this webinar, you’ll learn how to:

• Add CSS for the text layout.
• Add CSS for the box layout.
• Add CSS for your background elements.

Sign up here to join us Thursday morning, from 10-11:30am MDT.

Let’s start by looking at CSS properties relevant to background images, then we’ll look at some examples.

The most important property for background images is

background-image: url(images/bk_top.jpg);

The url parameters specifies the location of the background image relative to where the stylesheet is located.

The other pertinent property is the repeat option:

background-repeat: repeat-x;

The common values for this property are:
repeat-x – repeat horizontally
repeat-y – repeat vertically
no-repeat – just that!
repeat – tile

A background image defaults to repeating across both axis – vertically and horizontally. (aka tiling!)

Let’s apply a background image to a box.

If we want an image ‘behind’ our main box area, we give the body tag a background image. Here’s an example from a site I did recently: (I include the entire style for the body tag)

body {
background-color: #2f261f;
font-family: "Times New Roman", Times, serif;
background-image: url(images/bk_top.jpg);
background-repeat: repeat-x;
color: #fff;
font-size: 15px;
}

I am repeating the bk_top.jpg image across the top of the page, giving us the tire tracks you see below.

In this particular example, I also include a background-color with the CSS style for the body tag. That gives us the dark brown color for the remaining height of the browser window. The bk_top.jpg images fades into the same dark brown color. The image itself is only 270 pixels high, the rest of the background is just the dark brown color. Our goal is to keep our background images as small as possible. Keeping the solid color as a property of the tag vs inside an image helps with this.

We could also give a ‘box’ within our site a background image. We would use the same properties for the CSS style of the box as we saw above for the the body style:

#infobox {
background-image: url(images/logo_top.jpg);
background-color: #FFC;
width: 350px;
padding: 80px 10px 10px 10px;
border: dotted #09F;
}

The result:

Adding background images throughout your site is an effective way to add a lot of interest to your site. A background image doesn’t have to cover the entire box or area. Using the background-repeat property lets us creatively place images within specified areas. Be creative with your background images.

Free Webinar on using CSS!

Join us July 14th at 10am for a free webinar. I will show you how to use CSS to style your web pages. For more info, go here.

In our last post we discussed ‘seeing’ the boxes. In this post, let’s look at creating those boxes.

The beauty of CSS is the ability to place items where we want to on a page. Much of this placement is handled by using nested boxes (aka containers).

Last time we looked at this page layout.

We pointed out the four boxes in this layout.

Let’s begin by creating the box that contains all the other boxes.

Wrapper/Container

#wrapper {
   width: 960px;
   margin: 0 auto;

Header

Main Content

The next area includes all the area below the header.

Rightside Area

In the last post we covered how to create boxes within CSS. Let’s expand that and discuss how we do nested boxes – which is most likely how we will be using boxes within a webpage layout. One box for the entire page, then a collection of boxes within the main box. (By the way, I use the word box. It’s the same as container – which is a common term within the CSS world.) In this post we will just discuss ‘seeing’ the boxes. In the next post, we’ll look at the CSS to create the boxes.

If we don’t accurately see the boxes, we’ll go into CSS without the full picture, and not properly prepared. My experience has been without being rightly prepared, frustration sets in very quickly.

Let’s say we want the following layout:

Let’s discuss each of the four boxes.

The Outer Box

This box includes everything. It’s the wrapper or the container for the rest of the boxes.

The Header Box

This one is the obvious one. It’s the box at the top of the page. This is where the header of the web page will reside.

The Content Box

The Right Side Box

We’ll look at the CSS to create these boxes (also known as a page layout) next time.

In the mean time, try your hand at looking at seeing the boxes. Visit different websites. Draw out common page layouts. Do you see the boxes? How many boxes are there?