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

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

2 способа прижать футер к нижней части страницы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как подключить кастомную форму комментариев в дочерней теме (Child Theme)

Задаем отдельный формат для комментариев в дочерней теме. Сами комментарии подключаем стандартным вызовом: В файле functions.php или можете создать отдельный плагин добавляем такой код: Вид...

Выводим список категорий, к которым относится данный кастомный тип записи

Выводим список терминов, к которым относится данный кастомный тип записи (custom post type): где my_custom_taxonomy – кастомная таксономия, например books. Выводим список категорий (элементов таксономии...

Событие ‘click’ не срабатывает на iPhone и некоторых мобильных браузерах – решение проблемы

Часто в мобильной версии сайта используется кнопка типа “бургера” для вызова основного меню сайта. На эту кнопку вешается событие 'click' с обработчиком – вызовом функции,...

Выводим рекомендованные кастомные записи из кастомной таксономии

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

Выводим список категорий определенной кастомной таксономии

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

Выводим список кастомных таксономий и кастомных записей из каждой таксономии

Суть задачи – вывести на странице все кастомные категории и кастомные записи из каждой категории. В моем примере выводятся кастомные таксономии partner_cat и кастомные записи...

Добавляем в исходный код время изменения файлов css и js для сайтов на CMS WordPress

Краткое вступление. Есть сайт на WordPress, сайт живой, посещаемый и вполне рабочий. Нужно внести какие-то изменения в стили и в скрипты. Все изменения произведены, но...

Делаем блоки одинаковой ширины с помощью Javascript

Можно сделать блоки одинаковой ширины с помощью Flex, можно задать ширину с помощью фиксированных размеров, но есть задача когда, нужно сделать блоки одинаковой ширины, основываясь...

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

В общем, когда-то давно была задача сделать рамку вокруг кнопки с градиентом, оказалось, что это не так просто. Пробовал сделать с помощью SVG, но не...

Минификация и сжатие HTML в GULP 4

Уменьшаем вес файлов HTML – для этого убираем все переносы и лишние пробелы, а так же все комментарии. Данную задачу выполняем при билде продакшена, потому...

Создание и использование Source Maps для css и js в GULP 4

Хотелось бы в двух словах рассказать, как настроить Source Maps для GULP 4, но не получится вырвать из контекста просто пару строк кода, поэтому разобью...

Создание спрайтов в GULP 4 с поддержкой Retina

Для оптимизации запросов на сервер можно объединить иконки и небольшие картинки, которые используются в css, в один файл – спрайт. Есть различные сервисы для автоматической...

Как оптимизировать и максимально сжать изображения в GULP 4 с помощью gulp-imagemin

В общем, перепробовал десятки разных плагинов и настроек, но .jpg совсем не оптимизировались, а иногда даже наоборот становились больше по весу, зато .png оптимизировались отлично....

Изменение внешнего вида чекбоксов и радио-кнопок с помощью CSS

Изменение внешнего вида для чекбокса с помощью CSS HTML для чекбокса или радио-кнопок CSS для чекбокса Пример обновленного дизайна для чекбокса Изменение внешнего вида для...

Бесконечный анимированный фон с эффектом параллакса

Бесконечный анимированный фон с эффектом параллакса создан на основе варианта 2 из этой статьи HTML CSS Рабочий пример бесконечного анимированного фона с эффектом параллакса

Бесконечный фон с автопрокруткой

Вариант 1 – с помощью JS меняем позицию фонового рисунка Вариант 2 – без JS с помощью CSS-анимации меняем позицию фоновой картинки Вариант 3 –...

Как получить параметр из URL страницы

Как получить нужный параметр из адреса страницы? Итак, у нас есть рекламная кампания, и при переходе по ссылкам из этой кампании, мы получим url типа...

Выводим колонку “Размер” для библиотеки медифайлов в админке CMS WordPress

Задача такая: просмотреть несколько сайтов и найти изображения, которые не оптимизированны для web’а, так как есть файлы весом более 5МБ. Как оптимизировать правильно изображения для...

Плавный скроллинг по странице к нужному элементу с использованием плагина PageScroll2id

В предыдущей статье Плавный скролл по странице к нужному ID (Scroll to id) рассматривал простой js-скрипт плавного скролла для навигации по странице, но в том...

Плавный скролл по странице к нужному ID (Scroll to id)

Очень популярная функция на различных одностраничниках – плавный скролл к нужному элементу на этой же странице. Чаще всего используется при навигации по меню. Если использовать...

Простой способ задать отступы между flexbox элементами

Самый простой способ установить минимальное расстояние между элементами flexbox – используем margin: 0 5px для дочерних элементов .item и отрицательный отступ margin: 0 -5px для...

Использование CSS-функции calc() в LESS

В CSS есть функция calc(), которая даёт возможность рассчитать значения свойств CSS во время их определения. Функция calc() принимает в качестве параметра математическое выражение, результат...