Как да си направим текстурирани текст, не само в Photoshop някои практически начини
Просто zafotoshopte
Както навсякъде, може просто фалшив график, понякога си заслужава. Недостатъкът е, че подобен тест е статичен, а за да го промените, трябва да пресъздаде образа. Изображенията могат да бъдат и много на тегло, особено ако се опитате да си купите по-високите резолюции и т.н. Въпреки това, този метод работи:
-WebKit-фон-клип: текст;
Този имот не е стандартизирана, но тя е измислена за една цел. Предимството на този метод е, че този имот може да се използва в тандем с -webkit-текст-запълваща цвят: прозрачен. You "скриване" на текста само в браузъри, които поддържат горната имота. Divya Manian документира този метод преди няколко години.
Именно този текст, който може да се редактира, тя е достъпна за търсачките и т.н. По-долу са някои примери за Jintos:
HTML5 и CSS3 практика от нула до резултата!
попълване SVG
В SVG, можете да създадете този текст с помощта на елемента
Този код може да бъде вкаран директно в HTML. По-долу е пример за C.Y. Парк:
CSS polifill използвайки SVG
Тим Pietrusky създаден polifill имот -webkit-фон-клип, който използва SVG в подкрепа на по-стари браузъри. Много по-бързо и по-лесно да пиша CSS код вместо SVG, така че този метод е много добър и е с отлична поддръжка в браузъра.
микс-смес режим: екран;
Друг начин. Но това не съм виждал! Самият метод CSS е сравнително нов слой. един елемент към друг, както в Photoshop (например, «екран», «умножи», «облекчи» и т.н.) могат да бъдат директно хвърли. Изображението може да бъде наложен върху текста, чрез създаване на текст ефект с тапети. За първи път този метод съм виждал Giana на CodePen:
Тя работи на принципа:
Цветът на текста е черен.
Това се отнася за всички микс-смес-режим на текста и фона имот: екран;
Вторият екземпляр от същия текст (бяло само) използва една и съща среда, но със стойността на микс-смес режим: умножете;
С този метод е лесно да се създаде текстурирани текст. Когато показалецът-събития могат да бъдат използвани, за да напусне текст кликва, но е трудно да следите на това, което правите. Основното предимство е, че е напълно CSS метод, който работи в напълно Firefox, но не само в -webkit- браузъри.
Редакция: Екип webformyself.
HTML5 и CSS3 практика от нула до резултата!
Най-IT новини и уеб разработки на нашия канал Телеграма
