HTML
Все вебмастера и дизайнеры используют Google Fonts или хотя бы раз да использовали. Это Google шрифты, которые без особых навыков или долгих настроек можно подключить...
Суть задачи такая – запустить видео по нажатию на какой-то элемент. Самый простой вариант – нажать кнопку и запустить видео. В своем примере я немного...
В общем, развернутый локальный сервер, запущенный на Node, пришлось закрыть без остановки, и после этого не получается запустить новый сервер, выдается ошибка “EADDRINUSE: address already...
Постоянно приходится вспоминать как повесить правильную ссылку на чат скайпа или вайбера. Давно уже пора сохранить эти шаблоны для себя на сайте. Пример как добавить...
Тема не новая, просто хочу вынести пример мобильного меню, который я использую чаще всего. На данный момент у каждого современного человека есть смартфон, с помощью...
Полезный инструмент, чтобы быстро перевести много небольших текстов на разные языки с помощью Google Sheets и GoogleTranslate. Если задача перевести один большой текст, то скорее...
Пример простого скрипта с добавление к числу случайного числа в выбранном диапазоне. Для чего это нудно – например, лендинг с регистрацией на ивент, и возле...
Задача такая, слева размещена картинка, а справа блок, внутри которого какой-то контент или другие блоки. Нужно сделать так, чтобы картинка была такой же высоты как...
Задача – выводить в десктопной версии несколько слайдов с определенным дизайном, а в мобильной версии выводить больше слайдов с другим дизайном. Нашел одно решение –...
Простой пример, как можно задать для текста фоновое изображение с помощью CSS-свойства background-clip. HTML – проще некуда: CSS – максимально упрощенный, чтобы было понятно, что...
CSS генератор треугольников, иногда приходится применять, чтобы создать уголки для каких-то элементов с помощью CSS. Простой пример, нескольких треугольников И очень крутой пример, как же...
В общем, очередная секретная разработка для ускорения процесса создания сайтов. Обычно для верстки я использовал десктопный препроцессор Prepros, но появилась необходимость работать независимо от сторонних...
Мой репозиторий – https://github.com/DenisShapkun/images-optimization. Используем вместо Tinypng десктопный вариант Gulp. Пакетная оптимизация изображений формата PNG, JPEG, GIF, SVG. PNG без альфа-канала (без прозрачности) лучше сначала...
Если по дизайну для текста нужна тень то обычно мы используем CSS-свойство text-shadow в таком формате: И получаем такую простую тень: Темная тень на светлом...
Задача – добавить на сайт всплывающие подсказки, но без подключения дополнительных библиотек, потому как их и так подключено много (но ни в одной нет tooltips)....
В общем, background-position – очень простое свойство в CSS используемое, чтобы указать позицию фонового изображения. Есть несколько вариантов синтаксиса, чтобы указать позицию фона: Числовое значение...
Простой полезный скрипт для анимаций или какого-либо отдельного функционала Пример, как скрипт определяет направление скролинга в браузере, просто поскрольте колесом, и будет виден текст направления...
Задача такая, для IE11 и Edge задать отдельные стили для SVG, потому что в этих браузерах не поддерживаются фильтры для свг и соответственно свг-шка не...
Репозиторий с оптимизатором картинок на 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 для...
Разберемся, какие видео нужно использовать на своем сайте, какие нужны форматы и какого размера видео должно быть. Разбирать будем видео для тега <video>, понятно, что...
Когда-то я уже делал небольшую статью про создание видео-фона в блоке (Делаем видео-фон для блока с помощью CSS). Но в статье было много лишнего кода...
Суть проблемы – мобильные браузеры, в частности, Safari отображают семизначные числа как ссылку на телефон. В общем-то, это было бы удобно, если бы, это был...
Для различных вариантов дизайна страниц нужно указывать разный цвет для плейсхолдеров в формах. Рассмотрим такой вариант input’а: Для изменения цвета placeholder пропишем такие правила в...
В общем, идея такая, слайдер листается и где-то рядом возле него меняются картинки в блоке, или фоновые картинки, или еще какие-то связанные со слайдами элементы....
Рассмотрим 2 наиболее часто применяющихся примера. Для обоих примеров будет общий HTML: И общие правила стилей для внешнего вида: Весь этот код просто для примера,...
Суть задачи будет понятна для тех, кто уже столкнулся с этой проблемой. Но попробую объяснить для всех, потому как рано или поздно пригодится. Есть страница,...
Простая валидация email с помощью javaScript. Суть в том, чтобы не дать отправить форму, пока не будет правильно введен email. Форма обязательно должна валидироваться еще...
Задача простая – копировать текст из какого-то блока нажатием кнопки, например, это может быть код купона или ссылка на статью в конце самой статьи. Согласитесь...
Простой пример, как убрать стрелки в поле input[type=”number”] с помощью CSS: Важное дополнение: по прежнему можно менять числа в поле обычным скроллом мышки или стрелками...
Часто в мобильной версии сайта используется кнопка типа “бургера” для вызова основного меню сайта. На эту кнопку вешается событие 'click' с обработчиком – вызовом функции,...
Можно сделать блоки одинаковой ширины с помощью Flex, можно задать ширину с помощью фиксированных размеров, но есть задача когда, нужно сделать блоки одинаковой ширины, основываясь...
В общем, когда-то давно была задача сделать рамку вокруг кнопки с градиентом, оказалось, что это не так просто. Пробовал сделать с помощью SVG, но не...
Уменьшаем вес файлов HTML – для этого убираем все переносы и лишние пробелы, а так же все комментарии. Данную задачу выполняем при билде продакшена, потому...
Хотелось бы в двух словах рассказать, как настроить Source Maps для GULP 4, но не получится вырвать из контекста просто пару строк кода, поэтому разобью...
Для оптимизации запросов на сервер можно объединить иконки и небольшие картинки, которые используются в css, в один файл – спрайт. Есть различные сервисы для автоматической...
В общем, перепробовал десятки разных плагинов и настроек, но .jpg совсем не оптимизировались, а иногда даже наоборот становились больше по весу, зато .png оптимизировались отлично....
Изменение внешнего вида для чекбокса с помощью CSS HTML для чекбокса или радио-кнопок CSS для чекбокса Пример обновленного дизайна для чекбокса Изменение внешнего вида для...
Бесконечный анимированный фон с эффектом параллакса создан на основе варианта 2 из этой статьи HTML CSS Рабочий пример бесконечного анимированного фона с эффектом параллакса
Вариант 1 – с помощью JS меняем позицию фонового рисунка Вариант 2 – без JS с помощью CSS-анимации меняем позицию фоновой картинки Вариант 3 –...
Как получить нужный параметр из адреса страницы? Итак, у нас есть рекламная кампания, и при переходе по ссылкам из этой кампании, мы получим url типа...
В предыдущей статье Плавный скролл по странице к нужному ID (Scroll to id) рассматривал простой js-скрипт плавного скролла для навигации по странице, но в том...
Очень популярная функция на различных одностраничниках – плавный скролл к нужному элементу на этой же странице. Чаще всего используется при навигации по меню. Если использовать...
Вариант 1 – отрицательный отступ для родительского блока Самый простой способ установить минимальное расстояние между элементами flexbox – используем margin: 0 5px для дочерних элементов .item и отрицательный отступ margin:...
В CSS есть функция calc(), которая даёт возможность рассчитать значения свойств CSS во время их определения. Функция calc() принимает в качестве параметра математическое выражение, результат...
Допустим, у нас есть несколько nth-child элементов, к которым мы хотим применить различную задержку для transition. Можно вручную задать transition delay для каждого элемента, но...
Стандартное использование медиа-запросов в CSS: CSS-препроцессор, на самом деле, может реально упростить вам работу с выражениями вида @media. Вне зависимости от предложенных способов ниже, профит...
Все умеют подключать и использовать Google Fonts, это так просто и так популярно, но никто и никогда не читал документацию по использованию шрифтов от Google,...
Использование @keyframes с препроцессором SASS. Базовый пример использования @keyframes в SASS: Создаем миксин, чтобы добавить вендорный префикс: Используем миксин в SASS:
CSS счетчики, в своей сущности, переменные CSS, значения которых могут быть инкрементированы при помощи CSS для отслеживания количества их использования. Они позволяют регулировать внешний вид...
В одной из статей я приводил пример, валидации формы с помощью CSS, но с ограниченными возможностями. Рассмотрим валидацию с более широким функционалом и выводом различных...
Есть много разных способов анимировать SVG-изображения. Сейчас я рассмотрю и сделаю себе пометки, как сделать самую простую анимацию. Пример анимации SVG с помощью плагина Vivus.js...
Недавно применял на сайте интересную анимацию, выглядит она как гифка, но по факту это одна png-картинка разбитая не несколько слайдов, которые крутятся с заданными параметрами....
Столкнулся с проблемой редиректа в ModX. Стандартные варианты редиректа не работают. Нашел такое решение: Если нужно сделать редирект какой-то страницы, используем такой код: Если нужно...
Анимируем элементы на странице при прокрутке. В данном примере рассмотрим плавное появление элементов при скроле страницы, а так же плавное затухание элементов когда элемент уже...
CSS правило @keyframes Создание CSS анимации начинается с объявления имени анимации в блоке @keyframes и определения так называемых шагов анимации или ключевых кадров. CSS Структура...
Самый простой скролл вверх страницы HTML JS
Используем библиотеку WOW.js документация здесь. Подключаем WOW.js 1. Подключаем библиотеку Animate.css (можно подключить любую другую библиотеку для анимации, и указать ее в опциях WOW.js) 2....
Делаем кликабельным <object> с помощью CSS (проблема была замечена только в Chrome) Вешаем ссылку на svg-иконку: Добавляем такие стили для того, чтобы ссылка работала: В...
Небольшое уточнение: цвет автозаполненного поля раньше был желтым, но на момент редактирования (16.12.2021) цвет автозаполнения серый. И раньше было необходимо прописывать другие стили. Все сталкивались...
Пример кроссбраузерного варианта сделать картинку черно-белой с помощью CSS. IE11 не поддерживает filter. Make an image grayscale in all browsers https://work.karlhorky.com/gray/ https://github.com/karlhorky/gray
Суть задачи – в psd-макете был фон с картинкой и градиентом, который вверху четкий и контрастный, а к нижней части страницы переходит в один цвет...
Мне нужно получить прямую ссылку на файл, который загружен на Google Disk, но проблема в том, что я нигде не могу такой ссылки получить, Гугл...
Задача – сделать для отдельного блока на странице размытый фон, Вариант первый – используем две картинки: одна простая для фона и одна заблюренная для блока...
Самый популярный плагин для карусели на jQuery – Owl Carousel 2. Все функции – https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html Подключение Owl Carousel 2 на своем сайте CSS – подключаем...
При верстке писем нужно учитывать, что существует большое количество различных почтовых клиентов и у многих есть свои алгоритмы обработки писем. Главное, что большинство не поддерживают...
Когда-то давно были задачи по наполнению новосозданного сайта текстами. Несмотря на то, что я просил заказчика предоставить тексты отдельно, а картинки разложить по папкам, тексты...
Гифка же и так анимированная подумали вы, но не все так просто, все еще проще. У меня в черновкиах есть несколько записей про анимацию svg,...
Как пропорционально уменьшать ширину и высоту различных элементов при изменении ширины родительского контейнера? Для изображений это делается очень просто, задаем свойству height значение auto, при...
Самый простой пример фиксированного плавающего сайдбара на HTML+CSS+JS. В чем его особенность – при прокрутке сайдбар прилипает к верхней части окна, но при этом, когда...
Еще один фиксированный блок Меню при прокрутке страницы. Было бы замечательно, если бы IE поддерживало свойство position: sticky;, которое ведет себя как position: relative в...
Простая инструкция, как перенести сайт на CMS WordPress с одного хостинга на другой. На самом деле это очень просто, но у многих знакомых все время...
Добавляем кастомную иконку в googlemap на своем сайте. JS
Суть задачи, чтобы видео, которое находится где-то на странице, включалось только при прокрутке страницы, когда само видео появляется на экране. При этом видео становится на...
CSS Grid – это технология совершенно новая и официально стала поддерживаться современными браузерами только в середине 2017 года. На данный момент (февраль 2018) использовать...
18 января 2018 года вышла из беты долгожданная версия Bootstrap 4, основанная на использовании модели Flexbox для разметки, которая в настоящее время уже имеет...
Модель Flexbox Layout (Flexible Box) направлена на предоставление более эффективного способа выстраивания, выравнивания и распределения пространства между элементами в контейнере, даже если их размер неизвестен...
Необходимое ПО В первую очередь надо установить клиент git: обязательно потребуется консольный клиент, доступный по ссылке http://git-scm.com/downloads (поддерживаются основные ОС), графический клиент можно установить по...
На одном из проектов необходимо было сделать блок с превью новостей, то есть блоки в слайдере с картинкой и анонсом. По умолчанию, на сайтах данные...
Как добавить видео на фон блока. Обновленный и упрощенный пример кода для создания блока с фоновым видео в новой статье Как создать блок с видео-фоном...
Условные комментарии более не поддерживаются Поддержка условных комментариев в стандартном режиме и режиме совместимости Internet Explorer 10 была удалена для улучшения взаимодействия и совместимости с...
Селектор :checked работает для чекбоксов, радио кнопок и для опций выпадающих списков (select). Чтобы получить только выбранные элементы в выпадающих списках (select), нужно использовать селектор...
Постараюсь сделать краткую инструкцию по правильному использованию изображений на сайте. Речь пойдет не об элементах дизайна, а о картинках в виде контента (фото, галереи, скриншоты,...
Loader – это иконка-спиннер, которая крутится, пока загружается ваша страница. Так то я против таких лоадеров, потому что из-за них кажется, что страница загружается дольше,...
Добавим красивые стрелки для увеличения/уменьшения числа в инпуте, например, изменение количества товаров в корзине или что-то на подобие того. Для начала уберем стандартные стрелки. “Кстати,...
В одном из проектов возле меню выводились небольшие иконки в формате svg, и нужно, чтобы при наведении курсора на пункт меню, текст и иконка меняли...
Ссылки на ресурсы, которые я использую в своей работе. Это мои реферальные ссылки, плохого не посоветую. https://www.ukraine.com.ua/ – Отличный хостинг в Украине и в СНГ....
Самый простой и удобный таймер обратного отсчета HTML CSS Javascript Указываем дату окончания работы таймера Формат вывода даты ISO 8601: Сокращенный формат: Длинный формат: Вывод...
Простые кнопки поделиться в социальных сетях без использования сторонних плагинов и скриптов, используется прямая ссылка для шеринга. В данном примере взят рабочий код с сайта...
Форма обратной связи с прикреплением файла (attach) Самый простой внешний вид формы обратной связи с тремя полями и полем для прикрепления файла: Даже добавим пару...
Самый простой пример реализации табов на сайте. Код максимально простой и легкий, не нужно никаких сторонних библиотек (кроме jquery) и никакого лишнего громоздкого кода. Весь...
Чтобы далеко не ходить, сразу укажу, что остановился я на трех таких размерах для фавиконок, которые подходят всем браузерам и всем экранам: Для сайта на...
Немного другая вариация фиксированного меню. Меню фиксируется к верхней части экрана только на мобильных устройствах. Меню находится в середине страницы, то есть оно прилипает к...
Красивая и не слишком сложная анимация, например, для загрузочной страницы сайта. HTML CSS Готовый пример:
Делаем параллакс-эффект для больших блоков с фоном и для отдельных элементов на сайте. Подключаем jQuery Библиотеку stellar.js качаем здесь, подробную документацию по stellar.js читаем здесь....
Один из множества примеров сделать фиксированное меню при прокрутке. Пример упрощен, потому что хедер изначально находится в самом верху, а при прокрутке только добавляется тень....
В общем, из-за санкций против российских компаний возникли некоторые сложности у многих украинских компаний. Допустим, доступом к социальным сетям можно и пожертвовать, но многие не...
Появилась необходимость сделать открытие дополнительной вкладки в браузере без желания на то пользователя. Технически сделать это можно, но только браузеры не разрешат открыться вкладке, если...
[vc_message color=”alert-info”]Данная статья подходит только для GULP версии 3. В самом низу есть пример моего файла gulpfile.js для GULP версии 4[/vc_message] Источник – http://webdesign-master.ru/blog/tools/2016-03-09-gulp-beginners.html Видео:...
Содержимое файла gulpfile.js для рабочей папки app с билдом в папку dist: Содержимое файла gulpfile.js для рабочей папки app без билда:
Для Bootstrap3 можно кастомизировать сетку под 960px с помощью кастомайзера http://getbootstrap.com/customize/. меняем @container-large-desktop с (1140px + @grid-gutter-width) на (940px + @grid-gutter-width). меняем @grid-gutter-width с 30px...
Есть много способов сделать колонки одинаковой высоты, но самый удобный для меня – с помощью js Высота задается для блоков .column внутри родителя с классом...
[vc_message color=”alert-success”]Если вам нужна всплывающая форма обратной связи для WordPress, тогда читайте эту статью: Как сделать форму обратной связи во всплывающем окне для WordPress[/vc_message] Будет...
Нашел очень крутой пример валидации HTML-форм без Javascript и без PHP, оригинальная статья выложена здесь. Если нужна валидация формы с помощью JS, тогда поможет эта...
Как известно, 15 мая указом президента Украины Петра Порошенко были введены санкции против России. Помимо прочего, новые ограничения предполагают блокировку доступа к соцсетям ВКонтакте и...
Самый уникальный скрипт формы обратной связи, из всех, что я встречал, нашел на этой сайте http://webdesign-master.ru/blog/tools/578.html и использую уже очень давно. Выложу здесь коды, чтобы...
Рекомендую удалить все виджеты Яндекса и вКонтакте со своих сайтов из-за блокировки оных интернет-провайдерами в Украине или сделать их асинхронными (об этом ниже). Как известно,...
Очень простой и крутой плагин Fotorama, но он совсем не адаптивный. Например нужно сделать, чтобы на десктопе он был одной высоты и первая картинка пропорционально...
Задача: Определить браузер пользователя и в документе подставить название его браузера вместо текста, который стоит по умолчанию.
Сразу напишу, что я использую такой вариант для clearfix: Вдогонку статье о новом значении свойства display, призванном избавить верстальщиков от нужды в clearfix-хаках — своего рода...
[vc_row][vc_column][vc_column_text]Задача такая: необходимо сделать вывод на каждой странице гистограммы с оценками. Всего 5 баллов, за каждый балл есть определенное количество голосов. Нужно вывести гистограмму в...
Для того, чтобы не прописывать градиенты с вендорными префиксами для каждого элемента, достаточно использовать миксины или подключить Бурбон, у которого есть свой набор готовых миксинов....
Стандарт Open Graph разработан социальной сетью Facebook. Он позволяет контролировать превью, которое формируется при публикации ссылки на сайт в социальных сетях, и передавать информацию другим...
Проблема в том, что есть список, с дочерними списками, но из-за сложности структуры CMS, эти дочерние списки не являются вложенными ul > ul, их структура...
Пример реализации красивого чекбокса вместо стандартного. Это простой пример, а визуально оформить сам чекбокс каждый уже сможет сам, этот код просто для развития идеи. HTML...
Добавлю для себя быстрое подключение шрифтов Google (Open Sans, Roboto, Ubuntu, Montserrat, Cuprum), просто потому что надоело постоянно брать их с сайта fonts.google.com. Если кому-то...
Цель – сделать pop-up окно без использования Fancybox. В общем, его можно сделать даже без использования javascript, но нам нужен стабильно работающий в во всех...
Суть задачи: На сайте есть несколько вариантов фоновой картинки и несколько вариантов блока модального окна и блока персонажа, который находится в правом нижнем углу. И...
В этой статье мы создадим офф-скрин меню с помощью CSS переходов. Изначально меню будут скрыты с экрана сначала, и после нажатия на определенную кнопку меню...
Чтобы любое видео подстраивалось под размеры окна браузера, добавим пару правил в CSS и один скрипт JS. Таким образом можно сделать адаптивным любое видео: видео...
Больше текста напишу позже, а пока: добавьте в файл скриптов: Добавьте в файл стилей: Таблица будет помещена в блок с классом .table-wrap, и если таблица...
Например, нам нужно к кнопке добавить класс fancybox-inline, чтобы кнопка вызывала форму в поп-ап окне. Кнопка создавалась через шорткод в редакторе страницы, и класс ей...
Наверное, многие, при html-верстке, встречали «баг», когда, размещая в блоке подряд два изображения, между ними возникает промежуток, примерно в 3-5 пикселей. Этот эффект присутствует не...
Для элемента с классом blink задаем такие стили и получаем мигание этого элемента: See the Pen Blinking by Denis (@deniscreative) on CodePen.
В данном примере сделаем изображение с классом filter черно-белым по умолчанию, а при наведении на него, оно будет плавно становиться цветным. Простой пример, как цветное...
Вообще, для для Лайков существует большое количество плагинов, например отличный плагин Pluso (он больше для share чем для like, но плагин отличный), но если все...
Для того чтобы добавить виджет комментариев от Facebook необходимо проделать чуть больше работы чем с виджетом комментариев ВКонтакте. Но все же особого труда не составляет....
Для добавления на сайт возможности комментирования с помощью аккаунта Вконтакте, нужно создать виджет на этой странице http://vk.com/dev/Comments, обязательно нужно быть залогиненным под аккаунтом того человека,...
В общем, переносили сайт, вроде все сделали по правилам, осталось подождать обновления NS, но они долго не обновлялись, поэтому за работой про сайт и забыли....
На одном из сайтов клиента понадобилось добавить видео на страницу. Вроде бы задача не сложная, загрузили видео на youtube, скопировали код для размещения на своем...
У многих дизайнеров, которые создают серьезные и интересные макеты, есть в наличии масса уникальных и красивых шрифтов. Благодаря таким шрифтам дизайн получает свою изюминку и...
На форуме Webmasters увидел интересное решение для того, чтобы увеличить скорость загрузки страниц на сайте, то есть чтобы скорость была быстрее, а время загрузки страниц...
Делал для одного сайта выплывающие блоки при наведении на родительский элемент. В принципе, нет ничего сложного, но пригодится в будущем, чтобы не забыть, оставлю кусок...
Нашел на просторах сети интересную овальную кнопку, которая построена только на CSS3 без использования графических изображений. Создание красивой овальной кнопки без использования графических картинок. Код...
В таблице все, кроме буквы “Ё” – у нее кодировка в порядок не вписывается – Ё А у маленькой “ё” – ё Так что если...
Для ввода в HTML документ символов, которые отсутствуют на клавиатуре или которые имеют в синтаксисе HTML специальное значение, употребляются подстановки (entities) двух видов — числовые...