Adobe-like Arrow Headers

Create an Adobe-like arrow headers with zero images

Adobe has some pretty cool header bars for modules on their site. The header bar is divided into left and right sections. The left being an explanatory title and the right being a related link. But

 

Let's get super critical of how they did it. First of all, they use a non-sprited image. That means an extra HTTP request just for the headers. The :hover effect is a totally separate image. That means yet another HTTP request and a "flash of black" while the second image loads on your first hover.

We can do it with zero images! Here's the author's version.

Daniela Vaseva

Daniela VasevaDaniela is writing tutorials, news, newsletters, and update emails for the DMXzone specialising in the sphere of electronic processing, analysis and publication of texts, and interested in the development of new Internet technologies and problems related to the cyberculture and net literature. She has a bachelor's degree in Bulgarian philology, and a master's degree in computational linguistics.

See All Postings From Daniela Vaseva >>

Comments

Be the first to write a comment

You must me logged in to write a comment.