Mandarin Design
"For people who make mistakes"
HTML and CSS Examples
Popular Blog Code
TIPS and TRICKS
Magazine Style: The Joy of CSS
The joy of CSS.
Here we are using font sizes, margins, floats, and
line height to position the text exactly where we
want it. Copy and paste code
is here.
DROP CAPS
Magazine Style Drop Caps
Full instructions
for making the first letter big are in the Drop Cap copy and paste style tutorial.
For this one we forced the first big letter to span more than five lines.
The font-size is adjusted to exactly 100 pixels while the line height is 80 pixels.
You may want to try a line-height of 70 to control the white space.
To make the top of the first big letter align with the text a padding of 1 pixel was added to make the initial letter
drop down ever so slightly.
Copy and paste this in your page.
It will look like this.
Full instructions
for making the first letter big are in the Drop Cap copy and paste style tutorial.
For this one we forced the first big letter to span more than five lines.
The font-size is adjusted to exactly 100 pixels while the line height is 80 pixels.
LINK TO MANDARIN
ADJUSTABLE TEXT LINK
You don't need images to link to us.
Copy and paste this in your page.
It will look like this.
You are welcome to take this text link.
Fiddle with it and make it your own.
Or, you can post it exactly as it is.