Your Customers are Mobile, you will be too …

embed

In this tutorial we will show you the basics of the @font-face CSS3 property and how to use it. Although this guide is geared more towards using in a Adobe Dreamweaver CS6 or CS5.5 development environment it can be used not matter what editor you are using. Even other levels of Dreamweaver can use this tutorial, even though major support has been added to Dreamweaver CS5.5 and CS6 for CSS3 @font-face is not amongst the properties it has been expanded to include. Continue reading

Note: This tutorial has been checked and moved for CS6. For the CS6 tutorial view this tutorial.

In this tutorial we will show you the basic of the @font-face CSS3 property and how to use it. Although this guide is geared more towards using in a Adobe Dreamweaver CS5.5 development environment it can be used not matter what editor you are using. Even other levels of dreamweaver can use this tutorial, even though major support has been added to dreamweaver CS5.5 for CSS3 @font-face is not amongst the properties it has been expanded to include. Continue reading

In this tutorial we will show you how to create a simple accordion menu with submenu’s that expand out smoothly as someone mouses over the top of them. The simple animation we will be using is CSS3 with no javascript however it is supported by all the major browsers except for IE. With IE the menu will still work with all the same functionality it just won’t slide out smoothly. If someone mouses over a sub menu it will just appear, other browsers however it will look great.

This menu is pretty much the same as the Simple CSS accordion menu I did last week but has been tweaked up to include this animation. When Completed the menu will look like this: Continue reading

In this tutorial we will be showing how to create an amazing background blending images into a standard gradient background. For this we will be using the color dodge tool and a gradient mask in Photoshop CS5. We will then combine a few CSS tricks to create our background for a website.

When Completed we should have a back ground image that looks something like this:This is down one side of a website I am working on. The background itself slide under the edge of the page itself where the shadow can be seen.

 

Continue reading

In this tutorial we will show you a simple way of staggering images as they go down your website. With this method if you wish to control the position of a particular photo you still can with inline CSS, however if you do not style a particular image the CSS will automatically stagger your images down the page.

The images will stagger like the images do in this screenshot I took of a test site.Images staggered on a website.

Continue reading

In this tutorial we will learn how to create a staggered menu using only CSS.

Sometimes we want to break up the structure of a website to give it character and staggering a menu up and done or left and right is one possible way to do this. Usually this is done with images and CSS which is not very flexible. If we want to change a menu item we have to change out the images by hand, and all the images are place individually. Now lets look at a way to stagger a text menu up and down using only CSS and HTML. No images, And our menu should look like this when finished.

Continue reading

We all know that the biggest killer of bandwidth on our websites is the use of images, but how do we go about reducing this. What tricks can we use to create the same effect but without the expensive bandwidth totaling up rapidly on us. In this tutorial we will look at a number of methods available to us to reduce our bandwidth whilst maintaining the look and feel of our site.

Continue reading

A common problem encountered by web developers first starting out is making the background of all their columns go full height. Often when we give say our left column one background and our content another the left column’s(or right column) background does not go all the way to the bottom of the page. This throws out the look of the site. So we are told to use a background image in our wrapper that has the same width of the column.

But what happens when we are using a fluid layout? we can’t create an image to be the exact same width of our column if the column width will vary from browser to browser and screen size to screen size. Can we still make our background go all the way to the bottom of the page with a variable width column? Yes we can.

We can even do this for a 3 column liquid layout.

Continue reading

In this tutorial we will be covering the basics of making a simple accordion menu purely with CSS, no Javascript involved. I do have another Accordion Menu tutorial up on here in there parts but it is actually more of a widget than a proper menu, thus why I am doing the Accordion menu tutorial over again.

When Finished our menu will look something like this.

When a menu item with no sub-menu is hovered the hyperlink will turn a deep red but the overall menu remains the same. If a menu item with a sub-menu is hovered than the menu increases in length to show the hidden menu items. As you can see from the image above it will expand dependant on how many items are actually in the sub-menu.

Continue reading

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: