Contents contributed and discussions participated by Soul Book
CSS techniques I use all the time - 0 views
-
EM calculations Sizing text is always an important part of making a usable design. I start all my CSS files with the following rules: html { font-size:100.01%; } body { font-size:1em; } The explanation for this comes from "CSS: Getting Into Good Coding Habits:" This odd 100.01% value for the font size compensates for several browser bugs. First, setting a default body font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. The current "best" suggestion is to use the 100.01% value for this property.
-
I used the following calculation: 14px/16px = .875, 18px/16px = 1.125. So my default text at 1 em would translate to 16px for most users, and my small text I sized at .875em which I can trust to result in 14px for most users, while my large text I sized at 1.125em which I can trust to result in 18px
-
Safe Fluid-width Columns I work with hybrid fluid layouts all the time, usually with max-width set at anywhere from 900 to 1000px. I usually have floated columns with percentage widths, and browsers will calculate these percentage widths to whole pixel values when rendering the columns.
- ...3 more annotations...
The 100% Easy-2-Read Standard - 0 views
-
1. Standard font size for long texts
-
2. Active white space
-
The basic rule is: 10һ15 words per line. For liquid layouts, at 100% font size, 50% column width (in relation to window size) is a good benchmark for most screen resolutions.
- ...3 more annotations...
The Incredible Em & Elastic Layouts with CSS - 0 views
-
Elastic design uses em values for all elements. Ems are a relative size, written like this: 1em, 0.5em, 1.5em etc. Ems can be specified to three decimal places like so: 1.063em. “Relative” means: They are calculated based on the font size of the parent element. E.g. If a <div> has a computed font size of 16px then any element inside that layer —a child— inherits the same font size unless it is changed. If the child font size is changed to 0.75em then the computed size would be 0.75 × 16px = 12px. If the user increases (or decreases) text size in their browser, the whole interface stretches (or shrinks.)
-
All popular browsers have a default font size of 16px. Therefore, at the default browser setting, 1em = 16px.
-
The <body> inherits it unless styled otherwise using CSS. Therefore 1em = 16px, 0.5em = 8px, 10em = 160px and so on. We can now specify any element size we need to using ems!
- ...9 more annotations...
The 1Kb CSS Grid - 0 views
PX to EM conversion made simple. - 0 views
CSS Frameworks CSS Reset: Design From Scratch - 0 views
Color Theory For Designers, Part 2: Understanding Concepts And Terminology - Smashing M... - 0 views
-
ChromaChroma refers to the purity of a color. A hue with high chroma has no black, white or gray in it. Adding white, black or gray reduces its chroma. It’s similar to saturation but not quite the same. Chroma can be thought of as the brightness of a color in comparison to white.In design, avoid using hues that have a very similar chroma. Opt instead for hues with chromas that are the same or a few steps away from each other.
-
SaturationSaturation refers to how a hue appears under particular lighting conditions. Think of saturation in terms of weak vs. strong or pale vs. pure hues.In design, colors with similar saturation levels make for more cohesive-looking designs. As with chroma, colors with similar but not identical saturations can have a jarring effect on visitors.
-
using a hue with a high saturation against a background with low saturation can make the former really stand out.
- ...10 more annotations...
Color Theory for Designers, Part 1: The Meaning of Color - 0 views
Sunday Web Design Roundup (10 Jan 2010) - 0 views
‹ Previous
21 - 34 of 34
Showing 20▼ items per page