В связи с тем, что в последнее время много внимания уделяется написанию сценариев для DOM, кажется, что прошли годы с тех пор, как я увидел что-то действительно новое в простом, старом CSS. Так было до сегодняшнего дня.
Khmerang.com опубликовал отличную небольшую статью, объясняющую, как они достигли шероховатого, выветренного взгляда на свои заголовки. Нет, это не SIFR и даже не традиционная замена изображений. На самом деле, это умная вариация ИК-техники Тома Гилдера и Левина Александра «старая школа», в которой рекомендовалось наложение непрозрачного слоя изображения на текст , а не гораздо более распространенный метод простого шунтирования исходного текста. области просмотра (то есть ‘ text-indent:-1000em
Новая идея Хмеранга состоит в том, чтобы поменять слой изображения с главным образом прозрачным, проблемным рисунком, оставляя текст основного заголовка с поцарапанной и потертой поверхностью.
Хорошим моментом является то, что шаблон повторяется, но редко когда-либо одинаково выравнивается с одной и той же буквой, поэтому каждый символ должен казаться одноразовым оригиналом.
Как вы, возможно, уже поняли, есть несколько предостережений для рассмотрения.
- Текст по-прежнему можно выбрать, но это сложнее, чем обычно. Выбор внутри заголовка практически невозможен. Тем не менее, большинство других методов IR не имеют шансов когда-либо разрешить выделение текста, поэтому этот метод уже является шагом вперед по сравнению с этим.
- Вам нужно будет выбрать большой, толстый шрифт с большой площадью поверхности, чтобы получить полезный эффект. Судя по нескольким быстрым тестам, более легкие шрифты в основном выглядели немного грязно.
- Метод требует некоторой немного грязной разметки —
<h2><span></span>Worn Text</h2>
Тем не менее, это, безусловно, дает очень особенный результат, и, хотя он вряд ли будет тем приемом, который вы бы использовали в проекте за проектом, он выглядит как полезное дополнение к арсеналу.
Хорошо сделано.