Есть несколько ситуаций, в которых вездесущие QR коды могут быть уместны или даже полезным при печати веб-страниц. В некоторых ситуациях может быть уместно добавить видимый адрес ссылки после слов, с которых происходит ссылка на напечатанной веб-страницы. Хотя это можно сделать, пользователю придется перепечатывать эту ссылку вручную. Если же вместо этого использовать QR код, можно будет просто отсканировать цифровую информацию с напечатанной страницы и перейти по ссылке, как в примере ниже:

Создание эффекта шелкографии для изображений с помощью CSS3 

Создание визуального эффекта шелкографии — формирование изображения из маленьких цветных точек — может быть легко сделано с помощью CSS3 на веб-страницу. Этот способ использует множественные фоновые изображения в блочном элементе: один повторяющийся радиальный градиент, совмещенный с черно-белым фильтром, чтобы обесцветить цвета изображения.

В этом уроке мы создадим QR код с помощью Google Charts API. Хотя для этой цели можно использовать множество приложений. После знакомства с использованием этого варианта, Вам будет проще разобраться и в других.

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

Последнее записывается после ссылки в самом конце следующим образом:

http://example.com/1.html&choe=UTF-8

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

<h1><a href="/613/Create-A-SilkScreen Effect">Create a Silkscreen Effect For Images With CSS3</a></h1>

Если сайт состоит всего из нескольких страниц, можно записать стили для создаваемого содержимого для каждой страницы отдельно, например, во встраиваемых стилях. Очевидно, что нам не нужно отображение QR кодов на веб-странице в браузере, так что положим их в запрос @media для печати:

@media print { 
        h1 {
                margin-right: 200px;
                margin-bottom: 2rem;
                line-height: 1.2;
        }
        h1 a:after {
                content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=http://thenewcode.com/613/Create-A-SilkScreen-Effect&choe=UTF-8);
                position: absolute;
                right: 0; top: 0;
        }
}

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

Если подобное нужно сделать для большого сайта, добавление специальных свойств каждой странице для создания QR кодов будет очень неэффективно. Так что если Вы используете PHP, можно создать ссылку текущей страницы для Google API или другого подобного приложения следующим образом во встроенных стилях:

@media print { 
        h1 {
                margin-right: 200px;
                margin-bottom: 2rem;
                line-height: 1.2;
        }
        h1 a:after {
                content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=http://<?=$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];?>&choe=UTF-8);
                position: absolute;
                right: 0; top: 0;
        }
}

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

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание дробей с помощью замены на символ из шрифтов OpenType
• Создание адаптивной галереи изображений HTML5 с подписями
• Фоны SVG в виде штриховки, сетки и шахматной доски