Leon Brown

Use this an­i­mated un­der­line ef­fect to in­di­cate in­ter­ac­tiv­ity of text items

Web Designer - - Meta Contributors -

Leon is a free­lance web de­vel­oper and trainer who as­sists web de­vel­op­ers in cre­at­ing ef­fi­cient code for projects. This is­sue he recre­ates a host of tech­niques as in­spired by the top-class sites seen in Light­box.

1. Doc­u­ment ini­ti­a­tion

The first step is to ini­ti­ate the HTML doc­u­ment. This con­sists of the HTML con­tainer rep­re­sent­ing the web­page, con­tain­ing a head and body sec­tion.

While the head sec­tion is used to load the ex­ter­nal CSS stylesheet, the body sec­tion is used to store the con­tent el­e­ments cre­ated in step 2.

<!DOCTYPE html>

<html>

<head>

<ti­tle>wave Un­der­line</ti­tle>

<link rel=”stylesheet” type=”text/css” href=”styles.css” />

</head>

<body> *** STEP 2 HERE ***

</body> </html>

2. HTML con­tent

The page con­tent con­sists of a list of links that the wave ef­fect will be ap­plied to. Take note of how the 'waves' class is ap­plied to the list con­tainer. This will be used by the CSS stylesheet to find the links the wave ef­fect will be ap­plied to.

<ul class=”waves”>

<li><a href=”#”>item</a></li> <li><a href=”#”>item</a></li> <li><a href=”#”>item</a></li> </ul>

3. De­fault link pre­sen­ta­tion

Cre­ate a new file called 'styles.css'. This step sets all of the links in­side the waves con­tainer to have spac­ing above them. Each link item is set to use in­line-block as their dis­play mode in or­der to en­able a mar­gin to be ap­plied above them. Rel­a­tive po­si­tion­ing is also ap­plied to each link so that the wave line can be placed rel­a­tive to the link lo­ca­tion.

.waves a{ dis­play: in­line-block; po­si­tion: rel­a­tive; mar­gin-top: 1em; }

4. De­fault line

The wave line is made us­ing the 'be­fore' and 'af­ter' vir­tual el­e­ments of the link. These only ap­pear when the link is hov­ered by the user, upon which these vir­tual el­e­ments are set to ap­pear across the bot­tom of the par­ent link. Po­si­tion­ing is rel­a­tive to the par­ent link due to po­si­tion mode used in step 3.

.waves a:hover::be­fore, .waves a:hover::af­ter{ con­tent: “”; po­si­tion: ab­so­lute; dis­play: block; width: 100%; height: 20px; bot­tom: -5px; }

5. De­fault line: more

The wave line is made us­ing a back­ground ra­dial gra­di­ent that is re­peated across the space cre­ated by the vir­tual el­e­ments. This back­ground is set to a spe­cific size that shows only half of each circle, with an an­i­ma­tion called 'move' ap­plied to in­fin­itely re­peat over a du­ra­tion of one sec­ond. This an­i­ma­tion is also set to play as lin­ear, as part of the il­lu­sion of the wave be­ing in­fi­nite.

.waves a:hover::be­fore,

.waves a:hover::af­ter{ back­ground: ra­dial-gra­di­ent(16px, trans­par­ent, trans­par­ent 4px, black 4px, black 10px, trans­par­ent 11px); back­ground-size: 30px 40px; back­ground-po­si­tion: 0 0; an­i­ma­tion: move 1s in­fi­nite lin­ear; }

6. Af­ter line

The 'af­ter' vir­tual el­e­ment re­quires some mod­i­fi­ca­tion from the pre­vi­ously de­fined de­fault set­tings. Po­si­tions for the el­e­ment and also the back­ground pat­tern are changed so that the bot­tom half of the cir­cles are placed to form a wave pat­tern with the 'be­fore' el­e­ment. This el­e­ment is also changed to use the 'move2' an­i­ma­tion.

.waves a:hover::af­ter{ height: 20px; bot­tom: -25px; left: 0; back­ground-po­si­tion: 15px -20px; an­i­ma­tion: move2 1s in­fi­nite lin­ear; }

7. An­i­ma­tion set­tings

The fi­nal step is to de­fine the keyframe an­i­ma­tions that were ref­er­enced in steps 5 and 6. Only one frame is re­quired for each an­i­ma­tion – the 'to' fi­nal frame. This re­sults in the an­i­ma­tion mov­ing the hor­i­zon­tal back­ground po­si­tion from the orig­i­nal po­si­tion to the po­si­tions de­fined in each an­i­ma­tion. By hav­ing no first frame to start from, the an­i­ma­tions can be reused for el­e­ments that have dif­fer­ent start­ing points. @keyframes move{ to{ back­ground-po­si­tion-x: 60px; } }

@keyframes move2{

to{ back­ground-po­si­tion-x: 75px; } }

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.