Web-мастеру и не только
Полезные решения для Web-мастеров
Web-мастеру и не только - RSS-канал
Web-мастеру и не только - Карта сайта
Создание скриншотов сайтов с помощью Headless Chrome
23.11.2019 | Категория: Web-мастеру и не только | Автор: ManHunter
Создание скриншотов сайтов с помощью Headless Chrome
Ранее я рассказывал о сервисах для создания скриншотов сайтов, но время не стоит на месте. Если у вас в распоряжении есть свой сервер, то вы легко сможете организовать собственный сервис для создания скриншотов сайтов. Начиная с версии 59, браузер Chrome может работать в так называемом "безголовом" режиме, то есть он реально не отрисовывает содержимое web-страницы, а все формирует в памяти. При этом он работает из командной строки и может быть установлен на сервер.
Читать статью целиком »
Просмотров: 2221 | Комментариев: 7
Стилизация недоступных ссылок на картинки
21.11.2019 | Категория: Web-мастеру и не только | Автор: ManHunter
Когда-то давно я уже поднимал тему обработки недоступных ссылок на картинки, в том случае "битое" изображение подменялось на другое. Но есть и другие варианты стилизации недоступных изображений, как бы странно это ни звучало. Стилизация основана на интересном свойстве элемента <img>, а именно на том, что контент из псевдо-элементов :before и :after для изображения отображается только в том случае, если источник изображения оказывается недоступен. При нормальном положении дел эти псевдо-элементы игнорируются. Таким образом, в случае ошибки на страницу будет добавлена определенная информация. Делается это при помощи CSS:Code (HTML) : Убрать нумерацию
- <style type="text/css">
- img:before {
- content: "Извините, изображение " attr(alt) " недоступно";
- color: #FF0000;
- display: block;
- margin-bottom: 5px;
- }
- img:after {
- content: "Источник: " attr(src);
- color: #0000FF;
- display: block;
- margin-top: 5px;
- }
- </style>
Читать статью целиком »
Просмотров: 1262 | Комментариев: 2
Определение состояния подключения к сети на JavaScript
21.10.2019 | Категория: Web-мастеру и не только | Автор: ManHunter
Определение состояния подключения к сети на JavaScript
В очередной раз бродя по интернетам, я наткнулся на упоминание электронного журнала The Disconnect. Суть его в том, что контент сайта становится доступен только когда пользователь отключится от интернета. Стоит включить соединение обратно и текст вновь скрывается. Весь этот эпатаж я оставлю на совести разработчика, но мне стало интересно, как реализована проверка состояния подключения.
Читать статью целиком »
Просмотров: 3484 | Комментариев: 3
Определение типа банковской карты по ее номеру
17.09.2019 | Категория: Web-мастеру и не только | Автор: ManHunter
Определение типа банковской карты по ее номеру
Полезная информация в дополнение к опубликованной ранее статье о проверке корректности номера банковской карты. Помимо прочих данных, в номере карты закодирован ее тип, например, Visa, MasterCard или UnionPay. В интернетах есть информация о кодах IIN (Issuer Identification Number), надо только переложить ее на нужный вам язык программирования.
Читать статью целиком »
Просмотров: 2096 | Комментариев: 0
Раскрытие текста при нажатии на ссылку
13.08.2019 | Категория: Web-мастеру и не только | Автор: ManHunter
Раскрывающиеся блоки текста бывают очень удобны, когда требуется разместить на странице достаточно объемные текстовые и/или графические материалы второстепенной важности. Это могут быть какие-то пояснительные тексты к основному материалу, объемные цитаты и другая информация, которая может быть полезной для пользователя, но при этом не должна отвлекать от чтения. Сегодня я расскажу, как это можно сделать максимально просто с минимальным использованием скриптов и стилей.Начнем с верстки. У нас есть блок текста, который будет раскрываться, и ссылка, при нажатии на которую это должно происходить. Все самое обычное, никаких нестандартных приемов верстки.
Code (HTML) : Убрать нумерацию
- <div class="textbox" id="mytext">
- Тут находится большой текст, который мы должны показать при нажатии на ссылку
- </div>
- <div>
- <a href="#" onclick="document.getElementById('mytext').classList.add('opened');
- return false;">Посмотреть весь текст</a>
- </div>
Code: Убрать нумерацию
- <style type="text/css">
- .textbox {
- overflow: hidden;
- height: 100px;
- border: 1px dashed #A0A0A0;
- }
- .opened {
- overflow: auto;
- height: auto;
- }
- .opened+div {
- display: none;
- }
- </style>
Читать статью целиком »
Просмотров: 10297 | Комментариев: 9
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 34,343 раза
Поблагодарили 34,343 раза
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 380 |
 |
 |