Pull to refresh
  • by relevance
  • by date
  • by rating

Каптча: спрайты, минные поля и лицензирование

Website development *
Хочу представить три авторских способа организации анти-спам защиты. Первый основан на технологии CSS спрайтов, второй на узкой специализации ботов, а третии на почтовых уведомлениях.

CSS sprites1


CSS sprites каптча
Суть проста изображение с каптчей содержит 20–30 символов, только 4–5 из них идущие подряд являются кодом, начинаются они то с 1го символа то с 20го в общем с произвольного, остальное — мусор, с помощью позиционирования бекграунда в слое видны только нужные символы. Человек введёт их, бот распознает и введёт все 30. Вуаля! ;)

Остальные два
Total votes 63: ↑57 and ↓6 +51
Views 944
Comments 178

qpimg — динамическое создание CSS спрайтов

Client optimization *
При разработке сайтов все чаще и чаще приходиться использовать технологию CSS спрайтов, дабы уменьшить кол-во изображений загружаемых на странице. Создание и редактирование таких изображений является не простой задачей, на которую тратится довольно таки много времени: изначально нужно скомпоновать изображения в графическом редакторе, а после описать позиционирование и размеры каждого элемента в файле стилей (CSS). Редактирование элементов и изменение их размеров может повлечь глобальный пересмотр спрайта, вплоть до полного его пересоздания.

Читать дальше →
Total votes 65: ↑57 and ↓8 +49
Views 2.7K
Comments 29

Годятся ли CSS-спрайты для шрифтов?

CSS *
Возникла мысль: а нельзя ли использовать CSS-спрайты для того, чтобы выводить заголовки необычными шрифтами?

Кажется, что сделать это не так и сложно.
  1. Нужно подготовить CSS-спрайт — вывести все буквы в картинку и сделать CSS, в котором для каждой буквы есть свой класс, позиционирующий фон на нужное место в картинке.
  2. Помечаем строку, которую нужно преобразовать, специальным классом.
  3. В момент загрузки выбираем все помеченные строки и для каждой их буквы создаем span с классом, соответствующим букве из спрайта.
  4. Оригинальный текст скрываем. Возможно, прозрачностью.

Наконец, можно сделать серверный код, который бы из шрифта (TrueType, например), автоматом бы делал спрайтовую заготовку.

При таком методе точно будет проблема с кернингом. Так что хорошо он будет работать не для всех шрифтов. Но, наверное, кернинговые пары можно было бы задать марджинами.

Кто-нибудь видел такое решение?

Update:
Благодаря хабраюзеру nuxdie нашлась готовая реализация этой идеи: fontjazz.com. Не позволяет только текст из заголовка копировать.

Update 2:
Хабраюзер Magarich предлагает свою реализацию — 5socks.net. Здесь можно и копировать. Жалко, что из-за прозрачности текста выделение тоже совсем не видно.
Total votes 44: ↑31 and ↓13 +18
Views 1.5K
Comments 45