Tag: text

CSSWARP – CSS Text to Path Generator

CSS3Warp is a proof of concept: create Illustrator like "warped" text text following an irregular path with pure CSS and HTML…
csshead 0 Comments

CSS properties that affect type rendering

When it comes to type rendering on the web, there’s not much web designers can do. The way fonts appear on screen is mostly due to operating systems, browsers, typeface designs, font files, and how those font files are (or are not) augmented with instructions for the most unforgiving rendering scenarios. But in some cases, […]
csshead 0 Comments

CSS Run-in Display Value

CSS has a value for the display attribute called run-in. It allows a header to run into text below it, without sacrificing semantics or running into the problems you might run into trying to force it with other layout techniques…
csshead 0 Comments

The New Lens Flare – CSS3

By abusing the text-shadow property, you can turn any ho-hum bit of text into a magnificent, radiant beacon of allure and awe. But getting your bling-bling on has never been for the cheapskates. Expect to pay a boatload in refresh rates, as your browser buckles under the weight of rendering that glorious halo…
csshead 0 Comments

CSS Word-Wrap: Force Text to Wrap

A rarely used but extremely useful CSS property, the word-wrap. You can force long unbroken text to wrap in a new line by specifying break-word with the word-wrap property. For example, you can use it to prevent text extending out the box and breaking the layout. This commonly happens when you have a long URL […]
csshead 0 Comments

How to Create a Cool Anaglyphic Text Effect with CSS

Anaglyphs are those amazing 3D images that are created by offsetting two of the red, green and blue channels, and are viewed with those nerdy looking 3D glasses with different coloured lenses. I don’t know if this effect works for real, as I’ve unfortunately misplaced my 3D specs, but it’s a pretty cool text effect […]
csshead 0 Comments

CSS Font-Sizing: a Definitive Guide

Font sizing in CSS sounds as though it should be easy. Until you try it. Many developers use the force; they tinker with the font-size property until it looks right only to find it’s different in another browser. A little understanding can go a long way…
csshead 0 Comments

Text Rotation with CSS

An article about text rotation using just CSS. Thankfully, many of the popular browsers of today support the ability to rotate HTML elements. Even better? We can make it work in Internet Explorer back to version 5.5 even…
csshead 0 Comments

CSS Gradient Text Effect

Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty tag in the heading and apply the background image overlay using […]
csshead 0 Comments

CSS text-shadow Fun: Realtime Lighting Demo

A post about the CSS text-shadow property. It’s been used to create some fun pseudo-realtime lighting effects. There’s an example using a PNG to create a spotlight with some JavaScript to update the text-shadow style in order to simulate realtime shadows from a single light source. Works in Firefox 3.5, Safari, Opera, and Chrome but […]
csshead 0 Comments
Next Page »