Tag Archives: embed

Using @font-face with Dreamweaver CS5.5

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… (more…)

CSS3: Simple Slideout Accordion Menu

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… (more…)

Photoshop CS5: Blending Images into a Website Background

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… (more…)

CSS: Staggering Images down a page

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… (more…)

CSS: How to Create a Staggered Menu Layout

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… (more…)

Working with Images on your Website: Reducing Bandwidth

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… (more…)

CSS: Making Column Backgrounds Full Height Liquid Layout

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… (more…)

CSS Simple Accordion Menu

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… (more…)

CSS3 Image Hover Highlighting

Just a quick little tutorial on how make images appear to highlight when hovered over. If I get more time later today I will make up for how short and sweet this tutorial really is. The effect we are going to create today with CCS3 will work in all modern browsers and is probably one of the easiest to achieve… (more…)

1 2

  • Ripper Web Design