CSS Juice

Adding A Complete CSS Resource To Your Arsenal

Drew Stauffer — Tue, 29 Sep 2009 20:30:25 +0000

Have you ever found yourself looking for a way to do something specifically with CSS that you haven’t done before?

I build out sites for a lot of different companies and whenever I have to build out a site that I didn’t personally design I always run across something that makes me think twice about a certain CSS method.

Today I stumbled (not literally) onto Mega CSS Resource Roundup and I have to say I am very impressed. Here’s a quick list of some of the things the resource included:

CSS for beginers
CSS cheat sheets
CSS shorthand cheat sheets
CSS reference guides
XHTML cheat sheets
HTML cheat sheets
HTML5 cheat sheets
Character entity cheat sheets
RGB and HEX color cheat sheets
Creating CSS layouts from scratch
CSS tricks (beginners)
CSS tricks (advanced)
CSS organization
CSS cross browser techniques
Free CSS templates
CSS positioning guides
CSS and forms
CSS typography tips
CSS graphs
CSS bar charts
CSS line graphs
CSS rounded corners
CSS pull quotes
CSS lists
CSS print page tricks
CSS grid frameworks
CSS 3 resources
Vertical CSS menus
Horizontal CSS menus
CSS menus with flyouts
CSS menus with drop-downs (a ton of menu and nav links)
CSS clean up
CSS creator tools

In the future if you ever have any CSS questions or are looking to do something new and creative you have to check out the Mega CSS Resources Roundup over at Tripwire Magazine.

Comments

10 Useful Free Ajax Tools to Add To Your Toolbox

Stephen Davies — Mon, 14 Sep 2009 21:16:46 +0000

AJAX is the abbreviation for asynchronous JavaScript and XML. In spite of the name, the use of XML and JavaScript is not actually required. AJAX can reduce the bandwidth usage and load time by updating only the content that needs to be updated. There are many useful tools that can use AJAX, and following is a list of some of these features.

1. MooTools Autocomplete. This widget creates a customizable suggestion box from variable data sources for input fields. It provides all basic features from any provided source to create an Autocompleter.

2. Slide Show Viewer.

This is a gallery script that will provide basic slideshow functionality. You can use it for commercial and personal web pages for no cost.

3. AJAX chat.

You only need 3 files to run this chat software, index.html, w.php, and chat.txt. It also comes with a spam filter.

4. Dhoni Show.

This is for anyone who wants to create an easy online gallery. All that needs to be done is to put the images into your html source and the rest will be done by JavaScript.

5. Bouncer.

This neat little tool is an effect that will make your image bounce up and down two times, with the second bounce being smaller than the first.

6. PlotKit.

If you want to use charts and graphs, then this is the tool for you. This not only makes making charts easy, but it can also be fun. It has a short tutorial and works well with all browsers.

7. iCarousel.

When you need to rotate fragments of content, such as headlines or thumbnails, this tool will make it easy. It doesn’t matter what kind of content you are rotating, this tool will be all you need.

8. Reflection.

This is a small download of under 5KB which allows you to add reflections to your images. Reflection opacity and height are easily handled.

9. Frog Js.

This tool is for anyone who has a photo story to show. It is best used when a page by page photo gallery is needed.

10. Table organize.

This enables the user to re-organize columns and rows, as well as use up and down arrows to browse the table.

These are only a few of the many tools you can find useful for AJAX. There are many that are easy to use and don’t require a lot of technical knowledge. They are especially useful in an office environment, and can make dealing with your work a lot easier, and even fun.

CSS Button Animation without Images

Stephen Davies — Tue, 25 Aug 2009 16:21:38 +0000

CSS allows us to omit images from button rollovers. It also can add effects such as animation and glowing tints to any button. This same effect consumes considerably more time if using images; also loading times are higher. CSS solves this problem.

Here are the buttons we shall create:

We can change the color of the buttons to any choice related to the web site color palette. It’s easy to edit the CSS properties. This way, you can omit the use of gifs and jpegs. Of course, flash can add some real style to the button effects but if you just want a simple menu, CSS is the way to go.

Here is the code:

CSS Button Animation Without Images

Option 1

Option 2

Option 3

If faster loading pages are your main concerns, always consider CSS as the solution to gain crisper code.

Create Interactive Web Pages with The Ajax Control Kit

Stephen Davies — Thu, 20 Aug 2009 15:01:23 +0000

Any programmer today knows how crucial .NET technologies are to their development careers. In particular, ASP.NET has caught the eyes of so many development companies that applications are being coded with this language every week. The ASP.NET Control Toolkit is another open source project and allows coders to develop controls and rich applications.

This particular open source kit is backed by Microsoft as this kit is a joint achievement between Microsoft and the growing ASP.NET AJAX community. The kit has various functions that allow speedy development of various applications. If you go to the main site at http://www.asp.net/ajax/AjaxControlToolkit/Samples/, you will notice a foray of user created samples.

Let’s look at some outstanding points on the toolkit:

Simple and easy to use following the Getting Started quick tutorials.
Free library that offers Ajax enabled controls.
Developers can add JavaScript if required.
The kit is compatible with all the latest browser versions for Firefox and Internet Explorer.

Today’s web sites are focused on presenting an interactive web experience. The kit has more than 30 very unique controls to allow developers to create interactive applications. Once you get used to the main controls, it’s a good idea to keep checking the page above for any new controls that have been added. One of the new controls added is an HTML editor for direct edits to the code markup. It’s rather like a visual editor so it can be suitable for most levels of experience.

Us e the tutorials wisely, best to start with the Getting Started section if you are new to .NET and this kit. The kit is backed by a large community like most successful open source projects and they are willing to answer questions on the use of the product.

There are advantages to using a kit that is built on the ASP language. Developers can be immediately familiar with the functions especially if they have used Net AJAX or the jQuery library. Developers have the advantage of expanding on the open source kit by adding new classes if desired.

Developers whom prefer jQuery’s style can use the jQuery UI if desired and combine with the kit where appropriate. Though, it’s entirely possible to just use the toolkit as it offers a high quality control set and ease of use. The developers working on the open source controls are fixing bugs when they crop up. The new releases always have a set of updates referencing new fixes. This is the essence of an open source community that brings together likeminded programmers.

If you are using AJAX and ASP.NET each day of your project cycle, you should consider this enterprising toolkit to be part of your programming software library.

How To Use CSS Margins On Pages

Stephen Davies — Wed, 19 Aug 2009 14:16:02 +0000

Composition is the top factor in web design, how the page elements are positioned in relation to each other. This is where an understanding of white space between elements like text and images becomes important. Spacing should be consistent through every page hence why we use style sheets.

One aspect of spacing is setting margins, and here is a practical example.

This is an example of CSS margins being reset to 0px using a rather long approach for a good default setting for compatibility. A better shorthand version can be:

P {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

As part of a DIV style tag, you could also write this as:

………..

Here are some uses of CSS margins.

Setting a clear blank area around the element allows for good composition on pages by separating elements.
Use of margins allows for separation using transparency and can be adjusted for various top, bottom, left and right element separations.

The margin property has been known to cause some strange behavior when used with DIV tags or TABLES incorrectly where browser versions are concerned. CSS margins manage the white space so that the designer can have control over any compatibility issues. For example, extra care is needed when writing margins for IE6 as this now quite old browser (though still used) has trouble with correctly placing CSS margins and padding values in the window.

For cross-browser compatibility, set your CSS margins to the auto setting. An example is:

margin-left: auto;

This can help rather than specifying like:

margin: 10px 10px 20px 10px;

Using auto will place your fixed width pages according to the screen size as opposed to the browser by placing elements towards the center of the screen. CSS margins allow you to control white space and in so doing you can separate elements for a nice composition result on the page.

These are 2 points to bear in mind when coding your CSS margins and only IE6 can cause major issues e.g. a margin of 5 may be about 7 or 8 in IE6 – remember to check and compensate:

Keep margins consistent across pages and employ enough separation so elements are not looking bunched up on the page.
In contrast, don’t make the margins too large; don’t allow people to have to scroll horizontally.

With a bit of care, CSS margins can work for you rather than against you.

Top CSS Navigation Menu For Commercial Sites

Stephen Davies — Thu, 23 Jul 2009 14:18:51 +0000

Commercial sites need nice clean menu systems that don’t confuse visitors at all. You really do not want to mess around with flashy graphic intensive menus on a site that relies on landing pages being visited to sell products or services. Make it easy for visitors to sift from one page to another. The use of attractive text menus is sufficient.

Here is the CSS menu we shall create:

This is a very easy style to implement as we can change the colors, fonts and size very quickly and easily. Plus, you can integrate the menu anywhere on your web site. Loading time for the menu as it uses CSS and text is fast. If you wish to add menus, this is a very easy customization to apply.

Now, let us work through the code. For most of my tutorials, I assume at least a basic grasp on HTML and CSS. Please comment if further explanation is needed.

Ok, first the header:

Underline Menu Model

This is for those whom use notepad. Others whom use software like Dreamweaver will see this automatically generated. Now, the styles with comments to explain the code:

Now to display the page:

Home

What We Do

Services

Clients

Simply replace the hashes with the URL of the page. You can see how easy it is to add menus to the bar. Top navbar styles in this way are quite popular and they suit the clean code style required by commercial sites today.

Best Ways To Write Clean CSS Code

Stephen Davies — Thu, 16 Jul 2009 19:44:41 +0000

CSS introduced a set of standards some years ago that has continuously improved over the years of its development. CSS has allowed designers to customize their web pages with the least fuss and no repetitive work through the use of styling tags for positioning and layout.

The transition from CSS 2 to 2.1 brought further useful implementations. Though, this doesn’t help much if you write CSS in an untidy fashion. Developers also have to bear in mind the new XHTML compliancy rules. This is not as important as how the developer approaches tags, spacing, and returns in attempts to weave a more readable web page.

Why is clean CSS so important?

Keep aware of these points when writing your CSS code:

1.Use a CSS reset file for cross browser compatibility as this sets any default values to the same value. E.g.
# html, body, div, h1, h2, h3, ul, ol, li, dt, p, table, th, td { margin: 0; padding: 0; }

2.Shorten the CSS code inside braces when applying properties as you may normally do for margins e.g.
p { margin-top: 5px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 10px; }

This can be written as p {margin: 5px 5px 10px 10px; }

3.The use of too much whitespace in your CSS code can increase the file size of your linking CSS files. Try and use single breaks more often. It does look neater when written double-spaced as it has such a nested format but take care with the amount of whitespace.

4.Help the readability of your code before sending it to your clients or employer. One way is to insert your CSS lines in alphabetical order for each class. This will make properties in styles easier to find. This is a useful implementation if you need to also edit CSS code that has been written by someone else.

5.Do not use too many long descriptive comments as once again these can affect the file size. It is best for reasons pointed out above to use comments to aid your own future edification and for other developers to immediately gain an understanding of the code. It’s useful to write the comments in a descriptive and concise way e.g.
/*****Positions Top Menu and Menu Text*****/

6.Whichever methods you use above, ensure that you are consistent in your CSS writing style. I also recommend these CSS tools to help with cleaning up any CSS issues: HTMLPad, W3C Validation service at http://validator.w3.org/ and its CSS checker at http://jigsaw.w3.org/css-validator/, and finally a free tool called CSS Check at http://htmlhelp.com/tools/csscheck/

CSS will always make the difference when used on web sites as opposed to those sites that omit its usage. Cross browser compatibility, formatting and consistency all play major roles in the design of web pages; CSS if written in a clean fashion will produce sharp looking and loading web sites.

How to Deploy Web Projects Fast with Deploy

Stephen Davies — Thu, 25 Jun 2009 19:29:43 +0000

Deployment of web applications to a client or internally within a corporate department can be tiresome if your job involves creating and updating applications on a regular basis. Bespoke applications that perform certain database tasks or serve a purpose such as a financial analysis tool are amongst the hundreds of applications deployed every day.

It can be a repetitive process having to repeat certain deployment parameters every time you deploy an application. In fact, it can be downright tedious particularly if it’s a big application for the web needing XHTML compliancy and the same folders set up each time.

Enter Deploy – a free open source application for developers. The online tool speeds up the entire deployment process by grouping your project folders into the usual structure without any manual setup.

Take a look at the screenshot.

Deploy makes application deployment so easy!

All you need to do is click the radio buttons of choice for the project folder, hit DEPLOY, and the application creates the project folder in seconds. The important aspects to understand here is how the tedious repetitive tasks are minimized. The application produces valid HTML and XHTML compliancy, valid CSS and folders for images, flash and PHP.

Choosing the XHTML compliancy will generate the necessary code depending on:

XHTML 1.0 Strict
XHTML 1.0 Transitional
HTML 4.01 Strict
HTML 4.01 Transitional

This then appends the standard HTML tag to the code:

Then the doctype is set depending on your selection, e.g. if you selected XHTML 1.0 Strict, the appended code is:

If you choose to set up a CSS folder, you can select from 3 choices:

None
Blank – for a blank style.css file
Reset – for cross-browser compatibility (something so easily forgotten)

What’s really great is its bookmarking feature. The application creates a zip file that can be bookmarked so when the developer returns to deploy another application, the zip folder is ready to be created again for the next project folder. So, the framework is structured for you at the click of a button.

From the application, choose the name of your project, and what needs to be included in the project folder. jQuery is widely used with web applications and this can be selected from the radio buttons. Once you hit the DEPLOY button, your project folder contains the files – index file with tags, title tag, and code linking to the CSS and JavaScript files.

The software is cross-platform working for PCs (windows, Linux) and MACs. As a developer, you can streamline your monthly deployment tasks and create project folders in no time at the click of a button – and it’s free!

CSS Tools to Make Design Easier

Derald — Fri, 12 Jun 2009 12:44:01 +0000

One of the dreaded things about design and CSS is repeating the same processes all the time. Things such as creating menus or buttons slow down the process of design, and take away from the designers time that can be spent on other parts of the design. Here are five generators that can help any designer speed up the mundane aspects of design.

CSS Menu Generator

This generator gives you the four different menus which you can create. You have the power over the text, links, and colors used in the menu. The easy of use with this generator will have you creating menus in no time at all.

CSS Layout Generator

The layout generator allows you to create a basic layout using just CSS. This tool takes the headache out of such things as creating a three column layout. You are given a preview of the layout as you create it, which makes it easier to see what you are envisioning in your mind. No matter the amount of expertise you have as a designer, you can get good usage out of this tool.

CSS Button Generator

Buttons are one of the most boring things to design with in CSS. Not only are they boring, but most of the time it can take a long time to get them just right. With CSS Button Generator, you can start creating buttons within a few seconds. Just choose the background color, border color, and enter some text and your buttons are created.

CSS Frame Generator

Having frames on your site has been something that has been used since the creation of HTML. Before CSS, there was the horrible and confusing frame elements in HTML. Shortly after that, iframe came to the web, and has been dreaded by designers ever since. CSS Frame Generator makes it easier to create a “framed” design using just CSS.

PSD2CSS Generator

Alot of time, designers will create a layout in an image editor such as Photoshop. After creating the design concept, the designer moves to coding the concept. Alot of times there has to be changes in the original concept due to either browser issues or limitation with CSS itself. PSD2CSS will help make the original concept easier to design. This tool converts the submitted PSD into CSS code.

Smooth Your Design and Round Those Corners

Stephen Davies — Thu, 07 May 2009 20:33:38 +0000

Designers are constantly looking for methods to make their design work more slick and smooth. There are various ways of doing this with flash as nothing is smoother than vector graphics. Though, CSS is often overlooked still today as a coding toolset for producing some visually impressive web pages. One popular addition to web pages is the use of round edges for buttons and boxes.

These are great for adding a smooth border to text areas that need to stand out on a page such as testimonials and unique selling points around a product. Here is an example and is the one we shall create in this tutorial; we shall create a poll form (just the client-side, this tutorial does not cover server side code like ASP):

The Submit button is just for display in this example so that you as a designer can see the smooth effects of using rounded edges. The file send_poll_data.asp in the code below would need to be created to collect the form data. Firstly, using your favorite paint program, the images for the round corners need to be created. Though on this occasion, I have included them here for you to download. These are the four corner images which will add the round edges to the box.

Download the rounded edges for this tutorial.

Ensure you don’t change the filenames. If you wish to use a different color, either create these in your paint program or simply copy these images into your painting tool, and change the color. In Photoshop, this is easy by using the magic wand tool and fill option from the edit menu.

Now for the code: We need to create CSS style tags that define the properties of the box. The color code for the images is #F58940. The color of the text in the box is set to blue with the hex code: #1523A6. Feel free to change these attributes as per your web page color styles.

We need 3 styles for this to work, these are: .mainbox, .top, and .bottom. The style .mainbox will set the properties of the rounded box, colors and positioning; adjust as necessary for your web page style:

.mainbox { background: # F58940;width: 250px;font: 12px Verdana, Arial, Helvetica, sans-serif;color: #1523A6; }

Also, we shall keep the box away from the edges of the window with:

margin: 0 3px;

We need to ensure that the images for the .top and .bottom styles are not repeated so we add no-repeat.

.top {
background: url(topright.gif) no-repeat right top;
}

The positioning of the image is also needed to be expressed here or you will just have a square box edge as the background color will suppress the images. Append the text right top to the line so the images are displayed on the corners as above.

Ok, so let’s put it all together, here is the full html page code:

Smooth Your Design and Round Those Corners

Once you hit submit, your poll data will be sent to us. Thanks for your time!

Of course, you can change certain parts like the font color, font size, box size, etc. These nice rounded boxes can be used for sales ads, promotions, highlighting a benefit, and so many other uses that can be seen across the web.

Dynamic Font Sizes

Derald — Wed, 08 Apr 2009 18:50:55 +0000

One of the undocumented features on the web is how dynamic it is, especially in a Web 2.0 environment. Even at today, the web has evolved from what it was in the mid to late 90s. In the late 90s every site was static, and if something was to be changed it would take the designer or web master to change the page. Since then, the web has become a even more interactive environments. The script we are going to be coding today is small, but will give viewers of your site a lot of control over the site’s font. While giving the user a lot of control, you can still control the look and feel of your site.

To create the “illusion” that the user has a lot of control over the font on your site, we will be using a little bit of JavaScript with some CSS. JavaScript has become the glue that binds a lot of different technologies with HTML. Using JavaScript, we can return CSS attribute values then edit those value and dynamically replace them. To get the CSS values with JavaScript we are going to be “tapping” into HTML’s DOM Style Object. (You can learn more about HTML’s DOM Style Objects at W3school.com (http://www.w3schools.com/htmldom/dom_obj_style.asp)) The style object we are going to be using is fontSize. Now that we know what style object we will be needing we can structure our JavaScript to retrieve this value. The basic structure is document.getElementById(id).style.fontSize, where id is the id of the element you want to edit. If we had an element name crazy_fonts, then we would use document.getElementById(crazy_fonts).style.fontSize. If the crazy_fonts element had it’s font size set at 12px, then JavaScript will return 12px.

So now that we have can get the font size, we can set what JavaScript is returning to a variable, and work with the variable. Before we change the font size, we will first need to make for sure that the variable we are working with is actually a number. To do that we will use the JavaScript function named parseInt. This function will take any not numeric value and remove it from the variable. So if we use to use something like

var font_size = parseInt(document.getElementById(id).style.fontSize);

We can now store the current font size for any element on a site to the variable font_size. Now that we have a clean numeric number, we can now create a function for the user so that they can change the font size “without” needing to edit any files on the server. Here is the function that we are going to be using.

If you don’t know JavaScript that well, don’t be afraid of the code. We will break the function down and you will see that it is very simple. Let’s start off with the first line. function ChangeFont(id, change){. This is a way to call a function with JavaScript. With this function, JavaScript is expecting two variable, id and change, to be sent to it. These variables are going to be used later in the function, and are passed to the function when the user interacts with the site. More on how that is done later, let’s go to the next part of the code.

var block = document.getElementById(id);
var font_size = parseInt(block.style.fontSize);

Here we see that there are two JavaScript variables being created. Var just basically tells the JavaScript handler, the user’s browser in most parts, that we want to create a variable. In this case we are creating two variable, block and font_size. The variable block isn’t really needed, and you can create the script without it. Block was added to the script to reduce the amount of typing needed to create the code. So now instead of typing document.getElementById(id), we can use block. Speaking of id. When creating the function we pointed that the script will be expecting a variable named id being sent to it. With block we are using that variable. This will allow us to apply this script to any element we would like it to apply to on our site. By passing the element’s id, it makes the code reusable. We already saw the second variable in the code. This variable will store the value set to the font size of the element we are wanting to change. Also, notice how instead of typing document.getElementByID(id) we used the block variable. Now moving to the next nine lines of code.

if (change == ‘increase’){
font_size = font_size + 2;
block.style.fontSize = font_size + “px”;
}
if (change == ‘decrease’){
font_size = font_size - 2;
block.style.fontSize = font_size + “px”;
}

These are two if statements, do basically the same thing, just sightly different. The both if statements are checking the values of the variable change (the second variable passed to the function). Depending on which if statement is triggered depends on what happens. If the value of change is “increase”, then script increases the current font size by two pixels and sets the element’s font size to the new size. If change is set to “decrease”, it does the same thing but decreases the font size by two pixels. After the if statements we close the JavaScript function by using a closing bracket (}). That is it for this part of the JavaScript. To make the script actually work, we will be using JavaScript’s Event features very shortly.

Here is a look at the HTML that we will be using. The HTML will consist of three div elements, and those JavaScript events we were speaking about.

Font:

This font size will change depending on if you click the plus or minus signs..

If you are familiar with JavaScript, then you may understand what is happening, you don’t understand we can clear that up also. Lets first look at the HTML that we do know, and we will get back to the JavaScript Events. You can tell that there is a div element with a plus (+) sign, and one with a minus (-) sign. There is another div element, which has an id of meat. This id can be anything, we are using meat since this is the “meat” section of the page. We can also tell that the id has a font size of 12 pixels which is being controlled by CSS. If we look back at the first two div elements, you will see the JavaScript event onclick. What this event does, is “activates” or runs the JavaScript code when the element is clicked on. What the code is telling JavaScript to do is to run the ChangeFont function that we created, and to send the id and change variables. Depending on which element is click, the script will send meat, and either increase or decrease. All we need to do now is put all the code together and we have a functioning script that will allow the user to change their font size.

‘decrease’)”>-

This font size will change depending on if you click the plus or minus signs..

Designing For Those With Disabilities

Derald — Mon, 23 Mar 2009 21:27:09 +0000

An article on DeveloperFox brings up an important subject, one that most developers seem to forget. That subject is how do people with disabilities use your site?

We can collect all kinds of data for websites, like where people are coming from, what browser they are using, what operating system they are using, but one stat that we really can’t verify is how well does our site work for people with disabilities. So how can you design your site to allow these users to enjoy the site as much as those without disabilities?

One way is to have alternate versions of your site, or ways to modify your current version. CNN does a great job at this on their site. For people who have a partially blind, they added a feature to increase the font size of their site. This can be done with a little bit of JavaScript. The great thing is there are free versions of code which will allow you include this feature into your site.

The DeveloperFox article also talked about people who are color blind. When designing your site, think of colors which are not very similar to each other, especially if your site uses color for important parts of the site like navigation. Colourlovers.com has a great article about how some popular sites like Google and Twitter look to those who are color blind.

The next two disabilities are the oppoisite of each other, but with just a little extra work on a designers part, can be taken care of very easy. The first is blindness. The web, or a computer in general, takes on a completely different role for those who are blind. The World Wide Web Consortium (W3C) has taken steps in both HTML and CSS to make for sure that they provide standards which benefit the blind also. In HTML, there are alt attributes, which can be used by screen readers, help to explain what the image is for those who can’t see the image. CSS even has built in ways to handle different types of equipment that the blind may use while visiting a website. Most designers may not have even heard of them but the are part of the media types which CSS supports. Aural handles information for speech synthesizers, like screen readers. There is also braille, which handles braille devices, and embosses for braile printers.

A great way to test your site to see how friendly it is to those who are blind, is to turn off your monitor or close your eyes, and use a screen reader. This will allow you to find flaws on your site, flaws that people without disabilities may not notice, like a video playing over top of a screen reader.

Deafness is a disability which a designer doesn’t think about. Most designers think of the web as a mix of text, and colors, but the web is starting to expand into a more media centered experience. With video sites like YouTube and Hulu becoming more popular, even smaller sites are starting to get into the video, podcast craze of the web. One suggestion is if you do have audio on your site, create a transcript of the audio. That way those who can’t hear will be able to get the information which they can not hear. Just like expericening your site as those who are blind, turn off the sound on your computer and try to understand what is happening on a video you never saw before. You can then see how much harder it is for those who can’t hear to get information from your site.

For those of use without disabilities it is hard to imagine designing and using the web without the senses that we rely on every day. A really good designer will keep those with disabilities in mind when creating a site. They will be able to make a site enjoyable for both those with and without disabilities.

How to over design with CSS.

Derald — Thu, 19 Feb 2009 22:23:38 +0000

Is there such a thing as an over designed site with CSS? Yes, over designing with CSS can be done. You may think that sounds strange, but it is true. When your visitors are annoyed by something you designed via CSS, then you have over designed. Starting with Internet Explorer version 5.5, Microsoft added their own set of filter and transitions to CSS. These proprietary CSS attributes are only supported by IE, but they will help us describe how you can over design using CSS. Continue reading some examples over where CSS can over step those boundaries that would cause users to be annoyed.

Starting with Internet Explorer version 5.5, Microsoft added their own set of filter and transitions to CSS. These proprietary CSS attributes are only supported by IE, but they will help us describe how you can over design using CSS. The filters that Microsoft was including were suppose to help make web sites seem more like a presentation. At the time this seemed like a great idea, but designers started using them way to much, similar to the blink or marquee HTML tags in the mid to late 90’s. The HTML tags are now looked on as horrible designing because they are hated so much. Why were those tags horrible? They would annoy visitors and designers used them way to much. It was common to see multiple marquees on a webpage in the mid 90s. How does this relate to CSS? Well, the filters that Microsoft created remind users of these horrible designs. Some designers will use the transition filter that Microsoft created to transition all of their site’s pages. This is fine the first time, but when you have to wait for a transition the fifth time, you are wanting to find the designer who created the page and tell him what you think. This is a prime example of where the designer over designed using CSS.

Another example of over designing with CSS, is when you use CSS when you don’t need to use it. Have you even been to a page that changes the default mouse? That is a user who has over designed their site. Having your site use CSS to change your mouse’s cursor to a cross hair is not fun for the user. Most users are use to using the mouse cursor as a way to get information. When you move your mouse over an anchor tag, your mouse turns into a hand pointing at the link. When you hover over text, the mouse cursor turns into a symbol similar to an I. These are very useful to users, they can now tell what “mode” the mouse is in. There are times that changing the cursor maybe useful, such as when you have a list of questions and when a user hovers over the cursor it turns into a question mark.

Don’t change a user’s scroll bar either. This can upset a user very quick. I know personally if I go to a site, and they have changed the way my scroll bar looks, I leave right away. Blending the scroll bar into your site is a nice option, but remember that to the user you are changing their browser. With the latest releases of Firefox and Opera, users can theme their own browser interface to their liking, and you changing their scroll bar is “invasion” on what they like. Yes, you may like the hot pink scroll bar, but to someone who has a light blue theme on their browser they could become upset.

You start to over design with CSS when it starts to annoy the visitor. Annoying your visitor and invading their “private” space is a great way to run users away from your site. Humans are creatures of habits even though we like to think we are not. When you start messing with things that people are familiar with they don’t like it, and when you do it with CSS you are over designing.

Professional Forms using CSS

Derald — Thu, 15 Jan 2009 17:18:34 +0000

In most HTML forums, the user will have text to describe the input field, followed by the field itself. If you have more than one input field then there can be issues with the input boxes where they don’t line up properly. Using div tags and the float attribute you can solve these issues.

For this tutorial we are going to use a generic login to show the effects of the code. For the most basic log in, we need to have at least two input boxes, one for the user’s password, and the other for the user to identify themselves via a user name or id. The HTML code for this type of form is very easy, and very simple.

When you display the code above you may see that text boxes for the user to put in their user name and password doesn’t align properly. To make the form look more professional, these boxes should align with each other. This is were the CSS become very useful. Before we get into the CSS, lets tweak the form by adding some div elements to it. First, we need to wrap the entire form in a div, then wrap the words describing the text fields, and one around the submit button. While doing this we will also give our div tags classes so that it is easier to create our CSS. Our HTML code will now look like this:

As you see we give the div around Name and Password the same class, while the div that wraps the entire form a different class. This is because we want to apply the same style to the divs around Name and Password.

Just like building a house we have to start with a foundation. The div element that is around the form is the foundation for the CSS. It is what will determine the width of the form, and the width of the form will effect the login_input class that we created. So with the login_form class, lets make it have a width of 350 pixels.

Now that we have the foundation, we can start building on top of that. First step we need to do with the login_input class is to create a width. We will give this class 36% width. This will give us 36% of the width of the parent’s (login_form) width, or 99 pixels wide. By setting the width, we know know that the start of the inputs will be 36% from the left of the parent div’s left side and are now aligned vertically. This is also where the first issue arises. With some browsers when you close a div tag, it automatically adds a line break. To solve this we are going to float the div tag to the left, now the div tag act more like a span tag. Depending on your taste, another issue may arise from doing this. Your text is now on the very left side of the login_form div, this can create a lot of white space between the description and the input box. To solve this issue by using text-align and setting the value to right align the login_input class. With all of this new information we can now create an entry in our style sheet for the login_input class.

To give the form a little more of a professional look, we can now float the submit button to the right. This will allow it to align with the very right of our form. If you wanted you could even style the button for the form.

At this point, the alignment for the login form looks very professional. You can enhance the look of the forum by adding background colors, and such to match the theme of your website. You can view an example of the code above here

Web 2.0 Tables

Derald — Wed, 03 Dec 2008 22:06:43 +0000

Have you ever seen a lot of information in a table on the web and wish that you can highlight just one row of that table? Looking very large tables, with out the ability to interact with the table, can make it hard to read the information provided. With a little bit of CSS and the hover and first-child pseudo classes, you can make tables interactive again. You visitors can read information from the table quicker, and it gives your tables a little Web 2.0 flare. Best of all it is easier then you think.

First, lets make a table with some information. In our table we are going to use the population and percentage of the population for Lexington, Kentucky. This information is coming from the 2000 census.

Age Group	Population	Percentage
0 - 5	16146	6.2%
5 - 9	15711	6.03%
10 - 14	14947	5.74%
15 - 19	18422	7.07%
20 - 24	28355	10.88%
25 - 34	44542	17.1%
35 - 44	41824	16.05%
45 - 54	34491	13.24%
55 - 59	11275	4.33%
60 - 64	8625	3.31%
65 - 74	13890	5.33%
75 - 84	9149	3.51%
85+	3135	1.2%

As you can see this is just a basic HTML table. We don’t have any borders are anything added to it. Just looking over this table can be confusing. Adding borders to the HTML may cut down on some of the confusion. You can also tell that the table is not very interactive, and is very bland. Before we create the CSS that will make this table interactive and give it a Web 2.0 flare, we need to go over two CSS pseudo classes.

The first pseudo class we are going to cover is hover. If you have used Javascript and used the onMouseOver event, hover is very similar to that. This pseudo class allows CSS attributes to be applied to an element when the user hovers (hence the name) their mouse over the element. The other pseudo class we are going to use is first-child. This pseudo class allows a designer to apply a still to the first child of an element. In our case the th element is the first child of the tr elements in our table. We will need this pseudo class for a work around once we start applying our CSS. Now on to the CSS.

The CSS for this effect is very simple, but very powerful. We are going to add the hover pseudo class to all the tr elements, that way when a user mouses over a cell in the table the entire row’s changes. To the user they are mousing over a cell in the table, but to the code they are mousing over the entire row. The following allows us to add this effect

tr:hover{
background-color: #FF0000;
color: #FFFFFF;
}

Simple right, well there is a little issue. When the user rolls over the table headers (th) they get the same effect. We don’t want this to occur, so this is where the first-child pseudo class comes into play. We can add both pseudo classes to tr entry in the style sheet to fix this “issue”.

tr:first-child:hover{
background-color: #FFFFFF;
color: #000000;
}

That will fix the issue with the table headers. To explain the code a little more, what is happening is the first-child pseudo class is being applied to the th elements since they are the first elements after the first tr element. The hover pseudo class will only be activated when the user mouses over the table header, and it is set with the default values for the attributes, before the hover pseudo class is activated. This code is actually being activated when the user mouses over it, but since the attributes are the same as when the user does not mouse over the table headers, the user does not even see the code in action.

If you wanted you could go a step further and add a hover pseudo class to the cell that the user is moused over of an additional effect. For this effect you could make the row either a different color, or make the row a lighter shade of the cell background color. Below is an example of the CSS code that will allow you to do this effect.

tr:first-child:hover{
background-color: white;
color: black;
}
tr:hover{
background-color: #FF0000;
color: #FFFFFF;
}
td{
border: black 1px solid;
text-align: center;
width: 100px;
}
td:hover{
background-color: #AA0000;
border: black 1px solid;
width: 100px;
}

A working version of the code can be found here. As you can see from the example, this small amount of code can make your site a lot more user friendly.

ClickHeat

Derald — Wed, 22 Oct 2008 15:06:42 +0000

On CSSJuice, we cover a lot of design ideas. We talk about how to make Web 2.0 effects using just CSS. Having an attractive website is very nice, but how do you know if your site’s layout is working? You can have a survey on your site. This can be effective, but are there other methods? Yes, there are other methods that can be more effective. ClickHeat is one of those methods. Unlike surveys, with ClickHeat the user does not have the option to not use it.

So what is ClickHeat? Well ClickHeat is a small PHP and JavaScript web app that tracks where visitors click on your website. Then ClickHeat allows the collected stats to be shown as a heatmap. For those of you who don’t know, a heatmap is a map that shows areas based on activity using colors based on heat. If an activity happens in a given area very often the color area is red, if it is not then that area is blue. In between there are yellows, green and orange colors based on how often an activity happens. With ClickHeat, the heatmap is based off of how often a user clicks in areas on your site.

ClickHeat is very easy to use. After the installation, which is a wizard based installation like other popular web applications, you go to yourdomain.com/clickheat, then log in. At this point you will have a screen that is split into two areas. At the top is your navigation, where you can choose to look at the heatmap for your site on a daily, weekly or monthly view. There are also filters that allow you to see the heatmap based on the browser used, and screen size. The only other option that you are given is how transparent you would like the heat map to be on top of the page you are looking at.

When looking at the heatmap with your site below it, you can see how ClickHeat can be a powerful tool. At this point you can actually see where people are clicking on the site. This can help you arrange links on your site, and give you areas you can target. If you have a feature that you want to visitors to use more often then you can arrange it around where people are clicking. If you see that one feature is doing really well, you may then promote that feature. The feedback that you get from the heatmap is very valuable and can assist with helping your site grow.

To run ClickHeat all you have to have is a host that supports PHP, JavaScript, and the GD2 library. The official site states that it should work with Apache or Lighttpd web servers, and states that other webservers may work fine. This means that most hosting companies will be able to support ClickHeat. The site also states that it has been tested on Internet Explorer 6 and 7, Konqueror, and Firefox 2.0. The demo for the software also has Opera, Safari, and K-meleon as options in the browser filter.

One of the nice things about ClickHeat is that it is free. This is the data that most websites have a hard time collecting and spend a lot of money on surveys just to get some feedback. ClickHeat alone will not solve all your website problems, but it can help you design a better interface.

Cheat Sheets

Derald — Thu, 11 Sep 2008 15:19:00 +0000

Are cheat sheets beneficial to you designers? So people will say no, while others may say yes. As a designer should you use cheat sheets?

After finding an article about cheat sheets, I got to thinking, are there any negative effects of using cheat sheets? Of course the first one that I thought of was that as a designer you should really learn the syntax of the language you are designing/coding with. Cheat sheets can become a crutch which in the long run may hurt you as a designer. Another negative effect of using a cheat sheet is security issues. When using languages such as PHP, ASP, and other web based languages a cheat sheet does not provide any information on how secure the syntax is list is. It can provide information on how secure it is via a ranking system, but that does not show you how much damage can happen if exploited.

Using a cheat sheet is does have it’s benefits. There are parts of languages that are not used a lot, for example opacity in CSS. This can be a very useful attribute if you need to use it. For attributes that you don’t use a whole lot cheat sheets can be very beneficial. They can help you save time when you are looking for a solution to an issue you may have. Other times, it helps to have cheat sheets that will tell you what browsers support what elements of languages. Not all browsers are alike, and knowing that Firefox does not support transitions like Internet Explorer does will save you a lot of headaches trying to get it to work. Another benefit to cheat sheets is that you don’t have to remember how to remember a lot of stuff, which is why cheat sheets are around in the first place. Remember all of the HTML code for characters such as a greater than symbol is useful if you them a lot, but if you don’t it is simpler to just use a cheat sheet.

Over all cheat sheets have their benefits and their negative effects on any designer. For things that you use everyday you should not use cheat sheets, but for those uncommon attributes that are not used, then a cheat sheet can be beneficial, as long as it does not provide a security exploit.

Basic Select Menus Modifications

Derald — Fri, 05 Sep 2008 12:56:05 +0000

Select menus, also known as drop down menus, are one of the elements in HTML that most people don’t modify at all. I know that some select menus can be confusing as they get longer. One of the things that I like to do is to alternate the colors of the selections. This gives the select element a little bit of style especially when you have more then one choice showing, and can be use as color combination to blend into your site’s theme.

This modification is very simple, and can be very effective. We are going to apply this to a select element that has more then one option showing to take advantage of the effect. If you only have one option showing, as in a true drop down menu, then the change is not as effective. If you don’t remember how to show more then one option in a select element, just add a size attribute inside the select element’s opening tags. Here is how the select element should appear.

The code should look similar to you if you have used the select tag before, only thing that we have done to this HTML code is to add a class attribute to each of the options, and set a size of five to the select menu. We see that the classes alternate as either odd or even. Now all we need to do is create the CSS to apply to the classes.

The CSS will be basic, just like the HTML. For the even class we are going to have a gray background with a white foreground color, and the opposite for the odd classes.

CSS Juice

Adding A Complete CSS Resource To Your Arsenal

10 Useful Free Ajax Tools to Add To Your Toolbox

CSS Button Animation without Images

Create Interactive Web Pages with The Ajax Control Kit

How To Use CSS Margins On Pages

Top CSS Navigation Menu For Commercial Sites

Best Ways To Write Clean CSS Code

How to Deploy Web Projects Fast with Deploy

CSS Tools to Make Design Easier

Smooth Your Design and Round Those Corners

What is your opinion of the web site?

Dynamic Font Sizes

Designing For Those With Disabilities

How to over design with CSS.

Professional Forms using CSS

Web 2.0 Tables

ClickHeat

Cheat Sheets

Basic Select Menus Modifications