Group items tagged text - Web Development, Design & Programming

Got Bored Of Lorem Ipsum? 22 "Different" Alternatives For Placeholder Text - 1 views

www.webresourcesdepot.com/ernatives-for-placeholder-text

webdesign text lorem selection alternatives

shared by Luciano Ferrer on 01 Mar 12 - No Cached

Luciano Ferrer on 01 Mar 12

"When designing anything with content (websites, brochures, etc.), if you don't have the real content, using Lorem Ipsum is the most common way to fill those spaces. However, for anyone who designs regularly and needs such filler text, it is pretty boring to use Lorem Ipsum again and again. If you want to try an alternative to Lorem Ipsum, there are several web-based generators which are easy-to-use, customizable and, usually, fun. "

<div class="cArrow"> </div><div class="cContentInner">"When designing anything with content (websites, brochures, etc.), if you don't have the real content, using Lorem Ipsum is the most common way to fill those spaces. However, for anyone who designs regularly and needs such filler text, it is pretty boring to use Lorem Ipsum again and again. If you want to try an alternative to Lorem Ipsum, there are several web-based generators which are easy-to-use, customizable and, usually, fun. "</div>

...

Cancel

Quick Tip: Pure CSS Text Gradients | Nettuts+ - 0 views

net.tutsplus.com/...ck-tip-pure-css-text-gradients

css tip Tutorial text nettuts Quick Tip

shared by Jochen Burkhard on 01 Jun 10 - Cached

Jochen Burkhard on 01 Jun 10

With the latest advancements in CSS, we now have access to powerful styling techniques, including box shadows, rounded corners, background gradients, etc. However, we don't currently have the ability to apply gradients to the text itself. Luckily, with a bit of trickery, we can force this effect - at least in webkit browsers! I'll show you how in today's video quick tip.

<div class="cArrow"> </div><div class="cContentInner">With the latest advancements in CSS, we now have access to powerful styling techniques, including box shadows, rounded corners, background gradients, etc. However, we don't currently have the ability to apply gradients to the text itself. Luckily, with a bit of trickery, we can force this effect - at least in webkit browsers! I'll show you how in today's video quick tip.</div>

...

Cancel

The Easiest Way to Create Vertical Text with CSS | Nettuts+ - 0 views

net.tutsplus.com/...-create-vertical-text-with-css

css text design tip webdesign

shared by Jochen Burkhard on 18 Oct 10 - No Cached

Jochen Burkhard on 18 Oct 10

"Earlier this morning, I needed to create vertical text for a project I'm working on. After trying out a couple ideas, I took to Twitter to find what sorts of thoughts our followers had on the subject. There were plenty of great responses and ideas that we'll go over today! "

<div class="cArrow"> </div><div class="cContentInner">"Earlier this morning, I needed to create vertical text for a project I'm working on. After trying out a couple ideas, I took to Twitter to find what sorts of thoughts our followers had on the subject. There were plenty of great responses and ideas that we'll go over today! "</div>

...

Cancel
Jochen Burkhard on 18 Oct 10

Sooo short the tip, so useful.

<div class="cArrow"> </div><div class="cContentInner">Sooo short the tip, so useful.</div>

...

Cancel

The Incredible Em & Elastic Layouts with CSS - 0 views

jontangerine.com/...m-and-elastic-layouts-with-css

blog css tools webdesign typography design fonts text layout web framework layouts em elastic

shared by Soul Book on 01 Apr 10 - Cached

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.)
...

Cancel
All popular browsers have a default font size of 16px. Therefore, at the default browser setting, 1em = 16px.
...

Cancel
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!
...

Cancel
...9 more annotations...
However, (gasp) IE has a problem with ems. Resizing text from medium (default) to large in IE5/6 would lead to a huge increase in font size rather than the gradual one expected. So another selector is needed to get IE to behave: html{ font-size:100%; }
...

Cancel
Let’s give our <body> some more style, and center everything in the viewport (this will be important later for our content wrapper.) Our initial CSS ends up like this: html{ font-size: 100%; } body{ font-size: 1em; font-family: georgia, serif; text-align: center; color: #444; background: #e6e6e6; padding: 0; margin: 0; }
...

Cancel
1 ÷ 16 × 740 = 46.25em (1 ÷ parent font-size × required pixel value = em value)
...

Cancel
While we're here, we might as well add some typographic goodness by selecting a basic leading and adding some vertical rhythm, with everything expressed in ems.
...

Cancel
Set a 12px font size with 18px line height and margin for paragraphs
...

Cancel
Dividing the desired line height (18px) by the element font size (12px) gives us the em value for line height. In this example, the line height is 1 and a half times the font size: 1.5em. Add line height and margin properties to the CSS: p{ font-size: 0.750em; line-height: 1.5em; margin: 1.5em; } Now the browser will say to itself, “Oh, line height and margin is set to 1.5em, so that should be 1.5 times the font size. What’s the font size, again? 12px? OK, cool, make line height and margin 1.5 times that, so 18px.”
...

Cancel
To retain our vertical rhythm we want to set an 18px line height and margin. Easy: If the font size is 18px then 18px in ems is 1em! Let’s add the properties to the CSS (and make the font weight light:) h1{ font-size: 1.125em; line-height: 1em; margin: 1em; font-weight: 300; }
...

Cancel
Jon, good article and very useful chartm but your text sizing method has one major drawback. If elements with font-sizes set in em’s are nested, i.e with lists, these elements inherit the font size. Therefore each child element will be 0.75em (or 75%) of the previous one: See an example here. (Would have posted the code put it was coming out really ugly!) I would recommend against using that method and setting the global font size in the body tag i.e. 'font-size:75%' for 12px. Then only setting different font-sizes where necessary.
...

Cancel
Thanks Will, interesting point, but that is solved with a simple font-size:1em on the first child. Retaining the default ensures that even images are sized correctly in ems. IE (surprise) will compute incorrectly against a parent length equivalent to 12px. My preference born out by some minor but painful computed size errors in complex layouts is not to adjust the body, and only set font size where necessary for specific elements.
...

Cancel

Soul Book on 01 Apr 10

A nice and simple explanation of using EMs to make elastic layouts

<div class="cArrow"> </div><div class="cContentInner">A nice and simple explanation of using EMs to make elastic layouts</div>

...

Cancel

CSS techniques I use all the time - 0 views

www.christianmontoya.com/...-techniques-i-use-all-the-time

blog css tools webdesign typography design fonts text layout web layouts webdev reference code coding

shared by Soul Book on 01 Apr 10 - Cached

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.
...

Cancel
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
...

Cancel
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.
...

Cancel
...3 more annotations...
A typical problem is the following: when a user has the viewport at a size that makes the outer container 999 pixels wide, if the first column is 60% and the second is 40%, IE 6 will always calculate the two columns as 600 and 400 pixels and as a result, the two will not fit (600+400 = 1 more than 999) and it will drop the second column. This is obviously not intended behavior, and in a world where we still have to use floats for columns (I can't wait for display:table support across all browsers), it's important to work around this problem. I used to give my last column 1 less percent (in this example, it would have 39% instead of 40%, but this would usually result in columns that don't quite fill up the container. Of late I have been giving the last column .4 less percent (in this example, 39.6%), which seems to work perfectly. Browsers will calculate this width and round up, but it will still fit even with an odd container width like 999px and I won't have to worry about dropped columns.
...

Cancel
Filtering for Old Browsers To be honest, I barely support IE 6 nowadays. If there is something special about my layout that doesn't work in IE 6, I will simply filter it out of the CSS that IE 6 understands
...

Cancel
Because old browsers like IE 6 don't support the "first child" selector (right caret >), I can do the following to make sure that IE 6 only gets the basic setting and all the new-fangled browsers get the right result: div#container { width:900px; } html>body div#container { width:auto; max-width:900px; } /* This overrides the previous declaration in new browsers only, IE 6 simply ignores it. */
...

Cancel

Soul Book on 01 Apr 10

Excellent simple collection of CSS tips that are easy to remember and implement. It's an old article, but i think everything is still relevant

<div class="cArrow"> </div><div class="cContentInner">Excellent simple collection of CSS tips that are easy to remember and implement. It's an old article, but i think everything is still relevant</div>

...

Cancel