HTML
Отключить кнопку отправки, если поле пустое Javascript Второй вариант для проверки поля
Вы можете создать круговую диаграмму в HTML, используя простую функцию CSS под названием conic-gradient. Во-первых, мы добавляем <div> элемент…
Выводим число, например, подсчет голосов, или рассчет процентов после выполнения какого-либо действия. Можно выводить все…
Итак, задача такая — проверить отображение каких-то элементов на разных разрешениях экрана. Но современная проблема…
Простая задача — если слайд всего один, то не отображать slick dots, чтобы слайдер выглядел…
Раздел EFI -обязательный для GPT разметки на системах с UEFI. Стандартный размер раздела EFI равен…
Простые примеры настройки slick-карусели. Официальная документация здесь — https://kenwheeler.github.io/slick/, ссылка на GIT — https://github.com/kenwheeler/slick/. Подключаем…
Задача — есть элементы с неправильной формой, пятиугольники, шестиугольники, скошенные углы, элементы построены с помощью…
Этот пост вытащил из многолетних черновиков, поэтому особо расписывать не буду. Просто юзайте код. Итак,…
Суть проблемы — в Internet Explorer если задаем отображение блоков в колонку flex-direction: column, то…
Все вебмастера и дизайнеры используют Google Fonts или хотя бы раз да использовали. Это Google шрифты, которые без особых навыков или долгих настроек можно подключить на своем сайте или использовать в своем макете.
Суть задачи такая — запустить видео по нажатию на какой-то элемент. Самый простой вариант —…
В общем, развернутый локальный сервер, запущенный на Node, пришлось закрыть без остановки, и после этого…
Постоянно приходится вспоминать как повесить правильную ссылку на чат скайпа или вайбера. Давно уже пора…
Тема не новая, просто хочу вынести пример мобильного меню, который я использую чаще всего. На…
Полезный инструмент, чтобы быстро перевести много небольших текстов на разные языки с помощью Google Sheets…
Пример простого скрипта с добавление к числу случайного числа в выбранном диапазоне. Для чего это…
Задача такая, слева размещена картинка, а справа блок, внутри которого какой-то контент или другие блоки….
Задача — выводить в десктопной версии несколько слайдов с определенным дизайном, а в мобильной версии…
Простой пример, как можно задать для текста фоновое изображение с помощью CSS-свойства background-clip. HTML —…
CSS генератор треугольников, иногда приходится применять, чтобы создать уголки для каких-то элементов с помощью CSS….
В общем, очередная секретная разработка для ускорения процесса создания сайтов. Обычно для верстки я использовал…
Мой репозиторий — https://github.com/DenisShapkun/images-optimization. Используем вместо Tinypng десктопный вариант Gulp. Пакетная оптимизация изображений формата PNG,…
Если по дизайну для текста нужна тень то обычно мы используем CSS-свойство text-shadow в таком…
Задача — добавить на сайт всплывающие подсказки, но без подключения дополнительных библиотек, потому как их…
В общем, background-position — очень простое свойство в CSS используемое, чтобы указать позицию фонового изображения….
Простой полезный скрипт для анимаций или какого-либо отдельного функционала Пример, как скрипт определяет направление скролинга…
Задача такая, для IE11 и Edge задать отдельные стили для SVG, потому что в этих…
Репозиторий с оптимизатором картинок на Github — https://github.com/DenisShapkun/images-optimization. В общем, это моя секретная разработка для…
Копирование сайта с помощью Website Scraper — https://www.npmjs.com/package/website-scraper. Запускаем консоль в нужной директории и устанавливаем…
Суть задачи в том, чтобы сделать плавное появление и скрытие flex-контейнера. Если использовать просто fadeIn(),…
Редирект с .html Задача простая — убрать из урла расширение страницы .html. Чтобы вместо было:…
Простой пример, как объединить 2 массива в один, чтобы соответствующие элементы каждого массива были помещены…
Простой пример, как добавить эффект свечения для svg-элемента с помощью добавления тени. Итак, у нас…
Простой пример очередной анимированной кнопки с эффектом свечения при наведении. Можно сделать свечение кнопки и…
Разберемся, какие видео нужно использовать на своем сайте, какие нужны форматы и какого размера видео…
Когда-то я уже делал небольшую статью про создание видео-фона в блоке (Делаем видео-фон для блока…
Суть проблемы — мобильные браузеры, в частности, Safari отображают семизначные числа как ссылку на телефон….
Для различных вариантов дизайна страниц нужно указывать разный цвет для плейсхолдеров в формах. Рассмотрим такой…
В общем, идея такая, слайдер листается и где-то рядом возле него меняются картинки в блоке,…
Рассмотрим 2 наиболее часто применяющихся примера. Для обоих примеров будет общий HTML: И общие правила…
Суть задачи будет понятна для тех, кто уже столкнулся с этой проблемой. Но попробую объяснить…
Простая валидация email с помощью javaScript. Суть в том, чтобы не дать отправить форму, пока…
Задача простая — копировать текст из какого-то блока нажатием кнопки, например, это может быть код…
Простой пример, как убрать стрелки в поле input[type=»number»] с помощью CSS: Важное дополнение: по прежнему…
Часто в мобильной версии сайта используется кнопка типа «бургера» для вызова основного меню сайта. На…
Можно сделать блоки одинаковой ширины с помощью Flex, можно задать ширину с помощью фиксированных размеров,…
В общем, когда-то давно была задача сделать рамку вокруг кнопки с градиентом, оказалось, что это…
Уменьшаем вес файлов HTML — для этого убираем все переносы и лишние пробелы, а так…
Хотелось бы в двух словах рассказать, как настроить Source Maps для GULP 4, но не…
Для оптимизации запросов на сервер можно объединить иконки и небольшие картинки, которые используются в css,…
В общем, перепробовал десятки разных плагинов и настроек, но .jpg совсем не оптимизировались, а иногда…
Изменение внешнего вида для чекбокса с помощью CSS HTML для чекбокса или радио-кнопок CSS для…
Бесконечный анимированный фон с эффектом параллакса создан на основе варианта 2 из этой статьи HTML…
Вариант 1 — с помощью JS меняем позицию фонового рисунка Вариант 2 — без JS…
Как получить нужный параметр из адреса страницы? Итак, у нас есть рекламная кампания, и при…
В предыдущей статье Плавный скролл по странице к нужному ID (Scroll to id) рассматривал простой…
Очень популярная функция на различных одностраничниках — плавный скролл к нужному элементу на этой же…
Вариант 1 — отрицательный отступ для родительского блока Самый простой способ установить минимальное расстояние между…
В CSS есть функция calc(), которая даёт возможность рассчитать значения свойств CSS во время их…
Допустим, у нас есть несколько nth-child элементов, к которым мы хотим применить различную задержку для…
Стандартное использование медиа-запросов в CSS: CSS-препроцессор, на самом деле, может реально упростить вам работу с…
Все умеют подключать и использовать Google Fonts, это так просто и так популярно, но никто…
Использование @keyframes с препроцессором SASS. Базовый пример использования @keyframes в SASS: Создаем миксин, чтобы добавить…
CSS счетчики, в своей сущности, переменные CSS, значения которых могут быть инкрементированы при помощи CSS…
В одной из статей я приводил пример, валидации формы с помощью CSS, но с ограниченными…
Есть много разных способов анимировать SVG-изображения. Сейчас я рассмотрю и сделаю себе пометки, как сделать…
Недавно применял на сайте интересную анимацию, выглядит она как гифка, но по факту это одна…
Столкнулся с проблемой редиректа в ModX. Стандартные варианты редиректа не работают. Нашел такое решение: Если…
Анимируем элементы на странице при прокрутке. В данном примере рассмотрим плавное появление элементов при скроле…
CSS правило @keyframes Создание CSS анимации начинается с объявления имени анимации в блоке @keyframes и…
Самый простой скролл вверх страницы HTML JS
UPD — код для анимации обновлен, из-за обновления структуры Animate.css Используем библиотеку WOW.js документация здесь….
Делаем кликабельным <object> с помощью CSS (проблема была замечена только в Chrome) Вешаем ссылку на…
Небольшое уточнение: цвет автозаполненного поля раньше был желтым, но на момент редактирования (16.12.2021) цвет автозаполнения…
Пример кроссбраузерного варианта сделать картинку черно-белой с помощью CSS. IE11 не поддерживает filter. Make an…
Суть задачи — в psd-макете был фон с картинкой и градиентом, который вверху четкий и…
Мне нужно получить прямую ссылку на файл, который загружен на Google Disk, но проблема в…
Задача — сделать для отдельного блока на странице размытый фон, Вариант первый — используем две…
Самый популярный плагин для карусели на jQuery — Owl Carousel 2. Все функции — https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html…
При верстке писем нужно учитывать, что существует большое количество различных почтовых клиентов и у многих…
Когда-то давно были задачи по наполнению новосозданного сайта текстами. Несмотря на то, что я просил…
Гифка же и так анимированная подумали вы, но не все так просто, все еще проще….
Как пропорционально уменьшать ширину и высоту различных элементов при изменении ширины родительского контейнера? Для изображений…
Самый простой пример фиксированного плавающего сайдбара на HTML+CSS+JS. В чем его особенность — при прокрутке…
Еще один фиксированный блок Меню при прокрутке страницы. Было бы замечательно, если бы IE поддерживало…
Простая инструкция, как перенести сайт на CMS WordPress с одного хостинга на другой. На самом…
Добавляем кастомную иконку в googlemap на своем сайте. JS
Суть задачи, чтобы видео, которое находится где-то на странице, включалось только при прокрутке страницы, когда…
CSS Grid — это технология совершенно новая и официально стала поддерживаться современными браузерами только…
18 января 2018 года вышла из беты долгожданная версия Bootstrap 4, основанная на использовании…
Модель Flexbox Layout (Flexible Box) направлена на предоставление более эффективного способа выстраивания, выравнивания и распределения…
Необходимое ПО В первую очередь надо установить клиент git: обязательно потребуется консольный клиент, доступный по…
На одном из проектов необходимо было сделать блок с превью новостей, то есть блоки в…
Как добавить видео на фон блока. Обновленный и упрощенный пример кода для создания блока с…
Условные комментарии более не поддерживаются Поддержка условных комментариев в стандартном режиме и режиме совместимости Internet…
Селектор :checked работает для чекбоксов, радио кнопок и для опций выпадающих списков (select). Чтобы получить…
Постараюсь сделать краткую инструкцию по правильному использованию изображений на сайте. Речь пойдет не об элементах…
Loader — это иконка-спиннер, которая крутится, пока загружается ваша страница. Так то я против таких…
Добавим красивые стрелки для увеличения/уменьшения числа в инпуте, например, изменение количества товаров в корзине или…
В одном из проектов возле меню выводились небольшие иконки в формате svg, и нужно, чтобы…
Ссылки на ресурсы, которые я использую в своей работе. Это мои реферальные ссылки, плохого не…
Самый простой и удобный таймер обратного отсчета HTML CSS Javascript Указываем дату окончания работы таймера…
Простые кнопки поделиться в социальных сетях без использования сторонних плагинов и скриптов, используется прямая ссылка…
Форма обратной связи с прикреплением файла (attach) Самый простой внешний вид формы обратной связи с…
Самый простой пример реализации табов на сайте. Код максимально простой и легкий, не нужно никаких…
Чтобы далеко не ходить, сразу укажу, что остановился я на трех таких размерах для фавиконок,…
Немного другая вариация фиксированного меню. Меню фиксируется к верхней части экрана только на мобильных устройствах….
Красивая и не слишком сложная анимация, например, для загрузочной страницы сайта. HTML CSS Готовый пример:
Делаем параллакс-эффект для больших блоков с фоном и для отдельных элементов на сайте. Подключаем jQuery…
Один из множества примеров сделать фиксированное меню при прокрутке. Пример упрощен, потому что хедер изначально…
В общем, из-за санкций против российских компаний возникли некоторые сложности у многих украинских компаний. Допустим,…
Появилась необходимость сделать открытие дополнительной вкладки в браузере без желания на то пользователя. Технически сделать…
[vc_message color=»alert-info»]Данная статья подходит только для GULP версии 3. В самом низу есть пример моего…
Содержимое файла gulpfile.js для рабочей папки app с билдом в папку dist: Содержимое файла gulpfile.js…
Для Bootstrap3 можно кастомизировать сетку под 960px с помощью кастомайзера http://getbootstrap.com/customize/. меняем @container-large-desktop с (1140px…
Есть много способов сделать колонки одинаковой высоты, но самый удобный для меня — с помощью…
[vc_message color=»alert-success»]Если вам нужна всплывающая форма обратной связи для WordPress, тогда читайте эту статью: Как…
Нашел очень крутой пример валидации HTML-форм без Javascript и без PHP, оригинальная статья выложена здесь….
Как известно, 15 мая указом президента Украины Петра Порошенко были введены санкции против России. Помимо…
Самый уникальный скрипт формы обратной связи, из всех, что я встречал, нашел на этой сайте…
Рекомендую удалить все виджеты Яндекса и вКонтакте со своих сайтов из-за блокировки оных интернет-провайдерами в…
Очень простой и крутой плагин Fotorama, но он совсем не адаптивный. Например нужно сделать, чтобы…
Задача: Определить браузер пользователя и в документе подставить название его браузера вместо текста, который стоит по умолчанию.
Сразу напишу, что я использую такой вариант для clearfix: Вдогонку статье о новом значении свойства display,…
[vc_row][vc_column][vc_column_text]Задача такая: необходимо сделать вывод на каждой странице гистограммы с оценками. Всего 5 баллов, за…
Для того, чтобы не прописывать градиенты с вендорными префиксами для каждого элемента, достаточно использовать миксины…
Стандарт Open Graph разработан социальной сетью Facebook. Он позволяет контролировать превью, которое формируется при публикации…
Проблема в том, что есть список, с дочерними списками, но из-за сложности структуры CMS, эти…
Пример реализации красивого чекбокса вместо стандартного. Это простой пример, а визуально оформить сам чекбокс каждый…
Добавлю для себя быстрое подключение шрифтов Google (Open Sans, Roboto, Ubuntu, Montserrat, Cuprum), просто потому…
Цель — сделать pop-up окно без использования Fancybox. В общем, его можно сделать даже без…
Суть задачи: На сайте есть несколько вариантов фоновой картинки и несколько вариантов блока модального окна…
В этой статье мы создадим офф-скрин меню с помощью CSS переходов. Изначально меню будут скрыты…
Чтобы любое видео подстраивалось под размеры окна браузера, добавим пару правил в CSS и один…
Больше текста напишу позже, а пока: добавьте в файл скриптов: Добавьте в файл стилей: Таблица…
Например, нам нужно к кнопке добавить класс fancybox-inline, чтобы кнопка вызывала форму в поп-ап окне….
Наверное, многие, при html-верстке, встречали «баг», когда, размещая в блоке подряд два изображения, между ними…
Для элемента с классом blink задаем такие стили и получаем мигание этого элемента: See the…
В данном примере сделаем изображение с классом filter черно-белым по умолчанию, а при наведении на…
Вообще, для для Лайков существует большое количество плагинов, например отличный плагин Pluso (он больше для…
Для того чтобы добавить виджет комментариев от Facebook необходимо проделать чуть больше работы чем с…
Для добавления на сайт возможности комментирования с помощью аккаунта Вконтакте, нужно создать виджет на этой…
В общем, переносили сайт, вроде все сделали по правилам, осталось подождать обновления NS, но они…
На одном из сайтов клиента понадобилось добавить видео на страницу. Вроде бы задача не сложная,…
У многих дизайнеров, которые создают серьезные и интересные макеты, есть в наличии масса уникальных и…
На форуме Webmasters увидел интересное решение для того, чтобы увеличить скорость загрузки страниц на сайте,…
Делал для одного сайта выплывающие блоки при наведении на родительский элемент. В принципе, нет ничего…
Нашел на просторах сети интересную овальную кнопку, которая построена только на CSS3 без использования графических…
В таблице все, кроме буквы «Ё» — у нее кодировка в порядок не вписывается —…
Для ввода в HTML документ символов, которые отсутствуют на клавиатуре или которые имеют в синтаксисе…
