Lorem Ipsum - All the facts - Lipsum generator Guitarati Introduction to hCard, Part two: Styling hCards - Opera Developer Community Introduction In the first part of this tutorial, I showed you the basics of the hCard microformat — what it is, how you implement on in HTML, and what tools are available to extract tem form web pages. Now that we know how to create hCards, let’s go through a couple of examples that demonstrate how we might style hCards with CSS to make them fit into the visual design of a web page. Download the full code for the examples in this article. Our first example — styling an existing hCard For our first example, let’s work on the contact card created in the first part of the article, making it a bit more visually appealing with some CSS. <div class="vcard"><div class="fn">Tripper, Jack</div><div class="n">Jack Tripper</div><div class="org">Jack’s Bistro</div><div class="adr"><div class="street-address">834 Ocean Vista Ave. The default rendering of the contact information is shown in Figure 1. This contact card is, at best functional, but uninspiring. Check out the first example running live.
guitarati Red is often associated with feistiness, and bold anger, while a pale blue typically evokes a calmer feeling of a soothed soul. Colors can mean different things for different people, but it's been a long-standing fact that colors are often aligned with certain feelings we have as humans. Color-coding feelings isn't an exact science, but it's a somewhat universal perspective on cataloging anything, including photos and music. Most forms of media also have an emotional component, so why not combine colors and music? Guitarati is doing just that, and it's using colors as its starting point towards helping you find the music you're looking for (see Paul's insightful, initial coverage here). Instead of a text-laden tag cloud, you're immediately greeted with a screen full of colored circles, some bigger than others, just as with any other tag cloud.
How to size text using ems Text for the screen is sized with CSS in terms of pixels, ems or keywords. As most of us know, sizing with pixels is easy: get your selector and give it a font-size – no more thought required. Sizing with keywords is more complicated and requires a few workarounds, but you’re in luck as the techniques are well documented. Why ems? If the world were an ideal place, we’d all use pixels. Keyword-based text sizing will allow all browsers to resize text so this is a possibility, but I don’t find it gives me the precision that pixels would give me. Get on with it OK let’s dive into ems. This takes 16px down to 10px, which apart from being less huge is a nice round number. So this would give us a document where text in the navigation and side bar is displayed at 10px, the main content is 12px and the footer is 9px. A similar job needs to be done on forms and tables to force form controls and table cells to inherit the correct size (mainly to cater for IE/Win): 16 x 0.625 = 10 And so it goes on.
Handy Tips for Creating a Print CSS Stylesheet Print stylesheets often come as a secondary thought on many websites, after all, who prints a webpage anyway?! Despite their slightly infrequent use, a print stylesheet can really help polish the printed document for when it is used. It doesn’t take too long to create, so let’s take a look at some handy tips that you can put into practice on your own site. For this example, we’ll be going through the process of building the print stylesheet for Line25. Being a design blog there’s plenty of articles that users might want to print to refer to; for instance a user might want to print a tutorial to save switching applications; print an article for a meeting; or simply rest their eyeballs from the computer screen and read in bed. Adding some Fancy Styling With a bunch of objects removed the print styling is taking shape, and has dramatically reduced the number of pages in use, which all helps save the world. Display Link Destinations Split Comments Onto a Separate Page The Final Stylesheet
7 Key Principles That Make A Web Design Look Good « Noupe Oct 15 2009 By Juul Coolen Everyone and their grandfather (and dog) seems to have a website these days. “Fortunately” for us designers, not everyone seems to understand what makes or breaks a Web design. So what makes something pretty? These elements are the 7 key principles that make a Web design look good: Balance,Grid,Color,Graphics,Typography,White space,Connection. 1. Balance is all about ensuring that your design does not tip to one side or the other. Example Look at the dog in the header graphic of Khoi Vinh’s Subtraction website below. This is what we call asymmetrical balance, and this is what balance is about. Here below is another example of symmetrical balance, this one by The First Twenty. You will find that every design you think looks good has a well-constructed balance underlying it. 2. The concept of grids is closely related to that of balance. The grid lends itself particularly well to minimalist designs. 5 Thirty One by Derek Punsalan shows why: 3. 4. 5. Font Stacks 6. 7.
Writing an Interface Style Guide Take a look at any CSS-based website design gallery, and you’ll see it’s obvious that beautiful interfaces are being designed and developed in amazing quantities. I frequently look to these sites for inspiration and, beyond a nice design and beautiful code, there’s usually something common about these sites: they’re new. Unfortunately, it’s also common that beautiful interfaces don’t stay beautiful. An interface’s design disintegration can be frustrating to deal with, especially for the designer and developer of that interface; it can be particularly frustrating for the designer and developer who can no longer access the site to fix the issues. If you have ever designed a beautiful interface only to find it ugly five months later because gaudy graphics, unpleasant colors, and distasteful fonts appeared over time, then you understand how maddening design disintegration can be. Design and brand standards#section1 Interface design standards enable brand stewardship. Typography#section3
Awesome Fontstacks Type-a-file Museo SlabMuseo Sans Below you’ll find some text marked up with the core elements of Type-a-file. View the source code to find out how to use them on your own site. This element, for example is called a “kicker.” It’s paragraph text that introduces the rest of the text. It’s useful for outlining your topic & looks killer. The Typographic Basics You’ll often want to caption photos. Paragraphs are the core building block of typography online. It’s different than a sidebar because its content are directly related to the main content at left. I’ve set it up here as a div which contains h1s for titles, as well as paragraphs. If you look at the source code you’ll notice how the .sidenote to the right was written before this paragraph, which it is supposed to directly relate to. These are the simple beginnings of Type-a-file. Puttin’ on the Ritz Sometimes you want an opening phrase to pop. I thought it might be interesting to show you that you can put lists into sidenotes: Robert Bringhurst
Baseline - a designer framework by ProjetUrbain.com “Real” baseline grid on the web When I first started to design Baseline, I wanted to base the grid on the work of Josef Müller-Brockmann, unfortunately some missing CSS attributes — like type leading — kept me from implementing a true grid based approach. I then decided to another look at the basic grid used in print: the baseline grid. Most frameworks and examples of baseline grids simply put the type on a regular line-height, but one problem with this approach is that the text rarely lines up correctly between columns and headlines — H1 through H6. Baseline try to align to the font metric to correctly line up headlines, paragraphs, form labels and any other major elements on the page baseline, creating a harmonious layout. How to use Baseline Baseline can be used in many different ways. Download The .zip file includes the full set of CSS files both for development and deployment, a Photoshop base document and a full set of HTML templates and examples. Going from 0.2 to 0.5 Version 0.5.1