CSS Tricks for Fonts and Texts

CSS Tricks for Headings, Fonts and Text Styling

Written by Kenny on March 24, 2012 CSS3
This article shows you useful CSS tricks and techniques which used to style headings, fonts, text and content rather than rely on Photoshop

CSS Tricks for Headings, Fonts and Text Styling

The truth is, we can still creating those fancy headings, cool fonts and text effects without using Photoshop, but just with CSS. In this article, I have listed some useful CSS tricks and techniques which can be used to style your headings, fonts and text as well as content. Perhaps, these CSS tricks might inspire you on what can be done by using CSS rather than rely on Photoshop every time.

CSS Tricks for Fonts and Texts

The best thing about CSS styling is it can greatly affects the performance of our website in terms of page load. Nevertheless, the only problem is browsers compatibility. Whatsoever, I still prefer using CSS to style headings, fonts and text in a matter of time. Somehow, there’s always having ‘fix’ for browsers compatibility in Internet. Cheer!!!

 

Text Spacing

I believe most of you are known about CSS line-height property. Though, I would like to recommend you one more CSS text spacing property, which is letter-spacing. It allows change of horizontal spacing between letters. With this, there is no issue in using ‘tight‘ looking fonts anymore.

h2 {
	letter-spacing: 1px;
}

 

Text Capitalization

Do you know that we can capitalize our text just with CSS? This is how it works!

h1 {
	text-transform: uppercase;
}
h2 {
	text-transform: capitalize;
}
h3 {
	text-transform: lowercase;
}

 

CSS3 Text Shadow

Obviously, CSS3 text-shadow property has the capability to create a shadow under text. It is widely used by web designers due to its simplicity and effectiveness.

Text Shadow

h2 {
	text-shadow: 2px 2px 2px #CCCCCC;
}

Well, actually we can do even more with CSS3 text-shadow property rather than just to create a shadow under text. You’ll get to know from the CSS tricks below. So let’s keep reading!

 

CSS @font-face Trick

We all know that CSS3 has introduced a new @font-face rule. With this, we can get out of using only “web-safe” fonts. Anyhow, not all browsers (like IE) are support for new rule. A little trick for you – Use Font Squirrel @font-face generator. It just works even in IE!

font-face

 

Creating New Font Style with CSS

Yes, we can create our own font styles using CSS3 text-shadow. Here’s the trick of using CSS shadow! Be creative and create your…

New Font Style

.algerian {
	text-shadow: 1px 1px 0 #FFFFFF, 2px 2px 0 #000000;
}
.castellar {
	color: #FFFFFF;
	text-shadow: -1px 0 0 #000000, 1px 1px 0 #000000,
		     2px -1px 0 #000000, 3px 0 0 #000000;
}
.outline {
	color: #FFFFFF;
	text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000,
		     1px -1px 0 #000000, -1px -1px 0 #000000;
}

 

Inset Effect

Adding inset effect to your text and content can be easily done by CSS3 text-shadow. To have better result on headings, you should add more ‘shadow‘ to it.

Inset Effect

.inset h2 {
	color: #444444;
	text-shadow: -1px -1px 1px #000, 1px 1px 1px #ccc;
}
.inset p {
	background: #CCCCCC;
	text-shadow: 0 1px 0 #FFFFFF;
}

 

Embossed Effect

The trick for creating an embossed text effect is pretty similar to inset effect. You just have to reverse the shadow color and change the font to semi-transparent.

Embossed Effect

.emboss {
	color: #ECECF6;
	text-shadow: -1px -1px 1px #FFFFFF, 1px 1px 1px #000000;
}
.emboss h2 {
	opacity: 0.5;
}

 

Shadow Blurring

We can make the shadows blurred by increasing the value of blur distance attribute (third attribute of text-shadow). Of course, this CSS trick will make use of these blurred shadows and creating cool growing effects.

Shadow Blurring

.neon {
	color: #D0F8FF;
	text-shadow: 0 0 5px #A5F1FF, 0 0 10px #A5F1FF,
		     0 0 20px #A5F1FF, 0 0 30px #A5F1FF,
		     0 0 40px #A5F1FF;
}

 

Multiple Shadow-Layers Trick

If we set the value of blur distance attribute to 0, it will create a clone of text. No doubt, we can place the clone in different position. So, try to make use of these clones and produce something more attractive like 3D effect.

Multiple Shadow-Layers

.threed {
	color: #CCCCCC;
	text-shadow: 0 1px 0 #999999, 0 2px 0 #888888,
		     0 3px 0 #777777, 0 4px 0 #666666,
		     0 5px 0 #555555, 0 6px 0 #444444,
		     0 7px 0 #333333, 0 8px 7px rgba(0, 0, 0, 0.4),
		     0 9px 10px rgba(0, 0, 0, 0.2);
}

 

CSS3 Masking

Here’s the trick of using CSS3 masking property on text.

CSS3 Masking

.masking h2{
	color: #FFFFFF;
	-webkit-mask-box-image: url(mask.png) 0 0 repeat;
}

-webkit-mask-box-image will create a masking over the targeted element. Unfortunately, CSS3 masking will only works in webkit browsers. Other browsers are not supported yet.

 

CSS3 Gradient Tricks

Do you know that we can actually create a gradient text in our webpage without using any images, but just with CSS3 gradient plus CSS3 masking? Here’s the CSS trick for you!

CSS3 Gradient

.gradient {
	position: relative;
}
.gradient:after {
	content: 'Gradient Text';
	color:#000;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.gradient h2 {
	color: #117FB2;
	-webkit-mask-box-image: -webkit-gradient(linear,
				left top, left bottom,
				color-stop(20%,rgba(0,0,0,1)),
				color-stop(100%,rgba(0,0,0,0)));
}

 

Click” Effect CSS Tricks

This CSS trick allows you to simulate a click effect for your links. Evidently, you may mimic on press effect like button for your links with this trick as well.

Click Effect

a.button {
	padding: 5px 20px;
	background: #CCCCCC;
	border: 1px solid;
	border-color: #AAAAAA #000000 #000000 #AAAAAA;
	text-decoration: none;
	font-weight: bold;
	color: #000000;
}
a:active {
	position: relative;
	top: 1px;
}
a.button:active {
	position: relative;
	top: 1px;
	left: 1px;
	border-color: #000000 #AAAAAA #AAAAAA #000000;
}

 

Multi-column Layout with CSS

Looking to get your paragraphs into nice and organized columns layout? You don’t have to purposely split your content into two or more and put them inside different table/layout. Yet, you could do it just with this CSS trick!

Multi-column Layout

#column p {
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2;
	-moz-column-gap: 50px;
	-webkit-column-gap: 50px;
	column-gap: 50px;
	text-align:justify;
}

 

CSS Pseudo-Classes for Paragraph

Some designers like to use drop caps in content. To achieve this, you can create a special CSS class and wrap the first letter with this class. However, I’m going to show you an alternative for this using CSS Pseudo-classes only.

CSS Pseudo-Classes

.content p:first-child {
	font-style: italic;
	color: #333333;
}
.content p:first-child:first-letter {
	font-size: 250%;
	margin: 10px 7px 0;
	float: left;
}

 

Text Selection CSS Trick

Last but not least, a CSS trick to overriding the default text selection color.

Text Selection

.content p.green::selection{
	background: green;
	color: #FFFFFF;
}
.content p.green::-moz-selection{  /* Firefox */
	background: green;
	color: #FFFFFF;
}
.content p.red::selection{
	background: red;
}
.content p.red::-moz-selection{
	background: red;
}
.content p.blue::selection{
	background: blue;
	color: #FFF296;
}
.content p.blue::-moz-selection{
	background: blue;
	color: #FFF296;
}

 

What Else?

Anyhow, if you have other CSS tricks about this, feel free to share with us! Share is caring…


» This Might Interest You «

User Feedbacks (2) Share Your!

  • Dealing with browser inconsistencies often makes up a majority of the work for a web designer. Sometimes there is no reasonable way to accomplish a desired layout in all major web browsers without the use of some special exception rules for certain layout engines. Hacks necessarily lead to potential complications and should be avoided whenever possible, but when the circumstances require hacks to be used, it’s best to know what your options are and weigh the consequences appropriately. The purpose of this article is to describe some of the CSS hacks, also called CSS filters, with the least significant potential consequences.

    http://www.handycss.com/tips/some-tricks-with-first-child-property-of-css/

    2 years ago! Reply
  • Sky

    Love your idea of creating new font style with CSS… Thanks!

    2 years ago! Reply

Leave a Feedback

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>