Feb 15
Tags: ,

Use CSS3 to Create a Dynamic Stack of Index Cards
We will create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling).

How To Create A Vertical Sliding Panel Using jQuery And CSS3
So, what about a vertical sliding panel that would act as some sort of drawer instead of the usual top horizontal sliding panel that pushes everything else down when it opens? While thinking of alternatives to the usual horizontal panels, I thought it would be nice to create something that works in a similar way, but that is a bit more flexible.

Awesome Overlays with CSS3
The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. To create that effect we used to the border-image property, which is a tricky little addition to CSS.

Feb 15
Tags: , ,

Quommunnication Stencil Kit
A PSD file with common design elements for sketching and wireframing: form elements, RSS feed icons, colors, Advertising units, browser windows and grids

Facebook Applications Stencil Kit
A pretty sizable collection of Facebook related elements to use in creating wireframes for Facebook applications.

Free Sketching & Wireframing Kit
The Sketching & Wireframing Kit is a free set of elements for sketching and wireframing. It consists of form elements, icons, indicators, feedback messages, tool tips, navigation elements, image placeholders, embedded videos, sliders and common ad banners. The Kit comes in two vector formats, one for Adobe Illustrator and the other in SVG, which can be easily modified. It can also be downloaded in PDF and EPS formats.

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

Aug 30
Tags: , , ,

A new method of comparison using Infographics has come up. As an example see, the infographics that depicts whose the best contender: Facebook or Twitter.

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.