Photoshop & Web HTML Design & CSS Development Video Tutorials » CSS

HTML / CSS3 Sliding Image Boxes

Steve875 — Mon, 19 Dec 2011 18:39:24 +0000

In this video we dive into some CSS3 and create an awesome looking sliding image box.

Prior to CSS3, I would have wasted a lot of time using JQuery to do this exact same effect. CSS3 is a huge time saver!

You can download the video files here: [ click me to download ]

Programming Social Media Icons

Steve875 — Mon, 12 Dec 2011 06:36:09 +0000

In this lesson we program the social media icons that we designed in a previous lesson.
We use simple CSS and HTML to bring out icons to life.

Be sure to check out the designing of these beautiful Social Media icons.
You can view that video HERE

Corporate Website Series

Steve875 — Sat, 07 Aug 2010 16:09:58 +0000

In this series we create a complete corporate-type website. We begin by showing you how to design the template using Photoshop. Then we go into how to slice and code the website using HTML and CSS.

In this designing series we go through the steps of designing a corporate-style website design.
This is a complete series, from start to finish. From creating a new document to slicing up the template to prepare it for coding.

The final PSD can be found at the bottom of the videos.

Part 1 – Planning the layout

Part 2 – Middle splash zone

Part 3 – 3 Content boxes

Part 4 – Bottom & Sidebar

Part 5 – Finishing up

In this part of the series, we code up the template that we just designed.
We use HTML, CSS, and a little bit of CSS3. Grab a bottle of water and lets get started.

The image files, index.html, and styles.css can be downloaded from the download button at the end the bottom of the videos.

Part 1 – Slicing the template

Part 2 – Navigation Bar

Part 3 – Navigation Bar Styles

Part 4 – Banner Styles

Part 5 – 3 Columns using Divs

Part 6 – Twitter Feed

Part 7 – Content Area & Footer

Modern Navigation Bar

Steve875 — Mon, 24 May 2010 18:43:46 +0000

In this small series, we go from designing all the way to programming a modern-style navigation bar.

Designing the navigation bar:

Programming the navigation bar: Part 1

Programming the navigation bar: Part 2

Lesson files:

Click the following link to download the image files and css/html files.
PixelForLife – nav bar files

Defining A Dreamweaver Website

Steve875 — Sat, 06 Jun 2009 19:51:59 +0000

This is one of the most important steps when you decide to use Dreamweaver.
This should be done before you even create a new page, but if you have already created one, it’s not too late to define your website.

Beginning CSS – part 1

Steve875 — Thu, 11 Dec 2008 05:52:10 +0000

This is part one of many CSS videos.
This tutorial is the absolute beginning of CSS. I introduce you to the basic and most commonly used CSS attributes.
Not only is this video the begging of CSS, but also the beginning of DIV tags. I feel they both go hand-in-hand with each other, so it’s very helpful to learn both at the same time.

How to slice and code a psd website template! Part 3

shandaman — Wed, 10 Dec 2008 17:47:41 +0000

In this 3 part series I walk your through how to slice and then code a psd website template into html / css! Come along for the journey guys!

Download the slice-code-examples now!

How to slice and code a psd website template! Part 2

shandaman — Tue, 09 Dec 2008 15:57:39 +0000

In this 3 part series I walk your through how to slice and then code a psd website template into html / css! Come along for the journey guys!

How to slice and code a psd website template! Part 1

shandaman — Fri, 05 Dec 2008 16:56:39 +0000

In this 3 part series I walk your through how to slice and then code a psd website template into html / css! Come along for the journey guys!

CSS Rollover Buttons

Steve875 — Mon, 01 Dec 2008 07:35:09 +0000

This is a tutorial on creating rollover buttons using CSS/HTML
The program I used for my coding was PSPad

Just incase you can’t understand me, or see what I’m typing, here is a copy of the code:

Images Used:

styles.css:
body { background-color: #708c83;}

/* NAVIGATION */
#navigation {
width:255px;
margin: 0 auto;
}

ul#navigation {
list-style: none;
}
ul#navigation li {
display: inline;
}
ul#navigation li a {
text-indent:-9999px;
display: block;
height: 42px;
float: left;
}

ul#navigation li a.home {
width: 86px;
background: url(“images/btn_home.png”) no-repeat scroll center bottom;
}

ul#navigation li a.about {
width: 84px;
background: url(“images/btn_about.png”) no-repeat scroll center bottom;
}

ul#navigation li a.contact {
width: 85px;
background: url(“images/btn_contact.png”) no-repeat scroll center bottom;
}

ul#navigation li a.home:hover, ul#navigation li a.about:hover, ul#navigation li a.contact:hover {
background-position: top center;
}

index.html