3Д текстуални ефекат са ЦСС -ом

Да видимо како се то радиМи требамо:

• Основно познавање ХТМЛ -а и ЦСС -а
• Уређивач кода
• Наш претраживач

Корак 1

Направићемо фасциклу на нашем локалном сајту да сачувамо датотеке које ће нам требати, назваћу је "тект_3д" у њој други позив цсс
ЕНЛАРГЕ
ЕНЛАРГЕ

Корак 2

Ићи ћемо у уређивач кода и креирати нову датотеку индек.хтмл коју ћемо сачувати у корену фасцикле „3д_тект“ коју смо креирали у претходном кораку, у коју ћемо написати нашу основну хтмл структуру и додати референцу на цсс датотеку под називом "стиле. ццс" коју ћемо креирати касније.
хтмл код

Корак 3

У тело ћемо додати линију у коју ћемо поставити ознаку

којој ћемо доделити класу "3д-текст" коју ћемо затим креирати у .цсс датотеци, сместићу било који текст унутар ове ознаке на тестирање.

3-Д текстуални ефекат

Ако га тренутно видимо у прегледачу, нећемо видети велике промене, само нормалан и тренутни текст, тако да можемо имати 3Д изглед, потребно је дефинисати нека својства кроз цсс. Само напред.
ЕНЛАРГЕ

Корак 4

У нашем уређивачу кода креираћемо нову .цсс датотеку коју ћу назвати стиле.цсс. У ово ћемо поставити својства тако да наш текст има онај 3Д ефекат који желимо да постигнемо.

Корак 5

Прво ћемо почети да уређујемо наш цсс, дефинисаћемо величину нашег тела, за то ћемо му дати апсолутни положај са ширином и висином од 100%.

 тело {положај: апсолутно; ширина: 100%; висина: 100%} 

Корак 6

У наш .ццс ћемо уписати својства класе "3д-тект" које смо коментарисали у кораку 3. Почећемо дефинисањем фонта, посебно волим да користим фонт "Хелветица Неуе", наравно да можете користите га са фонтом који желите. У овом случају поставићу величину фонта на око 80 пиксела; подебљано или подебљано … И овај пут ћу оставити у белој боји. Ако га видимо у свом прегледачу, приметићемо да је текст нестао, то је зато што смо га ставили у бело, а позадина прегледача је такође бела …

 тело {положај: апсолутно; ширина: 100%; висина: 100%} .3д_тект {фонт-фамили: "Хелветица Неуе", Хелветица, Ариал, санс-сериф; фонт-сизе: 80пк; фонт-веигхт: болд; боја: #ффф; } 

У прегледачу ћемо видети да текст нестаје
ЕНЛАРГЕ

Корак 7

Видели смо да је у претходном кораку текст нестао, сада нам је потребан да се појави и са 3Д ефектом. За ово је потребно само да додамо сенку нашем тексту користећи својство тект-схадов, на следећи начин.

 тело {положај: апсолутно; ширина: 100%; висина: 100%} .3д_тект {фонт-фамили: "Хелветица Неуе", Хелветица, Ариал, санс-сериф; фонт-сизе: 80пк; фонт-веигхт: болд; боја: #ффф; тект-схадов: 0 1пк 0 #ццц; } 

ЕНЛАРГЕ

Видимо да смо постигли благи ефекат сенчења, али није довољно да изгледа 3Д, на срећу цсс нам омогућава да комбинујемо неколико сенки унутар својства текст-сенке одвојених зарезом, искористићемо ово да ставимо више сенке на различитој удаљености од нашег текста и са различитим тоновима боја од тамније до светлије, како бисмо створили ефекат, али морамо и да комбинујемо ове сенке користећи ргба боје и прозирнице да бисмо дали тај ефекат ширења на крају сенчење.
На овај начин наш цсс код би изгледао овако.

 тело {положај: апсолутно; ширина: 100%; висина: 100%} .3д_тект {фонт-фамили: "Хелветица Неуе", Хелветица, Ариал, санс-сериф; фонт-сизе: 80пк; фонт-веигхт: болд; боја: #ффф; текстуална сенка: 0 1пк 0 #ццц, 0 2пк 0 #ц9ц9ц9, 0 3пк 0 #ббб, 0 4пк 0 #б9б9б9, 0 5пк 0 #ааа, 0 6пк 1пк ргба (0, 0, 0, .1), 0 0 5пк ргба (0, 0, 0, .1), 0 1пк 3пк ргба (0, 0, 0, .3), 0 3пк 5пк ргба (0, 0, 0, .2), 0 5пк 10пк ргба (0 , 0, 0, .25), 0 10пк 10пк ргба (0, 0, 0, .2), 0 20пк 20пк ргба (0, 0, 0, .15); } 

А резултат ефекта би био следећи …
ЕНЛАРГЕ
Ово је све за сада. Ово је .зип са датотекама, било каква питања или сугестије могу се послати путем коментара, поздрава …
тект_3д20150917130359.зип 694 бајта 217 преузимањаДа ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен