Webstractions - Web Development & Design News

Labels: articles, code, css, design, guide, library, template, tutorials

Starting with the primitives in CSS Tinderbox to the full blown OpenWeb Designs, there are many CSS design concepts to view and demo; multi-column, fixed width, fluid. As well as a little CSS magic with rounded corners, gradient backgrounds and Web 2.0 look and feel.



I liked the look of pogy366's fixed width template Slight Amnesia. Very clean and simple. He came up with this by "flinging code around with no real objective or vision." His main goal was to focus on overall accessibility and browser text-resizing being as painless as possible.

Another style of of pogy's, Tree Hugger, features a single main column with three sub-columns underneath. I am seeing this type of layout pop-up more and more nowadays. It is based on one of CSS Tinderbox's fixed width box templates.

The Bright Side of Life looks familiar to me. It is a three column fixed width design which is blog template ready. Most of the CSS styling is here, comments boxes, comment form, more, yada yada. Nice tweak on the top with a tabbed navigation bar and the contrasting background image makes the page seem to jump out at you.

With over 2300 designs to browse, you could spend hours here. Fortunately they have a half-way decent method of narrowing your viewing selection down by contrast, primary and secondary colors and document validity type. The category search is pretty useless with only 'business' and 'fun' as your only choices. Still it is a nice place to flip through.

Technorati Tags: css, template, design, fixed, width, fluid, demo, free, open, source

Labels: css, demo, design, fixed, fluid, free, open, source, template, width

Labels: alignment, css, div, links, lists, tips, tricks, underline

Web developer cheat sheets still have their place even with the newer editors with auto-completion built into it. Print these bad-boys out and tack them to that cork board next to your workspace, or stack them on your reading material in the loo.

• .htaccess
  
• CSS
  
• Dreamweaver MX
  
• Html
  
• Illustrator CS2
  
• JavaScript
  
• microformats
  
• mod_rewrite
  
• mySQL
  
• Photoshop CS2
  
• PHP
  
• Regular Expressions (RegEx)
  
• XHtml
  

Most of the sheets come from Jack Daniel's cheatsheet area. There are a few more in there for RGB colors and Html entities, but felt that was going a little overboard.

Labels: css, design, html, javascript, mysql, php, regex, web

After writing a simple page such as About, I ran it through the W3C Markup Validator with the Show Outline option ticked to get their slant on the page.



Everything is kosher up until the outline for Graphic Software, then the sidebar headings bled into it. The headings for the sidebar are just general placeholders for menu text to be defined later (as the site progesses).

After seeing this, there seems to be two courses of action to take. One is the easiest, the other is more progmatic.

The easy approach

Easily enough, I can simply change the heading of the sidebar to an H2. This would put the lists in that area within their own 'section' and seperate from the post itself.

The downside is that every post that I make will have this sidebar 'attached' to it in some way. I am not sure if I want that attachment, but semantically it does make some sense.

The harder approach

Since the sidebar is set up as Php include, I can perform a little magic with it. For example there can be 'targetted' topical links included in the sidebar.

This would require a little more effort on my part, but one that I am sure that I can overcome.

I do know that Blogger will publish seperate "tag lists" for the blog posts. How you can discern them from the regular RSS feed is questionable. You would have to take the published Html pages and convert them into an actual feed.

My Sidebar is already set up for the challenge. It is adaptable. It only needs a little encouragement.

Labels: css

IsPopularOnline brings us 53 CSS Techniques you cannot Live Without a compilation of links with thumbnailed representations of each. The list represents the best written articles about CSS that the Internet has to offer and presents them in an eye-catching way. Very sweet one to bookmark.

Labels: css, tutorials

Adam Kalsey has a handy online tool to create those little buttons that everyone is so fond of. The tool uses Bill Zeller's button maker script which is written in PHP, so you could host this application yourself with without much trouble.

UPDATE: It does not appear that the script is available on Bill's site.

VIA: Band of Gonzo Forums

Labels: blogging, css, repub

Dave Shea of Mezzoblue has announced that there will be a book available soon, The Zen of CSS Design. It is due out early 2005, published by New Riders, co-written by Molly E. Holzschlag. The book is available for pre-order on Amazon.com if you look hard enough.

(hint, hover over the book cover at left)

Labels: css, repub

Working with CSS can sometimes present problems other than cross-browser compatibility and hacks. They often lead to large and increasingly unmanageable labors of love. Reuse of your CSS in other designs can be tedious cut and paste jobs, in which you sometimes are just better off starting over from scratch.

Enter FiftyFourEleven's Mike Papageorge with a unique approach of organizing and optimizing your CSS. Mike utilizes modularized stylesheets by function (navigation, colors, hacks etc.) then "stitches" them together with php. The stylesheets themselves are parsed as php also, in which you can comment to your hearts content without worry of that content being sent when the sheets are called from the server.

There are advantages over the normal way of @importing complex function sheets from one basic stylesheet. His method delivers one transparent single stylesheet. He goes a step further with a simple method of Gzip compression and cache control via the php file to deliver this large stylesheet with amazing quickness. An Opera Browser side-effect of actually being able to see individual stylesheets being loaded one after the other is now being served just the one -- and the results (from what I read) are that the page loads very cleanly.

There is a reference in Mike's articles to Andy King's book, Speed Up Your Site, in regards to decompression inconsistencies of .css files between browsers. If you do not have his book, you can still peruse some of the Http compression information at his website.

Labels: css, repub

CSS Filters is a categorized matrix of filters and hacks for CSS and whether or not they will validate or not, or just totally break the browser. The matrix will allow you to display any of a variety of browsers on the market today, and yesterday, via a drop down selection screen.

"Because of the generally crappy CSS standards support in modern browsers, a number of techniques have been developed to hide CSS stylesheets, rules, and declarations from browsers that won't understand or will mis-interpret them, or to set different values to the same CSS property in different browsers in order to achieve the same appearance on all (or most) browsers. On these pages, I've collected a number of these techniques (usually called filters or hacks) and documented what browsers they work on."

The pages are categorized into CSS filtering using CSS only, CSS filtering using (X)HTML, CSS filtering using JavaScript, and Non-validating Hacks for quick and easy referencing.

Labels: css, repub

For those of you who have become accustomed to replacing your heading-text with images, then you know how cumbersome it is to generate the images and to maintain them. It often requires firing up the old PhotoShop, choosing an elegant font in which you use to type in your text, create the image and upload it to the server. Don't forget to update your Html as well. If the heading text changes ... well back to step one. Text styling is dull and boring web design process and can be an all too time consuming process too.

Now you can forget all that nonsense. Using JavaScript and PHP, you can generate accessible image-headings using any font you like. And you don't have to change the structure of your HTML or CSS at all.

Dynamic Text Replacement is an article at A List Apart which describes the process in detail. They also will provide you with the php/javascript files to effect this change.

View the demo to see Dynamic Text Replacement in action, then view the source code. Your browser is displaying images for the heading text, but the source contains simple (and very spider friendly) H1 & H2 elements. No span tags or CSS class elements at all. This is one nifty little trick.

Labels: css, repub

Just released by Price Media - Cascade DTP is a new kind of web page composition tool that harnesses the powerful features of cascading style sheet (CSS) layout and formatting commands.

Until recently, web designers were forced to use HTML tables as a means of controlling the position of page elements. But since the launch of IE5, Netscape 6 and later browsers, over 95% of web users can now view pages written using CSS.

Unfortunately, most of the major web editing packages still incorporate CSS tools as an add-on, which causes confusion and discourages a break with the compromises of the past.

Cascade DTP is different. Nearly all its functions are based entirely on the CSS layout model. The result is far cleaner code and much enhanced control over positioning and typography. This typically means pages download quicker because it is no longer necessary to convert text to images in order to give headings and logos the desired look.

If you want to see what can be achieved with this ground breaking application - look no further. The Price Media website was built entirely using Cascade DTP.

Features:

• Complete freedom to position text and images anywhere on the page


• Custom file format (.cas4) enables you to save layouts and text for further editing


• Precise control of colour for all text and page elements (borders, backgrounds and fonts)


• Numerous typographic settings for font type, size, text justification, letter and line spacing


• Work with embedded or linked cascading style sheets


• Images used as page backgrounds may be set to repeat vertically, horizontally or both


• Full control of scrollbar colour scheme


• Unique 'live' preview of text box appearance enables you to see the affect of changes instantly


• Fully integrated body text and cascading style sheet editors

Labels: css, repub

It has been a while since I have seen a good article come out of A List Apart and this one is a doozy Dynamic Text Replacement in which the author Stewart Rosenberger describes how to create static heading images from text on the fly using any font of your choosing. What you say? Read on.

Text styling is the dull headache of web design. There are only a handful of fonts that are universally available, and sophisticated graphical effects are next to impossible using only standard CSS and HTML. Sticking with the traditional typefaces is smart for body text, but when it comes to our headings - short, attention-grabbing blocks of text - it would be nice to have some choice in the matter. We've become accustomed to this problem and we cope with it either by making the most of the few fonts we have, or by entirely replacing our heading-text with images.

Most sites that replace text with images do so using hand-made images, which isn't so terrible when there are a set number of headings, but it quickly becomes unmanageable on a site that is updated several times per day. However the replacement is performed, each image needs to be bound to the text it is replacing. That binding usually manifests itself as an <img> tag, an embedded style sheet, or a custom id attribute. And over time, through layout changes and redesigns, that binding needs to be managed by someone.

We can forget all that nonsense. No more <img> or <span> tags, no more id attributes or wasted time in Photoshop, and no more messy CSS hacks. Using JavaScript and PHP, we can generate accessible image-headings using any font we like. And we don�t have to change the structure of our HTML or CSS at all.

View the demo to see Dynamic Text Replacement in action. Then read on to find out how you can add the same functionality to your site.

The process does require a javascript enabled browser and PHP enabled server, although the server side scripting can be accomplished in Perl, Coldfusion, ASP or any other flavor of scripting. The scripts are designed to be "flicker free" which is a nice touch.

Labels: css, repub

Here is an interesting graphical effect called the Jog-Shuttle Dial Control. When I first saw it, I thought it was a flash animation. I was wrong. The effect was all controlled with four images, some CSS, and a little bit of javascript thrown in.

The effect is part of Web Page Design for Designers series of articles on Dynamic CSS Animation. Two other effects are demonstrated, a news ticker and a digital timer, both of which give an irritating flicker to the mouse cursor. Still an interesting effect (if you can keep your mouse out of the window).

The website also includes an easy to follow tutorial CSS from the Ground Up, which has some visually fantastic table and list creations in it. Well worth a look at.

Labels: css, repub

A List Apart

This month A List Apart, a veteran in the use of Cascading Style Sheets as part of standards-based web design has published some exceptional demonstrations of the power of CSS.

---

Table Row Highlighting

With a bit of JavaScript / DOM sorcery, we can provide our visitors with row highlighting for long data tables in HTML, by applying rollover states to the rows. This could be implemented tediously by hand, of course, but it would be silly to do so. Instead, we will use the DOM to find the rows to highlight on mouseover.

To see the effect in action

Read the article by Christian Heilmann - The Table Ruler

---

CSS and Email

Most people who’ve attempted to recreate a sophisticated design in HTML email have run into a wall when using CSS, either in the form of inexplicable mangling by email clients or a pronouncement by an email administrator stating that CSS is “against the rules.”

Despite prevailing wisdom to the contrary, you can safely deploy HTML emails styled with good old-fashioned CSS. Not all attributes will be invited to the party, but many of them work flawlessly with this method. If you’re not content to roll over and use font tags in your HTML emails, read on.

Read the article by Mark Wyner - CSS and Email, Kissing in a Tree

---

CSS Sprites: Image Slicing

Say goodbye to old-school slicing and dicing when creating image maps, buttons, and navigation menus. Instead, say hello to a deceptively simple yet powerful sprite-based CSS solution. This article will demonstrate using CSS to create hover buttons, mapping links, and defining irregular shapes. It follows up with the design benefits and pitfalls.

• Single-image CSS rollovers
  
• multicolored Icon Buttons
  
• Irregular Shaped Rollovers
  

Read the article by Dave Shea - CSS Sprites: Image Slicing’s Kiss of Death

---

Rounded Corners in CSS

Part II : Dynamic CSS layouts with customized borders and corners, advances to the next level, extending the technique to work with more complicated backgrounds such as gradients and patterns.

Rounded Corners in CSS Demo

Read the article by Soren Madsen - CSS Design: Creating Custom Corners & Borders Part II

---

More articles on CSS can be found at A List Apart

Labels: css, repub

Making the transition from tables to CSS (Cascading Style Sheets) can be a frustrating process, with cross-browser compatibility one of the major stumbling blocks. But in my opinion it is all worth it. It separates the presentation from the content, and leaves your Html cleaner and easier to read from a spider standpoint.

Changes to the presentation such as font styles, column positioning and dimensioning, border thicknesses and colors, margins, and wide variety of other element attributes are all handled through one external file. Do a View Source on the page you are reading right now, and you will see that there are no tables in this document. You can actually almost read the content with some degree of ease -- and so will the spider. The spider will see more content and less garbage cluttering it's way.

I have found three sites that will get you well on your way to understanding a little more about CSS. The first one is a little old, but the techniques used still apply. What is unique about it is that the CSS is displayed in a text box at the bottom of the page so that you can study it and compare to the actual page. The second one offers a variety of common and useful applications of CSS. And the third, is for more advanced techniques and offers CSS masterpiece showcases to demonstrate just how far you can go with this style of coding.

glish.com - CSS Layout Techniques
If you are looking for help making the transition to CSS layout (Cascading Style Sheets), then go to Eric Costello's glish.com - CSS Layout Techniques. Eric is cataloging many useful cross-browser CSS layout techniques that he can find. All the examples on this site have been reduced to only their essential code, and you will find the source displayed on each page to hopefully make it quick and easy to understand the inner workings of the CSS.

Eric started this collection because of the lack of resources he tried to find when he went looking for information on how to translate typical table based layouts to CSS layouts. You will also find links to various online CSS resources and tutorials, appropriate for both the novice and the seasoned CSS veteran.

The Imposter's Fun with CSS
A well organized list of some of the more common everyday uses for CSS, such as roll-over menus and trees, box positioning, and dynamic stylesheet switching. This gallery of CSS demos can be found at Fun with CSS : Experimental.

There is one bad CSS demo in this collection and that would be the Rounded Edges page. While it is true that CSS will remove the presentation from the page, there are some limitations to it. This demo states that it is a relatively painless way of creating image-free rounded edges with just CSS. It is far from painless, actually it is downright ridiculous when you look at it. You will see what I mean when you see the coding for it. Let's just say that this is a good CSS example of a bad CSS example.

Mezzoblue's CSS Zen Garden Resources
For the intermediate coder, there is Mezzoblue's CSS Zen Garden -Resource Guide. By no means exhaustive, this list has been put together to reconcile helpful CSS tips web-wide in one spot. Expect it to expand over time.

The CSS Resource Guide is just the tip of this iceberg. You will have to visit the their Zen Garden - The Beauty of CSS Design site, it will rock your world. An awe inspiring showcase of what CSS is capable of. Look over on the right side of this page for a list of other CSS showcase sites of which are equally amazing.

Where to go from here
It would be advisable to procure a CSS editor of some type to facilitate the creation of your stylesheets with. I use BradSoft's Top Style Lite which is integrated into my Html authoring software. It does not have as many features as their Pro Version, but it gets the job done and makes a lot of hand typing process easier by auto-filling it in for you. Top Style Lite download page. Top Style Pro is also available for purchase on this same page.

Finally, after you have fooled around and experimented with CSS for a while and you need some advice -- visit the Band of Gonzo's Web Design Support Forum where there are several people around who will be able to answer any of your questions.

Labels: css, repub