Neil Pearce

Add in­ter­est and en­gage­ment to pro­file cards with the help of con­tem­po­rary CSS an­i­ma­tions

Web Designer - - Meta | Contributors -

Neil is a fron­tend devel­oper and de­signer who has worked in the in­dus­try for over ten years. In this is­sue he demon­strates how to add en­gage­ment to UI pro­file cards with a col­lec­tion of CSS an­i­ma­tion tech­niques.

When build­ing web user in­ter­face el­e­ments, we’ve al­ways been huge fans of transitions and trans­forms. In­stead of just pop­ping things in and out, ev­ery­thing that moves should fade or slide in and out of view on user in­ter­ac­tion. This brings a su­per pol­ished and pro­fes­sional look and feel to your web­sites or ap­pli­ca­tions and should en­hance the user ex­pe­ri­ence, not ham­per it.

jquery had been for a long time, the best tool for the job, with its DOM ma­nip­u­la­tion be­ing ideal. How­ever, these days, to get our re­quired look, all we need is CSS3. Through­out this tu­to­rial we will build two pro­file card UIS that we would prob­a­bly see within the team sec­tion of a agency web­site. Or these could also be used on smaller screens used for mo­bile de­vices. What­ever the case, build­ing these just with HTML and CSS is what makes them so much fun to do.

To make things eas­ier for us, we will be us­ing the pop­u­lar Code­pen de­vel­op­ment tool so we can jump straight into it with­out the need to set up our lo­cal de­vel­op­ment en­vi­ron­ment – https://code­pen.io. So open up Code­pen and let’s get started!

1. Get­ting started

Through­out this tu­to­rial we will be us­ing Code­pen http:// code­pen.io. We won’t need many depen­den­cies for this, just font awe­some and Sass. Once you’re all set, go ahead and add a con­tainer div – which will be our main wrapper, and a div with a class name of ‘card’.

<div class=”con­tainer”>

<div class=”card”>

</div>

</div>

2. Adding the pro­file im­age

Us­ing your own im­age(s) from a lo­cal im­age folder would ob­vi­ously be the norm, but we’re us­ing a free im­age host­ing ser­vice to make things eas­ier to use in Code­pen. Your im­ages should be around 350px wide to 450px in height and will go in be­tween the ‘card’ div and will have a class called ‘card-im­age’. <div class=”card-im­age”>

<img src=”https://im­age.ibb.co/dutfmj/ pro­file_img.jpg” alt=”pro­file one”>

</div>

3. So­cial icons

The so­cial icons that we will be us­ing will come from Font Awe­some. If you haven’t al­ready done so, go ahead and add Font Awe­some as a Code­pen re­source in the CSS set­tings. Then we will add the four most pop­u­lar so­cial icons within an un­ordered list which will go un­der­neath the clos­ing div tag of our pro­file im­age.

<ul class=”so­cial-icons”>

<li>

<a href=””>

<i class=”fab fa-face­book-f”></i>

</a>

</li>

<li>

<a href=””>

<i class=”fab fa-in­sta­gram”></i>

</a>

</li>

<li>

<a href=””>

<i class=”fab fa-twit­ter”></i>

</a>

</li>

<li>

<a href=””>

<i class=”fab fa-dribb­ble”></i>

</a>

</li>

</ul>

4. Pro­file de­tails

At the bot­tom of each pro­file card there will be some de­tails about the per­son. This will just be a name and job ti­tle, but feel free to use what­ever tick­les your fancy. These de­tails will sim­ply be given a class name of ‘de­tails’ and sit just un­der­neath our so­cial icons. <div class=”de­tails”> <h2>john Smith

<br>

<span class=”job-ti­tle”>ui Devel­oper</ span>

</h2>

</div>

</div>

</div><!-- end box wrapper -->

5. Set­ting up the CSS/SASS

The only Sass vari­able we will use is for the main body font. Then we will make sure that all el­e­ments are stripped of their de­fault pad­ding and mar­gin, as well as the box model re­set. How­ever, if you don’t want to strip all el­e­ments clean, you can in­clude Nor­mal­ize as a re­source. $body­font: ‘Open Sans’, sans-serif;

* { pad­ding: 0; mar­gin: 0; box-siz­ing: bor­der-box; }

6. Ini­tial card styles

First thing we need to think about is how can we make this look like a card. Well, that’s sim­ply achieved by us­ing bor­der ra­dius, set­ting the over­flow to hid­den and po­si­tion­ing it us­ing ab­so­lute po­si­tion­ing and ‘trans­form: trans­late’. With some width and height and a sub­tle drop shadow, things are start­ing to take shape. body { font-fam­ily: $body­font; back­ground: #333; }

.card {

po­si­tion: ab­so­lute; top: 50%; left: 50%; trans­form: trans­late(-50%, -50%); width: 350px; height: 450px; bor­der-ra­dius: 16px; over­flow: hid­den; box-shadow: 0 5px 18px rgba(0, 0, 0,

0.4); cur­sor: pointer; tran­si­tion: 0.5s; }

7. Im­age hover

One of the things we want to hap­pen when the card is hov­ered over is for our pro­file im­age to fade away slightly. We also need to make sure the z-index is set higher than ‘1’ so that our de­tails sec­tion will be hid­den un­der­neath un­til we’re ready to re­veal it. Also, make sure this ‘card-im­age’ CSS rule is nested within the ‘card’ rule. .card-im­age { po­si­tion: ab­so­lute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2; back­ground-color: #000; tran­si­tion: .5s;

}

&:hover img { opac­ity: 0.4; tran­si­tion: .5s;

} }

8. An­i­mat­ing the im­age up

Not only do we want our im­age to lose some of its opac­ity when we hover over it, we also want the im­age to move up so we re­veal the pro­file de­tails un­der­neath. We can eas­ily achieve this by us­ing the ‘trans­latey’ prop­erty and giv­ing it a neg­a­tive value.

.card:hover .card-im­age { trans­form: trans­latey(-100px); tran­si­tion: all .9s; }

9. So­cial icons

The so­cial icons can now be po­si­tioned. Even though these will be hid­den to be­gin with and then an­i­mated on, we do need to set their fi­nal state. We will also want each icon to be next to each other in­line, so we will use ‘dis­play: flex’ to achieve that. so­cial-icons { dis­play: flex; po­si­tion: ab­so­lute; top: 50%; left: 50%; trans­form: trans­late(-50%, -50%); z-index: 3; li { list-style: none;

}

// an­chor styles goes here... }

10. An­chor styles

The so­cial icons now need some styling added to them. Us­ing the an­chor tag we can cre­ate 50x50px white squares with a 6px mar­gin left and right. We will set the icons to a dark grey but will end up giv­ing these their own hover state in a later step. a { po­si­tion: rel­a­tive; dis­play: block; width: 50px; height: 50px; line-height: 50px; text-align: cen­ter; back­ground: #fff; font-size: 23px; color: #333; font-weight: bold; mar­gin: 0 6px;

}

} }

11. Hide so­cial icons

The so­cial icons now need to be hid­den and moved to the bot­tom of the card so we can animate them back into view. We also need to give this a tran­si­tion so when we do re­veal them, it’s a lot smoother. So go ahead and add this ad­di­tional CSS within the ‘a’ rule we just cre­ated. tran­si­tion: .4s; trans­form: trans­latey(200px); opac­ity: 0;

12. Re­veal­ing the so­cial icons

Now we can be­gin to have a lit­tle bit of fun with our so­cial icons. With a hover state added to the card class, we can re­veal our icons by set­ting the opac­ity to ‘1’ and the ‘trans­latey’ value to zero. With that tran­si­tion added in the last step, we should now have a nice an­i­ma­tion hap­pen­ing on hover.

.card:hover .so­cial-icons li a { trans­form: trans­latey(0px); opac­ity: 1; }

13. Icon back­grounds

Hov­er­ing over our icons now doesn’t re­ally feel that nice with­out some sort of tran­si­tion hap­pen­ing on their back­grounds. So adding a black back­ground and set­ting the icon to white when we hover, gives us a much bet­ter ex­pe­ri­ence.

.so­cial-icons li a:hover { back­ground: #000; tran­si­tion: .2s;

.fab {

color: #fff;

} }

14. Spin­ning the icons

Even though we now have a nice an­i­ma­tion and hover ef­fects hap­pen­ing, why stop there! Let’s add some ro­ta­tion on the icons so when we hover over them, they spin 360 de­grees. The tran­si­tion will be a bit longer than nor­mal (0.8s) as we want the ro­ta­tion to be nice and smooth.

.so­cial-icons li a .fab { tran­si­tion: .8s;

&:hover { trans­form: ro­tatey(360deg); color: #fff;

} }

15. An­i­ma­tion de­lays

We’re not quite fin­ished with our so­cial icons just yet as we now want to be more cre­ative and animate each in­di­vid­ual icon one af­ter the other. We can do this by tar­get­ing each icon us­ing the ‘nth-child’ psuedo se­lec­tor, and then set­ting a tran­si­tion de­lay on each one. .card:hover li:nth-child(1) a {

tran­si­tion-de­lay: 0.1s; }

.card:hover li:nth-child(2) a {

tran­si­tion-de­lay: 0.2s; }

.card:hover li:nth-child(3) a {

tran­si­tion-de­lay: 0.3s; }

.card:hover li:nth-child(4) a {

tran­si­tion-de­lay: 0.4s; }

16. Styling the de­tails

The de­tails sec­tion, which gets re­vealed on hover, will need to have some styling added to it. For now we will just po­si­tion it at the bot­tom, give it a white back­ground and make sure the z-index is set to ‘1’.

.de­tails { po­si­tion: ab­so­lute; bot­tom: 0; left: 0; back­ground: #fff; width: 100%; height: 120px; z-index: 1; pad­ding: 10px; }

17. Fin­ish­ing up the de­tails

To keep things tidy, the CSS for both the header tag and job ti­tle for this de­tails sec­tion can be nested in the de­tails rule. Then we can give the ‘h2’ tag some mar­gin at the top and bot­tom and fin­ish off giv­ing the job ti­tle a font size and weight. h2 { mar­gin: 30px 0; pad­ding: 0; text-align: cen­ter;

.job-ti­tle { font-size: 1rem; line-height: 2.5rem; color: #333; font-weight: 300;

} }

}

18. Sec­ond pro­file card

To cre­ate an­other pro­file card, copy and paste all of the HTML ex­cept the main con­tainer div, and then add an ad­di­tional div called ‘card-wrapper’ in be­tween the con­tainer and card divs, and close that off un­der­neath the de­tails clos­ing div. Then we can use Flexbox on the con­tainer class to po­si­tion both pro­file cards on the page side-by-side.

.con­tainer { max-width: 900px; dis­play: flex; jus­tify-con­tent: space-be­tween; mar­gin: auto; }

.card-wrapper { width: 400px; height: 500px; po­si­tion: rel­a­tive; }

19. Sec­ond pro­file classes

Now we have a new pro­file card, in­stead of keep­ing to the same an­i­ma­tions, let’s cre­ate some­thing dif­fer­ent. First make sure the new class ‘pro­file-two’ is added to the card div and the class ‘pro­file-img-two’ is also added to the im­age div. And lastly add a class called ‘jane’ on the de­tails div. <div class=”card pro­file-two”>

….

<div class=”card-im­age pro­file-img--two”> ….

<div class=”de­tails jane”>

20. Sec­ond an­i­ma­tion

So to make things a lit­tle more in­ter­est­ing, we will add a ro­ta­tion of 360 de­grees to the main im­age when hov­ered. Then we will turn the squared so­cial icons into cir­cles, but we will keep their transitions the same. And lastly we will give our de­tails (now tar­geted by the class name ‘jane’) a slight de­lay in be­ing re­vealed so that the im­age ro­ta­tion has time to fin­ish.

.jane { po­si­tion: ab­so­lute; bot­tom: -120px; left: 0; opac­ity: 0; back­ground: #fff; width: 100%; height: 120px; z-index: 3; pad­ding: 10px; tran­si­tion: .4s; }

.pro­file-two .so­cial-icons li a {

bor­der-ra­dius: 50%; }

.card:hover .pro­file-img--two {

trans­form: ro­tatey(180deg); }

.card:hover .jane { bot­tom: 0; left: 0; tran­si­tion-de­lay: 0.5s; opac­ity: 1; }

21. Fi­nal thoughts

As you can see, you can get as cre­ative as you want with user in­ter­face an­i­ma­tions. How­ever, you do need to be care­ful not to over do things, and the user ex­pe­ri­ence should al­ways be your first thought. So chal­lenge your­self to cre­ate a slightly dif­fer­ent one now that you’ve fin­ished do­ing these two!

Left All the main HTML has been added now and we can see our main im­age and un­styled so­cial icons

Top Now we have po­si­tioned our pro­file card and be­gan to make it look like a card by adding rounded cor­ners and a sub­tle drop shadow

Right Then we’ve given the so­cial icons some more styling by adding a nice back­ground tran­si­tion

Top We’ve given the so­cial icons a square back­ground and po­si­tioned them where we would like them to end up af­ter they’re an­i­mated

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.