Two color text header

Here’s a nice HTML and CSS trick – making text split with different colors.

Two tone title in CSS

The trick is to make 2 DIVs with the same text content in the same place (using CSS position) and make the top one a different color and only half height (setting the height to slightly over half a line using height: 0.6em and overflow: hidden)

Demo here.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Leave a Comment