Фантастичен Tag Cloud со помош на CSS трансформации

Macedonian (Македонски јазик) translation by Andrijana Mitevska (you can also view the original English article)

Здраво дечки, денес ќе го креираме Фантастичниот Tag Cloud на Premium Pixels. За експериментирање со алтернативни пристапи ќе креираме тагови користејќи градиенти, сенки и (најважно) СЅЅ трансформации, кои ќе го формираат врвот на секој од таговите. По завршувањето ќе одиме чекор подалеку со тоа што ќе се погрижиме и за Internet Explorer.

Таговите веќе ги разгледавме на Webdesigntuts+, а во оваа прилика ќе разгледаме алтернативни методи за креирање на сите составни делови. Можеби постојат попаметни начини за креирање на ефектите, но нашиот пример нема да содржи слики туку само многу чисти обележја и малку несекојдневно стилизирање. Да се фатиме за работа!

Чекор 1:

Да започнеме со некои основни обележја, вклучувајќи го веќе познатиот HTML5 doctype. Исто така ќе се повикаме на нашиот stylesheet во заглавјето на документот.

<!DOCTYPE html>
<html>
  <head>

		<!--Meta tags-->
		<meta charset="utf-8">

		<!--Title-->
		<title></title>
		
		<!--Stylesheets-->
		<link rel="stylesheet" href="css/styles.css">

</head>
<body>







</body>
</html>

Чекор 2: Додавање на полиња

За целите на овој курс ќе креираме полиња каде што ќе бидат сместени нашите тагови. Најверојатно, вакво нешто ќе ви биде потребно и во друг случај, да речеме, кај полињата на страните во блогот.

За нашите полиња, едноставно ќе креираме div со класа од поле со 340рх ширина и маргина од 50рх auto, со цел да го центрираме полето на страницата. Додадов 50рх намето 0 само за да се додаде мала граница на врвот на полето за таговите да не се слепат со горниот ден на пребарувачот. А со додавање на овој СЅЅ ќе додадеме малку стилизирање за body делот (полето) (како што е сликата во позадина) и ќе го ресетираме.

<div class="wrapper">



</div>

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,and,address,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,input,textarea,select{background:transparent;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}

body {
	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size:16px;
	background:url(../images/bg.jpg) repeat;
	-webkit-font-smoothing: antialiased;
}

.wrapper {
	max-width:340px;
	margin:50px auto;
}

Чекор 3: Креирање на таг со НТМL

Ги концепирав овие тагови доста едноставно, па така се што користиме е anchor tag (логичен избор кога веќе знаеме дека таговите најверојатно ќе служат за поврзување со нешто друго и на друго место (како линкови). Во овој курс јас зададов класа именувана како „tag", но може да го именувате како сакате.

	<a href="#" class="tag">high resolution</a>

Чекор 4: Стилизирање на тагови

Супер, сега одиме понатаму! Сега ќе започнеме со стилизирање на таговите - тука има доста кодирање, но не дозволувајте тоа да ве збуни, ќе ви објаснам што се случува.

Најпрво додадов некои основни работи:

Правец
Маргини
Позиционирање - Релативно
Декорација на текст - нема

Следно, дефиниравме некои подесувања за фонтот, големината, семејството и тежината, проследено со избор на боја и сенка на текстот.По додавање на определен padding, користиме ems за се да биде скалирано пропорционално со големината на фонтот во body-делот или со големината на фонтот на пребарувачот. Следно, за едноставна рамка, иако таква не применивме на лево, повторно користиме ems! Овој пат ќе аплицираме ems на радиусот на рамката, меѓутоа само на горниот и долниот десен агол. Во ред, сè уште сте сконцентрирани? Има уште... следно ќе користиме СЅЅ3 градиенти (јас отидов уште подалеку и ја употребив neat Gradient app за пресметување на вредностите). Последниот дел е додавање на сенки на полето, внатрешна и надворешна. Запаметете ги овие зборови!

.tag {
	float:left;
	margin:0 0 7px 20px;
	position:relative;

	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size:0.75em;
	font-weight:bold;
	text-decoration:none;

	color:#996633;
	text-shadow:0px 1px 0px rgba(255,255,255,.4);

	padding:0.417em 0.417em 0.417em 0.917em;

	border-top:1px solid #d99d38;
	border-right:1px solid #d99d38;
	border-bottom:1px solid #d99d38;

	-webkit-border-radius:0 0.25em 0.25em 0;
	-moz-border-radius:0 0.25em 0.25em 0;
	border-radius:0 0.25em 0.25em 0;

	background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
	background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
	background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
	background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
	background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');

	-webkit-box-shadow:
		inset 0 1px 0 #faeaba,
		0 1px 1px rgba(0,0,0,.1);
	-moz-box-shadow:
		inset 0 1px 0 #faeaba,
		0 1px 1px rgba(0,0,0,.1);
	box-shadow:
		inset 0 1px 0 #faeaba,
		0 1px 1px rgba(0,0,0,.1);

	z-index:100;
}

Чекор 5: Стрелката

Во ред, веќе го завршивме главниот дел на тагот, па следниот чекор е да ја креираме стрелката. За да го сториме тоа ќе го искористиме псевдо елементот :before. Исто така ќе експериментираме со напредни техники на СЅЅ трансформации. Создавањето на овие елементи вклучува многу проби и грешки. Јас морав да се обидам со различни ширини и висини, проследени со позиционирање на врвот или дното за да ги направам што е моќно подобри! Иако секоја критика е добредојдена...

Ќе го користиме истиот градиент за позадината како и кај претходното, но со една мала разлика: затоа што ќе го ротираме квадратот кој ќе го направиме, ќе мора да го ротираме и градиентот за да се совпадне со главниот дел на тагот. Gradient app ми помогна со тоа што ми овозможување да ја менувам насоката на градиентот. Следниот чекор е креирање на рамки, на лево и на дното. На сè што е налево со цел создавање на стрелка се додава border-radius за да се измазни врвот и конечно да се применат трансформациите. Ќе го ротираме квадратот кој го направивме за 45 степени за да изгледа како стрелка. Го користиме кодот transform:45; заедно со оние со префикс.

.tag:before {
	content:'';

	width:1.30em;
	height:1.358em;

	background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
	background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
	background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
	background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
	background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
	
	position:absolute;
	left:-0.69em;
	top:.2em;

	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);

	border-left:1px solid #d99d38;
	border-bottom:1px solid #d99d38;

	-webkit-border-radius:0 0 0 0.25em;
	-moz-border-radius:0 0 0 0.25em;
	border-radius:0 0 0 0.25em;

	z-index:1;
}

Сега треба да имате нешто како ова во продолжение. Имајте на ум дека зумирав со цел да забележите дали стрелката е поврзана со главниот дел, ова одвај се забележува кога ќе го гледате при нормална големина.

Чекор 6: Отвор на тагот

Последниот чекор со што ќе го завшиме нашиот таг е да направиме мал отвор на него. Тука повторно ќе употребиме псевдо, но овој пат тоа ќе биде елементот :after. Она што го направивме за да го креираме отворот е прилично едноставно. Дефиниравме ширина и висина со ems за да се скалира соодветно. Следно додадовме рамка со голем радиус која ќе креира круг со рамка за да го означи. Потоа додадовме опаѓачка сенка (drop shadow) која е слична со senkata na tekstot (text-shadow). На крајот го позициониравме (користејќи ems).

.tag:after {
	content:'';

	width:0.5em;
	height:0.5em;

	background:#fff;

	-webkit-border-radius:4.167em;
	-moz-border-radius:4.167em;
	border-radius:4.167em;

	border:1px solid #d99d38;

	-webkit-box-shadow:0 1px 0 #faeaba;
	-moz-box-shadow:0 1px 0 #faeaba;
	box-shadow:0 1px 0 #faeaba;

	position:absolute;
	top:0.667em;
	left:-0.083em;
	z-index:9999;
}

Чекор 7: Додавање на некои стилови

За да ги направиме нашите тагови уште поубави, ќе додадеме некои стилови на лебди. Ќе треба да го додадеме ова на главниот дел на ознаката и стрелката (додека се сеќаваме да го ротираме градиентот за стрелката). Ја сменивме и бојата на границата на двете.

.tag:hover {
	background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');

	border-color:#e1b160;
}

.tag:hover:before {
	background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');

	border-color:#e1b160;
}

Чекор 8: Водење грижа за Internet Explorer

Ако сакате да ги прикажете таговите во најдобро светло и пред корисниците на Internet Explorer ќе мора да имате поинаков пристап кон овие тагови, започнувајќи со креирање на специфичен stylesheet за Internet Eplorer. Ќе ви објаснам зошто. Прво, многу од нашите СЅЅ3 ефекти нема да функционираат во постара верзија од IE9 (само некои работат со IE9 како што треба), но главниот проблем тука се трансформациите кои што не работат. За да се погрижиме за корисниците на IE, малку ќе го преуредиме нашиот код. Ќе започнеме со тоа што најпрво ќе го промениме нашиот HTML, со промена на div - wrapper и се што се наоѓа внатре:

<div class="wrapper">

	<a href="#" class="tag">
		<span class="arrow"></span>
		<span class="text">high resolution</span>
		<span class="end"></span>
	</a>

</div>

Повторно ќе користиме anchor tag, но со 3 span во него, еден ќе ни биде потребен за да ја креираме стрелката, главниот дел и крајот кој поседува граничен радиус.

Чекор 9: Слики за нашата IE верзија

За да бидеме сигурни дека нашите тагови ќе работат со IE, ќе мора да користиме слики. Започнуваме со бришење на сè што е под .wrapper стиловите, сè што е поврзано со таговите! Ќе треба да го пренесете следниов извадок. Едноставно додаваме некои позадински слики, но исто така го повторуваме и позадинскиот текст на х-оската, поради тоа што текстот може да биде со која било должина! Па дури и супер долга!

.arrow {
	width:15px;
	height:25px;
	float:left;

	background:url(../images/arrow.png) no-repeat;
}
.text {
	height:25px;
	float:left;

	padding-left:4px;
	padding-right:4px;

	background:url(../images/text.png) repeat-x;

	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size:0.75em;
	font-weight:bold;

	color:#996633;
	text-shadow:0px 1px 0px rgba(255,255,255,.4);

	line-height:23px;
}
.end {
	width:4px;
	height:25px;
	float:left;

	background:url(../images/end.png) no-repeat;
}


.tag:hover .arrow { background-image:url(../images/arrow_hover.png); }
.tag:hover .text { background-image:url(../images/text_hover.png); }
.tag:hover .end { background-image:url(../images/end_hover.png); }

Заклучок

Тоа е тоа! Ова е уште еден завршен курс и изгледа добро! Ги зедовме овие фантастични тагови и ги креиравме во СЅЅ, а истовремено се погриживме и за IE. Овие тагови може да се користат за најразлични намени - ајде, искористете ги во страничните ленти, блоговите, каде и да посакате.

Се надевам дека ви се допадна ова упатство, ви благодарам што го прочитавте.