Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS
Webdesign

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

by
Length:MediumLanguages:
This post is part of a series called Bringing Premium Pixels to Life.
Quick Tip: Create a Rating System With CSS, Web fonts and Sprites
Styling Dark Select Dropdown With Dropkick.js

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

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

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


Чекор 1:

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


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

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

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


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

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


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

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

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

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

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


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

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

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

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

Arrow and base

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

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

Hole created

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

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


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

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

IE Images

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


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

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


Заклучок

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

Completed

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.