Если по дизайну для текста нужна тень то обычно мы используем CSS-свойство text-shadow в таком формате: И получаем такую простую тень: Темная тень на светлом...

Задача – добавить на сайт всплывающие подсказки, но без подключения дополнительных библиотек, потому как их и так подключено много (но ни в одной нет tooltips)....

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

В общем, background-position – очень простое свойство в CSS используемое, чтобы указать позицию фонового изображения. Есть несколько вариантов синтаксиса, чтобы указать позицию фона: Числовое значение...

Простой полезный скрипт для анимаций или какого-либо отдельного функционала Пример, как скрипт определяет направление скролинга в браузере, просто поскрольте колесом, и будет виден текст направления...

Задача такая, для IE11 и Edge задать отдельные стили для SVG, потому что в этих браузерах не поддерживаются фильтры для свг и соответственно свг-шка не...

Не буду лить воду про важность продвижения сайтов в интернете и про ссылочное продвижение, которое “должно было умереть” еще 10 лет назад по версиям различных...

Для e-commerce проектов особенно важна устойчивая работа хостинга. Плохой Uptime и медленная работа сервера негативно отражаются на прибыли проекта и SEO-показателях. Причиной смены хостинга также...

Цитата записи (excerpt) выводится внутри цикла таким кодом: По умолчанию, она обрежется длиной в 55 слов и в конце будут такие символы […], что не...

Репозиторий с оптимизатором картинок на Github – https://github.com/DenisShapkun/images-optimization. В общем, это моя секретная разработка для сжатия картинок (PNG, JPEG, GIF, SVG). Все сейчас гоняются за...

Копирование сайта с помощью Website Scraper – https://www.npmjs.com/package/website-scraper. Запускаем консоль в нужной директории и устанавливаем плагин website-scraper с помощью команды: Создаем файл scraper.js с примерно...

Суть задачи в том, чтобы сделать плавное появление и скрытие flex-контейнера. Если использовать просто fadeIn(), то блоку будет задано свойство display: block;. Можно, конечно, flex-контейнер...

Редирект с .html Задача простая – убрать из урла расширение страницы .html. Чтобы вместо было: Нужно в файл .htaccess добавить такие директивы:

Простой пример, как объединить 2 массива в один, чтобы соответствующие элементы каждого массива были помещены в отдельные объекты объединенного массива. Скрипт: Получаем такой массив с...

Простой пример, как добавить эффект свечения для svg-элемента с помощью добавления тени. Итак, у нас есть такой svg-файл с градиентом: Первым делом, кидаем файл в...

Простой пример очередной анимированной кнопки с эффектом свечения при наведении. Можно сделать свечение кнопки и без наведения, это уже дело вкуса и дизайна. HTML для...

Тема вопроса на самом деле гораздо шире. Что лучше использовать для своего сайта? Статичную верстку на HTML, популярную CMS или самописный движок? Я не буду...

Разберемся, какие видео нужно использовать на своем сайте, какие нужны форматы и какого размера видео должно быть. Разбирать будем видео для тега <video>, понятно, что...

Когда-то я уже делал небольшую статью про создание видео-фона в блоке (Делаем видео-фон для блока с помощью CSS). Но в статье было много лишнего кода...

Суть проблемы – мобильные браузеры, в частности, Safari отображают семизначные числа как ссылку на телефон. В общем-то, это было бы удобно, если бы, это был...

Для различных вариантов дизайна страниц нужно указывать разный цвет для плейсхолдеров в формах. Рассмотрим такой вариант input’а: Для изменения цвета placeholder пропишем такие правила в...

В общем, идея такая, слайдер листается и где-то рядом возле него меняются картинки в блоке, или фоновые картинки, или еще какие-то связанные со слайдами элементы....

Разрешаем пользователю прокомментировать запись только один раз – например, это нужно для кастомного типа записи, в котором под комментарием подразумевается отзыв с оценкой. При этом...

Рассмотрим 2 наиболее часто применяющихся примера. Для обоих примеров будет общий HTML: И общие правила стилей для внешнего вида: Весь этот код просто для примера,...

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

Простая валидация email с помощью javaScript. Суть в том, чтобы не дать отправить форму, пока не будет правильно введен email. Форма обязательно должна валидироваться еще...

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

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

Простой пример, как убрать стрелки в поле input[type=”number”] с помощью CSS: Важное дополнение: по прежнему можно менять числа в поле обычным скроллом мышки или стрелками...

Для перевода сайта используем Loco Translate. В файл функций добавляем такой код: В это коде: languages – это папка, которая находится в дочерней теме и...