CSS3 text typography, Catch your design to next height

CSS3 with it’s possibilities is a revolution in web development. The new CSS3 properties give developers a wonderful chance to enhance their designs in a way that’s quick and easy, yet visually impressive. What’s more, almost all of the major browsers now support most of the CSS3 features.

CSS3 Multiple column

W3C offers a new way to arrange text “news-paper wise”, in columns. The first would be done by column-width, the latter by column-count. To create a space between the columns, you need to specify a width for column-gap.

CSS3 Multiple column (Width)

We can specify the width of each column then all columns become the same width.

1
2
3
4
5
6
7
# CSS3-paragraph {
text-align: justify;
-moz-column-width: 15em; /*Width of the each column*/
-moz-column-gap: 2em; /*Gap between the column*/
-webkit-column-width: 15em;
-webkit-column-gap: 2em;
}

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

CSS3 Multiple column (Count)

When we specify column-count:3, Unsurprisingly, the browser reacts by dividing the div into three columns of equal width.

1
2
3
4
5
6
7
8
9
# CSS3-paragraph {
text-align: justify;
-moz-column-count: 3; /*Number of columns*/
-moz-column-gap: 1.5em; /*The gap between the columns*/
-moz-column-rule: 1px solid #c4c8cc;
-webkit-column-count: 3;
-webkit-column-gap: 1.5em;
-webkit-column-rule: 1px solid #c4c8cc;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

CSS3: Attribute selectors

Substring matching attribute selectors

1
[att^=val]

Represents an element with the attribute whose value begins with the prefix “val”.

css

1
p[title^="co"] {background: green;}

HTML

1
2
3
4
5
6
</strong></strong>
<p title="config">Green background.</p>
<p title="pixel">The attribute selector doesn't match this paragraph.</p>
<p title="config">Green background.</p>
The attribute selector doesn't match this paragraph.
<p title="control">Green background.</p>

Output

Green background.

The attribute selector doesn’t match this paragraph.

Green background.

The attribute selector doesn’t match this paragraph.

Green background.

1
[att$=val]

Represents an element with the attribute whose value ends with the suffix “val”.
css

1
p[title$="ig"] {background: green;}

HTML

1
2
3
4
5
6
</strong></strong>
<p title="config">Green background.</p>
<p title="pixel">The attribute selector doesn't match this paragraph.</p>
<p title="config">Green background.</p>
The attribute selector doesn't match this paragraph.
<p title="control">The attribute selector doesn't match this paragraph.</p>

Output

Green background.

The attribute selector doesn’t match this paragraph.

Green background.

The attribute selector doesn’t match this paragraph.

The attribute selector doesn’t match this paragraph.

1
[att*=val]

Represents an element with the att attribute whose value contains at least one instance of the substring “val”.

css

1
p[title*="con"] {background: green;}

HTML

1
2
3
4
5
6
</strong></strong>
<p title="config">Green background.</p>
<p title="pixel">The attribute selector doesn't match this paragraph.</p>
<p title="config">Green background.</p>
The attribute selector doesn't match this paragraph.
<p title="control">Green background.</p>

Output

Green background.

The attribute selector doesn’t match this paragraph.

Green background.

The attribute selector doesn’t match this paragraph.

Green background.

Default Text Selection Colour

Currently FireFox, Safari, Chrome and Opera support the text section attribute, and the browsers that don’t support it simply ignore the code so nothing will break, so it doesn’t really matter.
The basic snippet to achieve this is:

1
2
3
4
5
6
7
8
9
10
11
12
::selection {
background:#d34913;
color:#FFF;
}
::-moz-selection {
background:#d34913;
color:#FFF;
}
::-webkit-selection {
background:#d34913;
color:#FFF;
}

CSS3 Text-Shadow

1
2
3
#text-obj {
text-shadow: ;
}

The x-offset and y-offset state how many pixels horizontally and vertically the shadow is positioned with respect to the original text, while the blur-radius is used to express how much the shadow is blurred. The color can be any CSS color value, representing the color of the text.

examples

Configpixel

You are not restricted to just one shadow. You can have multiple shadows, separated by commas. For example:

1
2
3
4
5
6
7
8
9
10
11
#text-obj {
text-shadow:
1px -1px 5px rgba(0, 0, 0, 0.2),
-1px 1px 5px rgba(0, 0, 0, 0.2),
1px 1px 5px rgba(0, 0, 0, 0.2),
-1px -1px 5px rgba(0, 0, 0, 0.2),
0px 1px 5px rgba(0, 0, 0, 0.2),
0px -1px 5px rgba(0, 0, 0, 0.2),
1px 0px 5px rgba(0, 0, 0, 0.2),
-1px 0px 5px rgba(0, 0, 0, 0.2);
}

For Internet Explorer

1
2
3
4
zoom: 1;
background-color: #cccccc;
filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc)
progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3, Color=#99cc99);

Text Rotation

1
2
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);

For Internet Explorer

1
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

The rotation property of the BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degress respectively.