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 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.
In this tutorial we will look at the basics of bending a logo around a logo. We will only be looking at the basic of doing ti today. To get a menu to wrap around your logo will require you to fine tune the positioning of menu list items. Every logo is different and every menu item need to be place using CSS individually. So unfortunately there is no cut and paste solution to this problem. However we can show you the basic’s so that you can begin wrapping your menu around your logo as suits you.
This is an image of roughly what it looks like. This is a rough menu and before I used it I would refine the positioning more but it does give you an idea of what is posible using this technique.
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.
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.
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.
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.
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.