Design Lunatic

Flash an element with CSS3

Today, I’m going to show you how to solve a problem with a lot of sites. Have you ever been to a site where there are links pointing to different parts of the same page? Wikipedia is a great example of this. Well, I find it hard to find the elements that are being linked to sometimes, especialy if the element is at the bottom of the page.

I’ll show you how we can solve this problem with some simple CSS3.

HTML

First off, let’s create a demo page, with some text on it and a sidebar.

<div id="text">

<div id="nav">
<ul>
	<li><a href="#paragraph1">Paragraph 1</a></li>
	<li><a href="#paragraph2">Paragraph 2</a></li>
	<li><a href="#paragraph3">Paragraph 3</a></li>
	<li><a href="#paragraph4">Paragraph 4</a></li>
	<li><a href="#paragraph5">Paragraph 5</a></li>
</ul>
</div>

<div id="paragraph1">
<h2>Paragraph 1</h2>
Placerat aliquam diam natoque proin rhoncus. Porttitor lundium, in porta aliquam odio? Est sit scelerisque, magnis natoque nec auctor penatibus elementum lorem nunc sed, amet ac elit proin et lorem pulvinar! Adipiscing est, mus, nec? Rhoncus? Magnis porttitor, odio turpis dapibus augue, mid tristique proin eu aliquet dignissim ac, egestas augue sed? Dis, urna vut placerat placerat sociis parturient quis dapibus porttitor aenean vel? A pulvinar! Tortor, quis tristique natoque sit ut! Sagittis vel, purus, dis pellentesque massa tincidunt, tristique, dis nunc, mauris amet. Nisi facilisis odio magna vel urna? Aliquam auctor? Mid tincidunt in elementum quis montes enim nunc odio lectus sit facilisis arcu et nec mus augue in mid, natoque? Purus mattis nascetur amet, facilisis urna turpis! Sit.
</div>
<div id="paragraph2">
<h2>Paragraph 2</h2>
Ac cum mus rhoncus, risus. Turpis phasellus, amet dapibus eu nunc nisi est sed. Sit et amet adipiscing egestas mid sed vel magna? Purus ultrices adipiscing lorem, porttitor tristique. Vut egestas, sociis pid, vel et elementum! Augue et massa ridiculus mus, magnis? Natoque? Lacus, habitasse eros cum? Aenean amet. Vel tincidunt pellentesque elementum dolor, odio adipiscing adipiscing odio habitasse ut dictumst magnis augue aliquam. Arcu elementum diam vut, tincidunt cursus pellentesque? Turpis elementum ac, integer porta. Nec, tincidunt turpis magnis tincidunt lectus! Integer? Augue scelerisque sit augue? Magna aenean! Dis natoque porta ac? Elementum proin! Vel, in turpis ac nunc odio nec dis, aliquet natoque quis hac? Placerat dignissim nisi, eros porta porta, sed aliquet nisi? Purus adipiscing ut.
</div>
<div id="paragraph3">
<h2>Paragraph 3</h2>
Et. A. Rhoncus non odio. In. Vel diam rhoncus purus sed! Integer sit porttitor, natoque, aenean magnis a augue. Lorem urna! Sociis nisi? Pellentesque nunc nec ridiculus dignissim odio dignissim non, lundium phasellus sagittis mid cum etiam? Adipiscing, ridiculus. Mauris purus natoque parturient, augue, nec urna ut. Augue tincidunt! Odio amet, magna pellentesque duis placerat elementum ultricies vut mattis, nec. Turpis risus risus nisi a. A tincidunt, enim natoque lectus adipiscing dapibus adipiscing velit, lectus integer tempor est nisi elementum, pid, a arcu! Aliquam ridiculus elit. A sit turpis est ridiculus placerat. Cursus et sociis, diam in urna a, cum magna, egestas integer pid turpis turpis tortor, tincidunt placerat amet? Nunc facilisis magnis nunc porttitor duis lacus etiam ridiculus.
</div>
<div id="paragraph4">
<h2>Paragraph 4</h2>
Penatibus. Et! Aliquam. Parturient vut rhoncus augue phasellus pid ridiculus elementum, habitasse elementum nisi? Lacus sed auctor, eu phasellus velit lacus purus duis adipiscing tristique dolor scelerisque rhoncus in habitasse enim? Sociis platea. Porta elementum? Augue phasellus ultricies? Vel turpis placerat ac sed non et nec vel ut enim, amet tincidunt nunc sit nascetur elementum vut sagittis? A scelerisque nascetur et aliquam porttitor duis! Dignissim dis scelerisque habitasse! Elementum aliquam placerat turpis a velit dapibus non aliquet platea auctor, vut integer, pulvinar! Ultrices? Odio duis in! Phasellus! Vut, vel pid dapibus cursus nec pulvinar, non mattis, adipiscing cum! Vel sit ac nunc parturient magnis, proin sociis lectus, platea elit, dignissim odio et porta turpis natoque mauris dis amet sed.
</div>
<div id="paragraph5">
<h2>Paragraph 5</h2>
Lorem ac? Ac sed tortor! Enim tincidunt scelerisque tincidunt nec penatibus, ultrices vel natoque sit lectus enim. Aenean sed, lorem sagittis, ac nascetur. Pulvinar sit. Turpis urna elementum rhoncus? Risus, a, duis rhoncus scelerisque integer integer turpis massa hac vut, arcu, magna in, scelerisque? Sit, sociis tempor, enim duis cursus lacus? Mauris! Elit magna vut nascetur urna elementum lundium, quis parturient tincidunt integer, nec porta? Platea turpis phasellus ut? Placerat, rhoncus! Porta proin lorem sed porta integer, porta, vel. Sit, et enim nisi pulvinar eros cras, nascetur nunc turpis lectus parturient, porttitor enim lundium a placerat magna hac in. Ac, duis nec natoque mus, nunc, rhoncus etiam? Natoque quis a? Dapibus lectus nec! Nunc, urna dictumst cursus enim purus.
</div>

</div>

As you can see, the markup is simple. There’s a sidebar with links pointing to seperate parts of the text, and there’s some text(along with some headers).

CSS

We’re going to need to add some styling to this, because it hurts my eyes just to look at the page we currently have.

body {
background: #fbfbfb;
font-family: arial;
font-size: 15px;
line-height: 25px;
color: #515151;
}

#text {
width: 550px;
margin: 0 auto;
}

#nav {
width: 200px;
margin-left: -200px;
position: fixed;
}

h2 {
font-family: georgia;
color: #888888;
font-size: 24px;
margin-top: 10px;
line-height: 32px;
}

That’s better. Now that we can look at the text, let’s move on to the CSS that powers the animation.

CSS3

We’re going to use the “:target” selector to mimic a click function. As you saw above, the links point to a div. Well, when a link like that is followed, it’s possible to style the div that was linked to.

In order for the element to animate, there’s going to have to be a CSS3 keyframe animation.

@-webkit-keyframes animEl {
   50% {
      background: #666666;
   }
}

The animation is called “animEl”. All it does is animate the element to a dark grey background at half way through the animation, and back to the original background at 100%. 0% and 100% aren’t even necessary.

Now, we have to apply the animation to the div whose corresponding link was just clicked.

#paragraph1:target {
	-webkit-animation-name: animEl;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: ease;
}

Unfortunately, Firefox has very limited animation support, so it’s best not to use “-moz” CSS3 animations right now. Okay, now, we just repeat that for the other 4 paragraphs.

#paragraph2:target {
	-webkit-animation-name: animEl;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: ease;
}
#paragraph3:target {
	-webkit-animation-name: animEl;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: ease;
}
#paragraph4:target {
	-webkit-animation-name: animEl;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: ease;
}
#paragraph5:target {
	-webkit-animation-name: animEl;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: ease;
}

That’s it! As usual, don’t forget Eric Meyer’s CSS reset.