KnowTeBook - Webworkers Daily Milk » css

Styling Website Comments: Correct Markup and Free Examples

Knowtebook — Tue, 29 Sep 2009 13:14:14 +0000

One of the important and unavoidable features on every website are guest comments. You want your readers to get involved and post comments, it tells you how much they’re interested in the topic and are willing to have their say. The thing that will invite users to read and post comments on your website is taking the extra effort in styling comments properly and make them more readable.

Hop over to Alen’s post to read on

CSS Less: Extend CSS By Adding Variables, Mixins, Operations and Nested Rules

Knowtebook — Mon, 22 Jun 2009 18:33:31 +0000

LESS is an extension to CSS. Less uses existing css syntax. This means you can migrate your current .css files to .less in seconds and there is virtually no learning curve.

The best way to explain Less is to show you some code, so please go ahead and check out the examples below.

Variables

Variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code.

Regular CSS

#header {

color: #4D926F;

}

h2 {

color: #4D926F;

}

LESS CSS

@brand_color: #4D926F;
#header {

color: @brand_color;

}
h2 {

color: @brand_color;

}

How To Build a Clean Modern Website Design From Scratch

Knowtebook — Thu, 14 May 2009 09:58:45 +0000

Build a complete website design mockup in part 1 of this walkthrough for a fictional design studio, starting with the creation of the initial layout then moving on to designing the individual page elements. The result is a modern, crisp and clean webpage layout ready for coding.

After creating the design follow part 2 of this walkthrough of coding up a graphical website layout into valid, standards compliant XHTML and CSS. Starting with the initial process of exporting the individual images from the Photoshop document through to building the complete page.

Use A Body ID To Style Your Website In CSS

Knowtebook — Thu, 28 Aug 2008 12:16:50 +0000

Trevor Davis wrote a convincing article why using ID’s in the body tag makes sense. I often use it to keep different page layouts sorted and inserted an id manually. Now he shows an interesting way using PHP and/or Wordpress. Check out the demo.

photo credit: Raphael Goetter

Reasons to use id’s in Body

Maybe your design has different colors depending upon which section you are in. Instead of having to touch the markup, you can just modify the CSS depending upon the id on the body.
You can control the current states for your navigation.
Maybe the markup on your homepage is a little different than subpages, so instead of creating a different template, just stick in an if statement.

Example

Body

Function

CSS Revolution - Use Condition Rules WITHIN Styles

Knowtebook — Wed, 13 Aug 2008 07:28:12 +0000

Undoubtedly you will have found many a situation where different web-browsers require different style statements. Conditional-CSS addresses this by letting you add Internet Explorer style conditions inline with your CSS statements.

Condition example

Why using it?

Conditional-CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements at both individual browsers and groups of browsers.

Target CSS to any web-browser
Streamline maintenance of your CSS files
Optimise your CSS
Work around those annoying little CSS bugs
Automatic expansion and inclusion of @import statements
It’s free and open source!

Basic usage

The main use of Conditional-CSS is to be able to indicate if a particular CSS statement should be sent to a particular browser or not. Of course you won’t wish to do this often, but it is exceptionally useful when you do need to target a browser.

Any CSS statement or block can be prefixed by a conditional statement, of which there are three basic types:

[if {!} browser]
[if {!} browser version]
[if {!} condition browser version]

To get started with Conditional-CSS use the compiler to download a version suitable for your server platform, and read the usage guide, or see a demo in your own browser (original CSS).

a.button_active, a.button_unactive { display: inline-block; [if lte Gecko 1.8] display: -moz-inline-stack; [if lte Konq 3.1] float: left; height: 30px; [if IE 5.0] margin-top: -1px; text-decoration: none; outline: none; [if IE] text-decoration: expression(hideFocus=’true’); }

Brilliant Ways to Style Blockquotes

Knowtebook — Mon, 21 Jul 2008 17:42:17 +0000

The blockquote XHTML tag is a fairly useful (if somewhat underused) element. Semantically speaking, a blockquote should be used any time you’re quoting a longer piece of text from another source – another speaker, another website, whatever. It’s a way of setting the text apart, and showing that it came from some other source. Stylistically, you could accomplish all this with a special class on your paragraph tags… but that wouldn’t be as semantically useful, now, would it?

Blockquotes do have some styling by default. Most browsers will indent the text in a blockquote tag, which helps the user recognize that the text is different somehow. But who’s to say that we need to stop there? Here are six different ways you could style your blockquotes using CSS.

Stay updated and subscribe to Knowtebook!

CSS Freedom - Redesign HTML Form Elements As You Like

Knowtebook — Sat, 28 Jun 2008 13:20:52 +0000

Ryan Fait presents a method to customize the booring html form elements with css and a little javascript to that you have always dreamed of. It will allow you to use custom images for checkboxes, radio buttons and select lists.

The unobtrusive script gracefully degrades, so if JavaScript is disabled, normal form input objects appear instead of your customized elements. This works flawlessly in Firefox, Safari, Internet Explorer 7, Opera and others. In Internet Explorer, the select lists are unstyled, but the checkboxes and radio buttons still look and function beautifully. Check out the demo.

The technology is pretty similar to that was used on our mediaplana contact site called niceforms (demo here) by badboy. An example is shown below.

If you have a good example for awesome looking forms, please let us know and post it as a comment.

CSS: 7 Free Perfect Multi-column Liquid Layouts

Knowtebook — Thu, 26 Jun 2008 13:51:07 +0000

This series of website layouts use percentage widths and relative positioning, and they work with all the common web browsers including Safari on the iPhone and iPod touch. They’re also ’stackable’ so you can use multiple column types on the one page. This makes the number of possible layouts endless! Follow the links below for the demos and more detailed info:

The main features

No CSS hacks
iPhone & iPod Touch compatible
SEO friendly
Full length column background colours
No Images
No JavaScript
Resizable text compatible
Stackable columns
FREE for anyone to use

Examples

There are also other interesting solutions like the german intensivstation provide. It includes a box modell which is horizontally and vertically centered for example.

CSS Support in Email Clients For Newsletters and More

Knowtebook — Sat, 14 Jun 2008 17:00:03 +0000

Designing an HTML email that renders consistently across the major email clients can be very time consuming. Support for even simple CSS varies considerably between clients, and even different versions of the same client.

CampaignMonitor has put together this CSS support in email clients guide to save you the time and trouble of figuring it out for yourself. With 21 different sets of results, all the major email systems are covered, both desktop applications and webmail.

There is also a good article at sitepoint about how to code html email newsletters.

Inspiration: 8 Fonts you probably don’t use in css, but should

Knowtebook — Sat, 10 May 2008 09:20:25 +0000

CSS has brought us many capabilities in terms of typography and the web, but we always seem to be limited to the same 4-5 typefaces over and over again. There is an inherant problem, if the font you specify isn’t on the viewers computer it won’t render in that font. So as designers and developers we end up selecting the ones that we can safely assume is available on most computers today. So most pages use Arial, Helvetica, or Georgia as their typefaces… and the world of the web remains slightly more bland.

But there are quite a few high quality typefaces that are available on most new computer systems and you can always fall back on the common ones. Of course there are options like creating images, dynamic headlines, and siFR… but all of these techniques increase load time and development time. There are plenty of good reasons to be strategic in the font choices rather than using additional technology. I am shocked at how rarely I see anyone taking advantage of these type options, so here is a quick and dirty list of fonts you should and could use in your desgns and stylesheets.

There also is a good guide to Pre-Installed Fonts in Linux, Mac, and Windows.