Создание автоматического добавления QR кодов на веб-страницы
25 августа 2018 | Опубликовано в css | 1 Комментарий »
Есть несколько ситуаций, в которых вездесущие QR коды могут быть уместны или даже полезным при печати веб-страниц. В некоторых ситуациях может быть уместно добавить видимый адрес ссылки после слов, с которых происходит ссылка на напечатанной веб-страницы. Хотя это можно сделать, пользователю придется перепечатывать эту ссылку вручную. Если же вместо этого использовать QR код, можно будет просто отсканировать цифровую информацию с напечатанной страницы и перейти по ссылке, как в примере ниже:
Создание эффекта шелкографии для изображений с помощью CSS3
Создание визуального эффекта шелкографии — формирование изображения из маленьких цветных точек — может быть легко сделано с помощью CSS3 на веб-страницу. Этот способ использует множественные фоновые изображения в блочном элементе: один повторяющийся радиальный градиент, совмещенный с черно-белым фильтром, чтобы обесцветить цвета изображения.
В этом уроке мы создадим QR код с помощью Google Charts API. Хотя для этой цели можно использовать множество приложений. После знакомства с использованием этого варианта, Вам будет проще разобраться и в других.
В этом случае требуется всего четыре переменных, три последних или два средних из которых обычно нужны и для работы других приложений:
Переменная | Описание |
cht | Тип диаграммы, который нам нужен, в нашем случае это qr. |
chs | Размер генерируемого кода в пикселях, записывается как значение высоты x значение ширины. |
chl | Ссылка, которую нам нужно закодировать в QR код. |
choe | Кодировка текста. |
Последнее записывается после ссылки в самом конце следующим образом:
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
Перевод — Дежурка
Смотрите также:
Комментарии
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
549
- Насколько важно сегодня использовать Web Safe цвета?
538
- 20 наборов кистей для Фотошопа, которые вам пригодятся
530
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191
19 января 2021 в 15:34
HzYNbP uhatnbtodqty, [url=http://tvvibirbkkae.com/]tvvibirbkkae[/url], [link=http://uxnuajddcgpx.com/]uxnuajddcgpx[/link], dlskfqrfubgi.com
Ответить