HTML

Отключить кнопку отправки, если поле пустое

Отключить кнопку отправки, если поле пустое Javascript Второй вариант для проверки поля

Круговая диаграмма с помощью HTML и CSS (Pie Chart with HTML and CSS)

Вы можете создать круговую диаграмму в HTML, используя простую функцию CSS под названием conic-gradient. Во-первых, мы добавляем <div> элемент…

Анимированный вывод числа от нуля до заданного

Выводим число, например, подсчет голосов, или рассчет процентов после выполнения какого-либо действия. Можно выводить все…

Определяем ширину и высоту рабочей области браузера

Итак, задача такая — проверить отображение каких-то элементов на разных разрешениях экрана. Но современная проблема…

Не отображать точки (slick dots) для одного слайда

Простая задача — если слайд всего один, то не отображать slick dots, чтобы слайдер выглядел…

Удалить шифрованный EFI раздел в Windows 7/10, создать новый раздел из командной строки

Раздел EFI -обязательный для GPT разметки на системах с UEFI. Стандартный размер раздела EFI равен…

Настройка Slick-карусели (slick-слайдер)

Простые примеры настройки slick-карусели. Официальная документация здесь — https://kenwheeler.github.io/slick/, ссылка на GIT — https://github.com/kenwheeler/slick/. Подключаем…

Как задать тень элементу со скошенными углами или неправильной формой с помощью webkit-clip-path и filter: drop-shadow

Задача — есть элементы с неправильной формой, пятиугольники, шестиугольники, скошенные углы, элементы построены с помощью…

Создаем фильтрацию элементов с помощью библиотеки Isotope

Этот пост вытащил из многолетних черновиков, поэтому особо расписывать не буду. Просто юзайте код. Итак,…

Проблема с отображением flex-direction: column в IE

Суть проблемы — в Internet Explorer если задаем отображение блоков в колонку flex-direction: column, то…

Google глючит или как корпорация забивает на свои же сервисы, которые не приносят прибыль

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

Включить видео с youtube после нажатия на кнопку или элемент

Суть задачи такая — запустить видео по нажатию на какой-то элемент. Самый простой вариант —…

Как убить зависший локальный сервер с ошибкой «EADDRINUSE: address already in use»

В общем, развернутый локальный сервер, запущенный на Node, пришлось закрыть без остановки, и после этого…

Ссылки для звонка/чата/перехода для мессенджеров (Skype, Viber, Telegram, WhatsApp, Facebook Messenger)

Постоянно приходится вспоминать как повесить правильную ссылку на чат скайпа или вайбера. Давно уже пора…

Настройка мобильного меню на сайте

Тема не новая, просто хочу вынести пример мобильного меню, который я использую чаще всего. На…

Как быстро переводить много текстов на разные языки с помощью Google Sheets и GoogleTranslate

Полезный инструмент, чтобы быстро перевести много небольших текстов на разные языки с помощью Google Sheets…

Рандомное добавление к числу

Пример простого скрипта с добавление к числу случайного числа в выбранном диапазоне. Для чего это…

Делаем картинку такой же высоты как соседний блок с помощью flex и object-fit

Задача такая, слева размещена картинка, а справа блок, внутри которого какой-то контент или другие блоки….

Как удалить несколько последних слайдов в слайдере Slick

Задача — выводить в десктопной версии несколько слайдов с определенным дизайном, а в мобильной версии…

Как задать тексту фоновый рисунок с помощью CSS-свойства background-clip

Простой пример, как можно задать для текста фоновое изображение с помощью CSS-свойства background-clip. HTML —…

Онлайн CSS-генератор треугольников

CSS генератор треугольников, иногда приходится применять, чтобы создать уголки для каких-то элементов с помощью CSS….

Препроцессор SCSS-to-CSS с помощью GULP4

В общем, очередная секретная разработка для ускорения процесса создания сайтов.  Обычно для верстки я использовал…

Оптимизация изображений без сторонних приложений с помощью Gulp 4

Мой репозиторий — https://github.com/DenisShapkun/images-optimization. Используем вместо Tinypng десктопный вариант Gulp. Пакетная оптимизация изображений формата PNG,…

Множественная тень с эффектом свечения с помощью CSS

Если по дизайну для текста нужна тень то обычно мы используем CSS-свойство text-shadow в таком…

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

Задача — добавить на сайт всплывающие подсказки, но без подключения дополнительных библиотек, потому как их…

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

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

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

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

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

Задача такая, для IE11 и Edge задать отдельные стили для SVG, потому что в этих…

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

Репозиторий с оптимизатором картинок на Github — https://github.com/DenisShapkun/images-optimization. В общем, это моя секретная разработка для…

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

Копирование сайта с помощью Website Scraper — https://www.npmjs.com/package/website-scraper. Запускаем консоль в нужной директории и устанавливаем…

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

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

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

Редирект с .html Задача простая — убрать из урла расширение страницы .html. Чтобы вместо было:…

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

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

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

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

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

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

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

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

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

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

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

Суть проблемы — мобильные браузеры, в частности, Safari отображают семизначные числа как ссылку на телефон….

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

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

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

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

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

Рассмотрим 2 наиболее часто применяющихся примера. Для обоих примеров будет общий HTML: И общие правила…

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

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

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

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

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

Задача простая — копировать текст из какого-то блока нажатием кнопки, например, это может быть код…

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

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

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

Часто в мобильной версии сайта используется кнопка типа «бургера» для вызова основного меню сайта. На…

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

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

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

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

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

Уменьшаем вес файлов HTML — для этого убираем все переносы и лишние пробелы, а так…

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

Хотелось бы в двух словах рассказать, как настроить Source Maps для GULP 4, но не…

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

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

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

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

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

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

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

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

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

Вариант 1 — с помощью JS меняем позицию фонового рисунка Вариант 2 — без JS…

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

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

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

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

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

Очень популярная функция на различных одностраничниках — плавный скролл к нужному элементу на этой же…

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

Вариант 1 — отрицательный отступ для родительского блока Самый простой способ установить минимальное расстояние между…

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

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

Итерация потомков (nth-child) с использованием SASS

Допустим, у нас есть несколько nth-child элементов, к которым мы хотим применить различную задержку для…

Используем медиа-запросы вместе с LESS

Стандартное использование медиа-запросов в CSS: CSS-препроцессор, на самом деле, может реально упростить вам работу с…

Google Fonts. Документация и примеры использования

Все умеют подключать и использовать Google Fonts, это так просто и так популярно, но никто…

Использование @keyframes с препроцессором SASS

Использование @keyframes с препроцессором SASS. Базовый пример использования @keyframes в SASS: Создаем миксин, чтобы добавить…

CSS счетчики

CSS счетчики, в своей сущности, переменные CSS, значения которых могут быть инкрементированы при помощи CSS…

Валидация формы обратной связи с помощью Javascript

В одной из статей я приводил пример, валидации формы с помощью CSS, но с ограниченными…

Анимация SVG

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

Анимация png-спрайта по слайдам

Недавно применял на сайте интересную анимацию, выглядит она как гифка, но по факту это одна…

301 Redirect в ModX

Столкнулся с проблемой редиректа в ModX. Стандартные варианты редиректа не работают. Нашел такое решение: Если…

Анимация элементов при скроле

Анимируем элементы на странице при прокрутке. В данном примере рассмотрим плавное появление элементов при скроле…

CSS анимации

CSS правило @keyframes Создание CSS анимации начинается с объявления имени анимации в блоке @keyframes и…

Скролл вверх страницы

Самый простой скролл вверх страницы HTML JS

Анимация элементов в HTML с помощью CSS и JS используя плагин WOW.js

UPD — код для анимации обновлен, из-за обновления структуры Animate.css Используем библиотеку WOW.js документация здесь….

Делаем кликабельными ссылки на элементах <object> в Chrome

Делаем кликабельным <object> с помощью CSS (проблема была замечена только в Chrome) Вешаем ссылку на…

Как убрать желтый (серый) фон при автозаполнении полей формы в браузере Google Chrome

Небольшое уточнение: цвет автозаполненного поля раньше был желтым, но на момент редактирования (16.12.2021) цвет автозаполнения…

Кроссбраузерный GrayScale с поддержкой Internet Explorer 10

Пример кроссбраузерного варианта сделать картинку черно-белой с помощью CSS. IE11 не поддерживает filter. Make an…

Множественные фоны на примере затухающего фона с градиентом и картинкой

Суть задачи — в psd-макете был фон с картинкой и градиентом, который вверху четкий и…

Как получить прямой url к файлу, загруженному на gogole disk

Мне нужно получить прямую ссылку на файл, который загружен на Google Disk, но проблема в…

Делаем размытый фон для блока (blurred background)

Задача — сделать для отдельного блока на странице размытый фон, Вариант первый — используем две…

Создание карусели/слайдера с помощью плагина Owl Carousel 2

Самый популярный плагин для карусели на jQuery — Owl Carousel 2. Все функции — https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html…

Как сверстать html-письмо

При верстке писем нужно учитывать, что существует большое количество различных почтовых клиентов и у многих…

Как получить картинки из документа Word формата .doc, .rtf или .docx

Когда-то давно были задачи по наполнению новосозданного сайта текстами. Несмотря на то, что я просил…

Эффект анимации для gif-картинки

Гифка же и так анимированная подумали вы, но не все так просто, все еще проще….

Сохраняем пропорции высоты и ширины элемента при изменении ширины контента на чистом CSS

Как пропорционально уменьшать ширину и высоту различных элементов при изменении ширины родительского контейнера? Для изображений…

Фиксированный плавающий sidebar

Самый простой пример фиксированного плавающего сайдбара на HTML+CSS+JS. В чем его особенность — при прокрутке…

Фиксированный блок при прокрутке с поддержкой IE

Еще один фиксированный блок Меню при прокрутке страницы. Было бы замечательно, если бы IE поддерживало…

Перенос сайта с хостинга на хостинг

Простая инструкция, как перенести сайт на CMS WordPress с одного хостинга на другой. На самом…

Простое добавление иконки в google map

Добавляем кастомную иконку в googlemap на своем сайте. JS

Скрипт для включения видео при прокрутке

Суть задачи, чтобы видео, которое находится где-то на странице, включалось только при прокрутке страницы, когда…

CSS Grid

  CSS Grid — это технология совершенно новая и официально стала поддерживаться современными браузерами только…

Bootstrap 4

  18 января 2018 года вышла из беты долгожданная версия Bootstrap 4, основанная на использовании…

Flexbox

Модель Flexbox Layout (Flexible Box) направлена на предоставление более эффективного способа выстраивания, выравнивания и распределения…

Пошаговая инструкция по работе с git и github для студентов

Необходимое ПО В первую очередь надо установить клиент git: обязательно потребуется консольный клиент, доступный по…

Обрезаем текст по количеству слов или по размерам блока с помощью jQuery

На одном из проектов необходимо было сделать блок с превью новостей, то есть блоки в…

Делаем видео-фон для блока с помощью CSS

Как добавить видео на фон блока. Обновленный и упрощенный пример кода для создания блока с…

Условные комментарии для IE

Условные комментарии более не поддерживаются Поддержка условных комментариев в стандартном режиме и режиме совместимости Internet…

Примеры использования селектора :checked с помощью jQuery

Селектор :checked работает для чекбоксов, радио кнопок и для опций выпадающих списков (select). Чтобы получить…

Как правильно оптимизировать картинки для сайта

Постараюсь сделать краткую инструкцию по правильному использованию изображений на сайте. Речь пойдет не об элементах…

Добавляем на сайт лоадер (спиннер)

Loader — это иконка-спиннер, которая крутится, пока загружается ваша страница. Так то я против таких…

Как стилизовать стрелки для input[type=number]

Добавим красивые стрелки для увеличения/уменьшения числа в инпуте, например, изменение количества товаров в корзине или…

Конвертируем SVG-иконку в код для использования в CSS

В одном из проектов возле меню выводились небольшие иконки в формате svg, и нужно, чтобы…

Полезные ссылки для вебмастеров

Ссылки на ресурсы, которые я использую в своей работе. Это мои реферальные ссылки, плохого не…

Простой таймер обратного отсчета на Javascript

Самый простой и удобный таймер обратного отсчета HTML CSS Javascript Указываем дату окончания работы таймера…

Кнопки «Поделиться в социальных сетях» без сторонних плагинов (Share Social Links)

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

Форма обратной связи с прикреплением файла (Send attachments with PHP Mail())

Форма обратной связи с прикреплением файла (attach) Самый простой внешний вид формы обратной связи с…

Простой jQuery-скрипт для табов (вкладок)

Самый простой пример реализации табов на сайте. Код максимально простой и легкий, не нужно никаких…

Какой размер для фавиконок использовать?

Чтобы далеко не ходить, сразу укажу, что остановился я на трех таких размерах для фавиконок,…

Фиксированное меню при прокрутке страницы только для мобильных

Немного другая вариация фиксированного меню. Меню фиксируется к верхней части экрана только на мобильных устройствах….

[CSS Animation] PCPP Loading Boxes

Красивая и не слишком сложная анимация, например, для загрузочной страницы сайта. HTML CSS Готовый пример:

Вертикальные параллакс-эффекты при прокрутке страницы с помощью Stellar.js

Делаем параллакс-эффект для больших блоков с фоном и для отдельных элементов на сайте. Подключаем jQuery…

Фиксированное меню при прокрутке страницы

Один из множества примеров сделать фиксированное меню при прокрутке. Пример упрощен, потому что хедер изначально…

Как настроить VPN в браузере Opera

В общем, из-за санкций против российских компаний возникли некоторые сложности у многих украинских компаний. Допустим,…

Открытие новых вкладок скриптом

Появилась необходимость сделать открытие дополнительной вкладки в браузере без желания на то пользователя. Технически сделать…

Gulp — подробное руководство

[vc_message color=»alert-info»]Данная статья подходит только для GULP версии 3. В самом низу есть пример моего…

Содержимое файла gulpfile.js

Содержимое файла gulpfile.js для рабочей папки app с билдом в папку dist: Содержимое файла gulpfile.js…

Как сделать сетку bootstrap под макет шириной 960px

Для Bootstrap3 можно кастомизировать сетку под 960px с помощью кастомайзера http://getbootstrap.com/customize/. меняем @container-large-desktop с (1140px…

Делаем колонки одинаковой высоты с помощью JS

Есть много способов сделать колонки одинаковой высоты, но самый удобный для меня — с помощью…

Создаем всплывающую HTML-форму обратной связи с pop-up окном об успешной отправке

[vc_message color=»alert-success»]Если вам нужна всплывающая форма обратной связи для WordPress, тогда читайте эту статью: Как…

Валидация HTML-формы без использования скриптов и php

Нашел очень крутой пример валидации HTML-форм без Javascript и без PHP, оригинальная статья выложена здесь….

Убирать или нет Яндекс.Метрику со своих сайтов после введения санкций против Яндекса в Украине?

Как известно, 15 мая указом президента Украины Петра Порошенко были введены санкции против России. Помимо…

Уникальная форма обратной связи с ajax на php

Самый уникальный скрипт формы обратной связи, из всех, что я встречал, нашел на этой сайте…

Виджеты заблокированных в Украине ресурсов (ВКонтакте, mail.ru, Яндекс и др.) могут навредить сайтам?

Рекомендую удалить все виджеты Яндекса и вКонтакте со своих сайтов из-за блокировки оных интернет-провайдерами в…

Делаем Fotorama адаптивной

Очень простой и крутой плагин Fotorama, но он совсем не адаптивный. Например нужно сделать, чтобы…

Определяем браузер пользователя и подставляем его название в страницу

Задача: Определить браузер пользователя и в документе подставить название его браузера вместо текста, который стоит по умолчанию.

Варианты «clearfix-хака» и его замен: сводная таблица

Сразу напишу, что я использую такой вариант для clearfix: Вдогонку статье о новом значении свойства display,…

Делаем динамическую гистограмму с использованием JS и jQuery

[vc_row][vc_column][vc_column_text]Задача такая: необходимо сделать вывод на каждой странице гистограммы с оценками. Всего 5 баллов, за…

Добавляем градиент в sass через миксины или с помощью bourbon

Для того, чтобы не прописывать градиенты с вендорными префиксами для каждого элемента, достаточно использовать миксины…

Open Graph — метатеги, которые помогают вывести нужную информацию при публикации ссылки на сайт в социальных сетях

Стандарт Open Graph разработан социальной сетью Facebook. Он позволяет контролировать превью, которое формируется при публикации…

Добавляем классы к дочерним элементам «одноуровневого» списка

Проблема в том, что есть список, с дочерними списками, но из-за сложности структуры CMS, эти…

Делаем красивые чекбоксы

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

Быстрое подключение шрифтов Google Fonts (Open Sans, Roboto, Ubuntu, Montserrat, Cuprum)

Добавлю для себя быстрое подключение шрифтов Google (Open Sans, Roboto, Ubuntu, Montserrat, Cuprum), просто потому…

Делаем попап без плагина fancybox

Цель — сделать pop-up окно без использования Fancybox. В общем, его можно сделать даже без…

Делаем на сайте случайные картинки для фона и для некоторых элементов

Суть задачи: На сайте есть несколько вариантов фоновой картинки и несколько вариантов блока модального окна…

Создание офф-скрин меню с помощью CSS переходов

В этой статье мы создадим офф-скрин меню с помощью CSS переходов. Изначально меню будут скрыты…

Как сделать видео с youtube адаптивным на вашем сайте

Чтобы любое видео подстраивалось под размеры окна браузера, добавим пару правил в CSS и один…

Что сделать с таблицами, чтобы их можно было нормально просматривать на смартфонах?

Больше текста напишу позже, а пока: добавьте в файл скриптов: Добавьте в файл стилей: Таблица…

Добавить класс к элементу с помощью js

Например, нам нужно к кнопке добавить класс fancybox-inline, чтобы кнопка вызывала форму в поп-ап окне….

Убираем лишний отступ внизу изображения

Наверное, многие, при html-верстке, встречали «баг», когда, размещая в блоке подряд два изображения, между ними…

CSS3
Эффект мигания с помощью animation

Для элемента с классом blink задаем такие стили и получаем мигание этого элемента: See the…

Делаем цветное изображение черно-белым с помощью CSS Filters

В данном примере сделаем изображение с классом filter черно-белым по умолчанию, а при наведении на…

Добавляем на сайт лайки Вконтакте, Facebook и кнопку Твитнуть

Вообще, для для Лайков существует большое количество плагинов, например отличный плагин Pluso (он больше для…

Как установить на сайт виджет для комментариев Facebook

Для того чтобы добавить виджет комментариев от Facebook необходимо проделать чуть больше работы чем с…

Как установить на сайт виджет для комментариев Вконтакте

Для добавления на сайт возможности комментирования с помощью аккаунта Вконтакте, нужно создать виджет на этой…

Ошибка 403 forbidden после переноса Joomla-сайта на другой хостинг

В общем, переносили сайт, вроде все сделали по правилам, осталось подождать обновления NS, но они…

Как добавить видео на свой сайт с использованием тега video в html5

На одном из сайтов клиента понадобилось добавить видео на страницу. Вроде бы задача не сложная,…

Как подключить нестандартный шрифт к сайту с помощью @font-face

У многих дизайнеров, которые создают серьезные и интересные макеты, есть в наличии масса уникальных и…

Как увеличить скорость загрузки страниц на сайте

На форуме Webmasters увидел интересное решение для того, чтобы увеличить скорость загрузки страниц на сайте,…

Выпадающий блок при наведении на родительский элемент

Делал для одного сайта выплывающие блоки при наведении на родительский элемент. В принципе, нет ничего…

Овальная кнопка с помощью CSS

Нашел на просторах сети интересную овальную кнопку, которая построена только на CSS3 без использования графических…

Перевод кириллицы в UTF-8

В таблице все, кроме буквы «Ё» — у нее кодировка в порядок не вписывается —…

Текстовые подстановки в HTML

Для ввода в HTML документ символов, которые отсутствуют на клавиатуре или которые имеют в синтаксисе…