Статьи

Rip it up: Worn Type с использованием CSS

В связи с тем, что в последнее время много внимания уделяется написанию сценариев для DOM, кажется, что прошли годы с тех пор, как я увидел что-то действительно новое в простом, старом CSS. Так было до сегодняшнего дня.


Хмеранг изношенного типа CSS трюк
Khmerang.com опубликовал отличную небольшую статью, объясняющую, как они достигли шероховатого, выветренного взгляда на свои заголовки. Нет, это не SIFR и даже не традиционная замена изображений. На самом деле, это умная вариация ИК-техники Тома Гилдера и Левина Александра «старая школа», в которой рекомендовалось наложение непрозрачного слоя изображения на текст , а не гораздо более распространенный метод простого шунтирования исходного текста. области просмотра (то есть ‘ text-indent:-1000em

Новая идея Хмеранга состоит в том, чтобы поменять слой изображения с главным образом прозрачным, проблемным рисунком, оставляя текст основного заголовка с поцарапанной и потертой поверхностью.

Хорошим моментом является то, что шаблон повторяется, но редко когда-либо одинаково выравнивается с одной и той же буквой, поэтому каждый символ должен казаться одноразовым оригиналом.

Как вы, возможно, уже поняли, есть несколько предостережений для рассмотрения.

  1. Текст по-прежнему можно выбрать, но это сложнее, чем обычно. Выбор внутри заголовка практически невозможен. Тем не менее, большинство других методов IR не имеют шансов когда-либо разрешить выделение текста, поэтому этот метод уже является шагом вперед по сравнению с этим.
  2. Вам нужно будет выбрать большой, толстый шрифт с большой площадью поверхности, чтобы получить полезный эффект. Судя по нескольким быстрым тестам, более легкие шрифты в основном выглядели немного грязно.
  3. Метод требует некоторой немного грязной разметки — <h2><span></span>Worn Text</h2>

Тем не менее, это, безусловно, дает очень особенный результат, и, хотя он вряд ли будет тем приемом, который вы бы использовали в проекте за проектом, он выглядит как полезное дополнение к арсеналу.

Хорошо сделано.