Интересные работы

Свежие записи

Кастомный tootlip с помощью CSS и jQuery

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

Мой опыт работы с крауд-ссылками

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

background-position чуть подробнее

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

Как задетектить скролл вниз или вверх в браузере

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

Как задать отдельные стили только для браузера IE 11 и Edge

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

SEO продвижение сайтов с помощью вечных ссылок

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

Эффективный способ перенести свой e-commerce проект на WordPress на новый хостинг и не потерять прибыль

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

Как задать длину цитаты (excerpt) или изменить ее вид

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

Пакетная оптимизация картинок для Google Page Speed Insight

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

Быстрое копирование сайта с помощью плагина website-scraper

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

fadeIn() для flex-контейнера

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

Убираем из адреса страницы .html для статических сайтов

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

Как объединить 2 массива в один

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

Как добавить эффект свечения (тень) для SVG при наведении

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

Анимированная светящаяся при наведении кнопка с помощью CSS

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

Что лучше использовать – чистый HTML, самописный движок или CMS WordPress ?

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

Сжатие и конвертирование видео для сайта

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

Как создать блок с видео-фоном на сайте

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

Safari отображает семизначные числа как номера телефонов

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

Задать цвет плейсхолдеру (placeholder)

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

Связь слайдов owl-carousel с другими блоками

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

Разрешаем пользователю прокомментировать запись только один раз

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

2 способа прижать футер к нижней части страницы (подходит для IE10 & Edge)

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

Задаем размер 100vh без прокрутки для мобильных устройств

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

Валидация email с помощью javaScript

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

Скопировать текст в буфер обмена нажатием на кнопку

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

Выводим дату для копирайта в футере с помощью функции date()

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

Убрать стрелки в input[type=”number”] с помощью CSS

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

Добавляем переводы в дочернюю тему (child theme)

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

Правильное отображение амперсанда в блоке SyntaxHighlighter – & вместо &amp;

Суть проблемы – при добавлении кода в визуальном редакторе с помощью плагина SyntaxHighlighter символ & отображается как &amp; А значит при копировании данного кода у...