4/29/12

Tagtastic Tag Cloud with CSS Transformations | Webdesigntuts+

Advertise Here

Tagtastic Tag Cloud with CSS Transformations

Luke Spoor on Apr 24th 2012 with 15 comments

Tutorial Details
Difficulty: Beginner Topic: CSS, HTML Estimated completion time: 30 mins This entry is part 10 of 10 in the Bringing Premium Pixels to Life Session - Show All Previous Hey guys, today well be creating Premium Pixels Tagtastic Tag Cloud. As an experiment in alternative approaches, well create the tags using gradients, shadows and (most importantly) CSS transforms, which will form the point of each tag. After completion well even take a step further and cater for IE. Weve covered tags before on Webdesigntuts+, but on this occasion were going to examine an alternative method of creating all the composite bits and pieces. There may be sharper ways of creating the effect, but our example will refrain from images, use very clean markup and some unusual styling. Lets get stuck in!

Step 1: HTML5 Base Markup

Lets start off by throwing in some basic markup, including the familiar HTML5 doctype. Well also refer to our stylesheet within the head of our document. 0 1 0 2 <DCYEhm> !OTP tl <tl hm>
1/9

webdesign.tutsplus.com/tutorials/htmlcss-tutorials/tagtastic-tag-cloud-with-css-transformations/

4/29/12

Tagtastic Tag Cloud with CSS Transformations | Webdesigntuts+

0 3 0 4 0 5 0 6 0 7 0 8 0 9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8

<ed ha> <-Mt tg-> !-ea as<eacast"t-" mt hre=uf8> <-Tte!-il-> <il>/il> tte<tte <-Syehes!-tlset-> <ikrl"tlset he=cssye.s" ln e=syehe" rf"s/tlscs> <ha> /ed <oy bd> <bd> /oy <hm> /tl

Step 2: Adding Some Containers

For the purpose of this tutorial well create a wrapper/container to hold our tags. You will most likely need something similiar should you use these in, for example, a blog sidebar. For ours, well simply create a div with a class of wrapper, apply a width of 3 0 xand a margin of 5 p a t to 4p 0x uo center the wrapper on the page. Ive added 50px instead of 0 just to add a bit of margin top so our tags dont touch the top of the browser window. While throwing in this CSS well add some styling for the body (such as a background image) and apply a reset. 2 6 2 7 2 8 1 0 3 0 4 0 5 0 6 0 7 0 8 0 9 1 0 1 1 1 2 1 3 <i cas"rpe" dv ls=wapr> <dv /i>

hm,oydvsa,pltojc,faeh,2h,4h,6pbokut,r,,b tlbd,i,pnape,betirm,1h,3h,5h,,lcqoepeaab bd { oy fn-aiy'evtc Nu' Hleia Ail sn-ei; otfml:Hleia ee, evtc, ra, assrf fn-ie1p; otsz:6x bcgon:r(.iae/gjg rpa; akrudul./mgsb.p) eet -ektfn-mohn:ataisd wbi-otsotig nilae; } .rpe { wapr mxwdh30x a-it:4p; mri:0xat; agn5p uo }

Step 3: Creating a Tag with Some HTML

Ive structured these tags very simply; all well be using is an anchor tag (a logical choice as these will likely act as links to somewhere or something). For this tutorial Ive given it a class of tag but this can be changed to whatever you like.
webdesign.tutsplus.com/tutorials/htmlcss-tutorials/tagtastic-tag-cloud-with-css-transformations/ 2/9

4/29/12

Tagtastic Tag Cloud with CSS Transformations | Webdesigntuts+

2 8

< he=# cas"a"hg rslto<a a rf"" ls=tg>ih eouin/>

Step 4: Tag Styling

Right, on to the next part! Well now make a start on styling the tag theres quite a bunch of code here but dont let that confuse you, Ill explain whats going on. Ive first added some basic stuff here; Floats Margins Positioning Relative Text-decoration none Next weve defined some font settings, size, family and weight, followed by a color and a text-shadow. After that weve applied some padding, using ems so that everything is sized relative to the body font size, or the browser font size. Next, a simple border, though we havent applied one to the left. The ems have popped up again! This time well apply them to border-radius but only the top right and bottom right corners. Okay are you still awake? Theres more.. next well use some CSS3 gradients (Ive gone ahead and used the neat Gradient app to calculate the values). Final part is some box shadows, an inset and drop shadow. Remember those prefixes! 1 5 1 6 1 7 1 8 1 9 2 0 2 1 2 2 2 3 2 4 2 5 2 6 2 7 2 8 2 9 3 0 3 1 3 2 3 3 3 4 3 5 3 6 3 7 3 8 3 9 4 0 4 1 4 2 4 3 4 4 4 5 .a { tg fotlf; la:et mri: 07x2p; agn0 p 0x psto:eaie oiinrltv; fn-aiy'evtc Nu' Hleia Ail sn-ei; otfml:Hleia ee, evtc, ra, assrf fn-ie07e; otsz:.5m fn-egtbl; otwih:od tx-eoainnn; etdcrto:oe clr#963 oo:963; tx-hdw0x1x0xrb(5,5,5,4; etsao:p p p ga252525.) pdig047m047m047m097m adn:.1e .1e .1e .1e; bre-o:p sld#9d8 odrtp1x oi d93; bre-ih:p sld#9d8 odrrgt1x oi d93; bre-otm1xsld#9d8 odrbto:p oi d93; -ektbre-ais002e 02e 0 wbi-odrrdu: .5m .5m ; -o-odrrdu: 02e 02e 0 mzbre-ais0 .5m .5m ; bre-ais002e 02e 0 odrrdu: .5m .5m ;

bcgon-mg:-ektlna-rdettp rb24 28 13,rb akrudiae wbi-iergain(o, g(5, 1, 1) g bcgon-mg:-o-iergain(o,rb24 28 13,rb24 akrudiae mzlna-rdettp g(5, 1, 1) g(5 bcgon-mg:--iergain(o,rb24 28 13,rb24 akrudiae olna-rdettp g(5, 1, 1) g(5, bcgon-mg:-slna-rdettp rb24 28 13,rb24 akrudiae m-iergain(o, g(5, 1, 1) g(5 bcgon-mg:lna-rdettp rb24 28 13,rb24 16 akrudiae iergain(o, g(5, 1, 1) g(5, 8 fle:poi:XmgTasomMcootgain(rdetye0Satoo itr rgdDIaernfr.irsf.rdetGainTp=,trCl -ektbxsao: wbi-o-hdw
3/9

webdesign.tutsplus.com/tutorials/htmlcss-tutorials/tagtastic-tag-cloud-with-css-transformations/

4/29/12

Tagtastic Tag Cloud with CSS Transformations | Webdesigntuts+

4 6 4 7 4 8 4 9 5 0 5 1 5 2 5 3 5 4 5 5 5 6

ist01x0#aaa ne p feb, 01x1xrb(,,,1; p p ga000.) -o-o-hdw mzbxsao: ist01x0#aaa ne p feb, 01x1xrb(,,,1; p p ga000.) bxsao: o-hdw ist01x0#aaa ne p feb, 01x1xrb(,,,1; p p ga000.) } zidx10 -ne:0;

Step 5: The Arrow

Okay weve completed the main part of the tag, the next part is to create the arrow. To add this well use the : e o e bfr pseudo element. Well also experiment with some advanced techniques here from CSS; transformations. Creating these arrows involved a lot of trial and error. I had to try different widths and heights along with positioning of top and bottom to get it as perfect as possible! Any feedback is therefore very welcome.. Weve used the same background gradient as previously but with one minor change: because well be rotating the square were about to make, well also need to rotate the gradient so it matches up with the main part of the tag. Gradient app was helpful in letting me change the direction of the gradient. The next part is to create some borders, on the left and bottom. All thats left with regard to the arrow is to add a border-radius to smoothen off the point and to finally apply our transformations. Well rotate the square weve made 45 degrees so it looks like an arrow. Weve used t a s o m 4 ;along with the prefixed ones. rnfr:5

5 6 5 7 5 8 5 9 6 0 6 1 6 2 6 3 6 4 6 5

.a:eoe{ tgbfr cnet'; otn:' wdh13e; it:.0m hih:.5e; egt138m bcgon-mg:-ektlna-rdetlf tp rb24 28 13, akrudiae wbi-iergain(et o, g(5, 1, 1) bcgon-mg:-o-iergain(ettp rb24 28 13,rb akrudiae mzlna-rdetlf o, g(5, 1, 1) g bcgon-mg:--iergain(ettp rb24 28 13,rb akrudiae olna-rdetlf o, g(5, 1, 1) g bcgon-mg:-slna-rdetlf tp rb24 28 13,rb akrudiae m-iergain(et o, g(5, 1, 1) g
4/9

webdesign.tutsplus.com/tutorials/htmlcss-tutorials/tagtastic-tag-cloud-with-css-transformations/

4/29/12

Tagtastic Tag Cloud with CSS Transformations | Webdesigntuts+

6 6 6 7 6 8 6 9 7 0 7 1 7 2 7 3 7 4 7 5 7 6 7 7 7 8 7 9 8 0 8 1 8 2 8 3 8 4 8 5 8 6

bcgon-mg:lna-rdetlf tp rb24 28 13,rb24 akrudiae iergain(et o, g(5, 1, 1) g(5 fle:poi:XmgTasomMcootgain(rdetye1Satoo itr rgdDIaernfr.irsf.rdetGainTp=,trCl psto:boue oiinaslt; lf:06e; et-.9m tp.e; o:2m -ekttasomrtt(5e) wbi-rnfr:oae4dg; -o-rnfr:oae4dg; mztasomrtt(5e) --rnfr:oae4dg; otasomrtt(5e) tasomrtt(5e) rnfr:oae4dg; bre-et1xsld#9d8 odrlf:p oi d93; bre-otm1xsld#9d8 odrbto:p oi d93; -ektbre-ais00002e; wbi-odrrdu: .5m -o-odrrdu: 0002e; mzbre-ais0 .5m bre-ais00002e; odrrdu: .5m } zidx1 -ne:;

You should now have something similar to the following; Note Ive zoomed in so you can see where the arrow connects to the main part, this is barely notiticable when viewed at normal size.

Step 6: Tag Hole

The last part to complete our tag is to create the little hole on it. Here well use a pseudo again, but this time, the : f e element. What weve done to create the hole is rather simple. Weve defined a width and height in ems so itll atr grow smoothly. Next weve added a large border radius which will create a circle with a border to outline it. Following this weve added a drop shadow which is similiar to the text-shadow. Finally weve positioned it (while using ems). 06 8 07 8 08 8 09 8 00 9 01 9 02 9 03 9 04 9 05 9 06 9 07 9 08 9 09 9 10 0 11 0 12 0 13 0 .a:fe { tgatr cnet'; otn:' wdh05m it:.e; hih:.e; egt05m bcgon:ff akrud#f; -ektbre-ais417m wbi-odrrdu:.6e; -o-odrrdu:.6e; mzbre-ais417m bre-ais417m odrrdu:.6e; bre:p sld#9d8 odr1x oi d93; -ektbxsao: 1x0#aaa wbi-o-hdw0 p feb; -o-o-hdw01x0#aaa mzbxsao: p feb; bxsao: 1x0#aaa o-hdw0 p feb;
5/9

webdesign.tutsplus.com/tutorials/htmlcss-tutorials/tagtastic-tag-cloud-with-css-transformations/

4/29/12

Tagtastic Tag Cloud with CSS Transformations | Webdesigntuts+

14 0 15 0 16 0 17 0 18 0

psto:boue oiinaslt; tp067m o:.6e; lf:003m et-.8e; zidx99; -ne:99

Step 7: Adding Some Hover Styles

To make our tags even more awesome well add some hover styles. Well need to add this to the main part of the tag and the arrow (while remembering to rotate the gradient for the arrow). Weve also changed the border color on both. 12 1 13 1 14 1 15 1 16 1 17 1 18 1 19 1 10 2 11 2 12 2 13 2 14 2 15 2 16 2 17 2 18 2 19 2 10 3 11 3 12 3

.a:oe { tghvr bcgon-mg:-ektlna-rdettp rb24 25 11,rb akrudiae wbi-iergain(o, g(5, 2, 4) g bcgon-mg:-o-iergain(o,rb24 25 11,rb24 akrudiae mzlna-rdettp g(5, 2, 4) g(5 bcgon-mg:--iergain(o,rb24 25 11,rb24 akrudiae olna-rdettp g(5, 2, 4) g(5 bcgon-mg:-slna-rdettp rb24 25 11,rb24 akrudiae m-iergain(o, g(5, 2, 4) g(5 bcgon-mg:lna-rdettp rb24 25 11,rb24 20 akrudiae iergain(o, g(5, 2, 4) g(5, 0 fle:poi:XmgTasomMcootgain(rdetye0Sato itr rgdDIaernfr.irsf.rdetGainTp=,trCl } bre-oo:eb6; odrclr#110

.a:oe:eoe{ tghvrbfr bcgon-mg:-ektlna-rdetlf tp rb24 25 11 akrudiae wbi-iergain(et o, g(5, 2, 4 bcgon-mg:-o-iergain(ettp rb24 25 11, akrudiae mzlna-rdetlf o, g(5, 2, 4) bcgon-mg:--iergain(ettp rb24 25 11,rb akrudiae olna-rdetlf o, g(5, 2, 4) g bcgon-mg:-slna-rdetlf tp rb24 25 11,rb akrudiae m-iergain(et o, g(5, 2, 4) g bcgon-mg:lna-rdetlf tp rb24 25 11,rb24 akrudiae iergain(et o, g(5, 2, 4) g(5 fle:poi:XmgTasomMcootgain(rdetye1Sato itr rgdDIaernfr.irsf.rdetGainTp=,trCl } bre-oo:eb6; odrclr#110

Step 8: Catering for IE

If youd still like to show your tags in full glory for IE users youll need to take a different approach towards these tags, beginning by creating an IE specific stylesheet. Ill explain why.. Firstly, a lot of our CSS3 effects wont work in versions earlier than IE9 (only a couple work in IE9 as it is), but the main problem here is transforms which will not work. To cater for IE users, well edit our code a bit. Well start off by changing our HTML first, by replacing the w a p rdiv and everything inside it with: rpe

2 6 2 7 2 8 2 9

<i cas"rpe" dv ls=wapr> < he=# cas"a" a rf"" ls=tg> <pncas"ro"<sa> sa ls=arw>/pn
6/9

webdesign.tutsplus.com/tutorials/htmlcss-tutorials/tagtastic-tag-cloud-with-css-transformations/

4/29/12

Tagtastic Tag Cloud with CSS Transformations | Webdesigntuts+

3 0 3 1 3 2 3 3 3 4

<pncas"et>ihrslto<sa> sa ls=tx"hg eouin/pn <pncas"n"<sa> sa ls=ed>/pn <a /> <dv /i>

Well use an anchor tag again but with 3 spans inside it; well need one to create the arrow, the main part and the end which has the border radius.

Step 9: Images for our IE Version

To ensure our tags will work in IE, well have to use images. Start off by deleting everything beneath the .wrapper styles, everything tag related! Youll now need to paste in the following snippet. Were simply applying some background images here, but also repeating the text background on the x-axis as the text could be any length! Even Supercalafragalisticexpialadoshus! 0 1 0 2 0 3 0 4 0 5 0 6 0 7 0 8 0 9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 2 0 2 1 2 2 2 3 2 4 2 5 2 6 2 7 2 8 2 9 3 0 3 1 3 2 3 3 3 4 3 5 3 6 .ro { arw wdh1p; it:5x hih:5x egt2p; fotlf; la:et bcgon:r(.iae/ro.n)n-eet akrudul./mgsarwpg orpa; } .et{ tx hih:5x egt2p; fotlf; la:et pdiglf:p; adn-et4x pdigrgt4x adn-ih:p; bcgon:r(.iae/etpg rpa-; akrudul./mgstx.n) eetx fn-aiy'evtc Nu' Hleia Ail sn-ei; otfml:Hleia ee, evtc, ra, assrf fn-ie07e; otsz:.5m fn-egtbl; otwih:od clr#963 oo:963; tx-hdw0x1x0xrb(5,5,5,4; etsao:p p p ga252525.) } .n { ed wdh4x it:p; hih:5x egt2p; fotlf; la:et } ln-egt2p; iehih:3x

bcgon:r(.iae/n.n)n-eet akrudul./mgsedpg orpa;

.a:oe .ro {bcgon-mg:r(.iae/ro_oe.n) } tghvr arw akrudiaeul./mgsarwhvrpg; .a:oe .et{bcgon-mg:r(.iae/ethvrpg;} tghvr tx akrudiaeul./mgstx_oe.n) .a:oe .n {bcgon-mg:r(.iae/n_oe.n) } tghvr ed akrudiaeul./mgsedhvrpg;
7/9

webdesign.tutsplus.com/tutorials/htmlcss-tutorials/tagtastic-tag-cloud-with-css-transformations/

4/29/12

Tagtastic Tag Cloud with CSS Transformations | Webdesigntuts+

Conclusion
Well thats it! Thats another tutorial complete and it looks good! Weve taken these tagtastic tags and created them with CSS while catering for IE at the same time. These tags could be used for all sorts of things go ahead and use them in a sidebar, blog, whatever you like!

I hope you liked this tutorial, thanks for reading.

Like 15 people

Tags: blogcategorycsshtmlpremium pixelstags

By Luke Spoor
This author has yet to write their bio.

webdesign.tutsplus.com/tutorials/htmlcss-tutorials/tagtastic-tag-cloud-with-css-transformations/

8/9

4/29/12

Tagtastic Tag Cloud with CSS Transformations | Webdesigntuts+

webdesign.tutsplus.com/tutorials/htmlcss-tutorials/tagtastic-tag-cloud-with-css-transformations/

9/9