Jan 23
Tags: , ,

When you style links, remember that users don’t read; they scan. You’ve heard that before, and it’s true. So, make sure your links are obvious. They should also indicate where they will take the user.

et’s start by looking at CSS selectors and pseudo-classes:

  • a:link { }
    Unvisited link.
  • a:visited { }
    Visited links.
  • a:hover { }
    The user mouses over a link.
  • a:focus { }
    The user clicks on a link.
  • a:active { }
    The user has clicked a link.

Some Examples:

The TLC

uses not only plaint text links, but also icons to communicate the corresponding file types.

Dont forget about visiting link

Visited links are often overlooked, but they are very helpful, especially on larger websites. Knowing where they’ve been before is helpful for users, whether because they want to avoid pages they’ve visited or to make a point of visiting them again.

Always link your logo to the home page. Most users expect this convention across the Web. That said, don’t assume that users know this. Regular surfers expect it, but a number of users still look for the “Home” link.

Oct 27
Tags: , ,

http://www.slideshare.net/stubbornella/object-oriented-css

Feb 17
Tags: ,

Sure, anyone can write CSS. Even programs are doing it for you now. But is the CSS any good? Here are 5 tips to start improving yours.

1. Reset
Seriously, always use a reset of some sort.
It can be as simple as removing the margin and padding from all elements:
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
2. Alphabetize
By alphabetizing your properties, you are creating this consistency that will help you reduce the time you spend searching for a specific property.
3. Organization
You should organize your stylesheet so that it is easy to find things and related items are close together. Use comments effectively.
4. Consistency
Whatever way you decide to code, stick with it. I am sick and tired of the whole 1 line vs. multiple lines for your CSS debate. There is no debate! Everyone has their own opinion, so pick what works for you and stick with it throughout the stylesheet.
5. Start in the Right Place
When I am preparing to slice a site, I go through and mark-up the entire document from the opening body tag to the closing body tag before even creating a CSS file. I don’t add any superfluous divs, ids, or classes. I will add some generic divs like header, content, footer because I know these things are going to exist.

Utilize CSS’s descendant selectors to target children elements; don’t just automatically add a class or id to the element. Just remember, CSS is worthless without a well formatted document.

Dec 11
Tags: , ,

It is true that coders prefer to write the CSS manually, but at times they look for alternatives to finish the task quickly. And this is where the use of CSS layout generation tools comes.
Apart from these professional coders, many of us also want to code website in CSS, but don’t have any idea how to do it? Let’s discuss some of the simple and easy CSS generation tools that have been of great help in WEBmagix’s project accomplishment process and will definitely be helpful to you.

So, enjoy exploring these Top 5 CSS Layout Generation Tools.

Page Maker - The Generator Form v2.90
CSS Rounded Box Generator
Website Template Maker
Scriptomizers
QrONE CSS Designer

Nov 06
Tags: ,

A technique to create awesome sliding door navigation bar, using one image and css coding. Besides, it is increasing the processing time and bandwidth in loading a site.

View demo | click for tutorial

Nov 03
Tags: , ,

Free CSS Drop-Down Menu Framework not only works on separating HTML from CSS, but takes care of the fact that the CSS definitions are categorized properly, keeping in mind the structural and thematic types. This further creates an entirely new theme!