This week, I decided to show you how to create a three column design with a full width header and footer. This is a fairly standard design layout and should really help with productivity.
To begin, we need to denote certain global CSS design coding. So first we need to create the body tag. We want the color of the body to be a nice repeating background, with a black under coloring.
Read the rest of this entry »
Loading ...
Posted on October 9th, 2009 by Christopher Heiss under
Layouts
To begin, I was looking for something more stylized for my date system in wordpress. I thought it would be nice to have it in a block but I didn’t want to cheat and simply make an image. So I came up with a nice solution.
To begin, I needed to decide how I wanted it to look. I chose a block format with the month across the top, the day large and under the month, and the year rotated 90 degrees next to the day.
Read the rest of this entry »
Loading ...
Posted on September 30th, 2009 by Christopher Heiss under
Articles
This week’s tutorial is a step deeper into navigation rollovers. Instead of having the roll over effect on the button the mouse is over, we will add it to all other navigation buttons.
To begin, we need to create our navigation button. First, we make a full navigation bar like below with all the states included.
Read the rest of this entry »
Loading ...
Posted on September 15th, 2009 by Christopher Heiss under
Layouts,
Navigation
Today I am going to show you how, with a bit of cleaver CSS coding, you can make a fairly impressive simple page. Some of the best CSS designs have almost zero hard coding in the base HTML. In this webdesign, we are going to use a scaling background. Since we want the background to scale with the browser size we cannot use a background command.
With that knowledge, let’s build the CSS for our design.
Here we need to set up our master information, basically anything that is standard through out the page we do this by using the Asterisk CSS command.
Read the rest of this entry »
Loading ...
Posted on September 4th, 2009 by Christopher Heiss under
Layouts
Today, we will be following the experimental vain of think for this weeks tutorial. Last week I showed you how to create a rollover animation without creating an animated flash. Now, I will be showing you how to create a gradient overlay on your header and title text.
Read the rest of this entry »
Loading ...
Posted on August 26th, 2009 by Christopher Heiss under
Layouts,
Tools
In the early days of HTML, site design was limited by what could be achieved with simple tables and frames. With the birth of primitive CSS in 1993, was the ability to build more unique sites. Though CSS1 was fairly counter intuitive, the following version CSS2, was much easier to use and was built with HTML tag coding in mind.
CSS2 brought with it many new tips and tricks. Using CSS2, a web designer could create fully interactive menus and transitions previously only achieved within the confines of flash animations and software programming. This meant web designers could fulling flesh out their design imaginations and build some fairly impressive designs.
Read the rest of this entry »
Loading ...
Posted on August 19th, 2009 by Christopher Heiss under
Articles,
CSS Bugs,
Default,
Javascript,
Links,
Lists,
Navigation,
News,
Tools
You will find many ways to create an animated menu from using lengthy JavaScript code to the use of flash actionscripts. Though, with commercial sites in mind, it is better to use a cleaner HTML text approach along with CSS to display an engaging and attractive menu.
Read the rest of this entry »
Loading ...
Posted on July 23rd, 2009 by admin under
Layouts,
Navigation,
Tools
Image mouseover effects are rife on the web. They add some extra design prowess to a project if carefully implemented. The bad side is that if done incorrectly, they can hamper the web site by applying slow loading pages and cross-browser compatibility problems. By using CSS, you can avoid this bad turn of fate by applying some easy styles.
Read the rest of this entry »
Loading ...
Posted on July 16th, 2009 by admin under
Default
Some times as designers, we don’t think about using tools to make our job easier. Either it is pride, or we are just don’t think about it, but we can benefit from tools. Here are some tools that will make your designer life a lot easier.
Read the rest of this entry »
Loading ...
Posted on June 11th, 2009 by Derald under
Tools
CSS coding allows developers to write web friendly code for their clients. Its best to stray away from the old methods of HTML with rollover images using JavaScript as that never produces clean optimized code. The old style OnMouseOut and OnMouseOver functions in JavaScript should be discarded in favor of a clean CSS look and feel.
Read the rest of this entry »
Loading ...
Posted on May 7th, 2009 by admin under
Javascript,
Layouts,
Navigation
