HTML

Делаем блоки одинаковой ширины с помощью 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 оптимизировались отлично....

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

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

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

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

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

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

Плавный скроллинг по странице к нужному элементу с использованием плагина 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() принимает в качестве параметра математическое выражение, результат...

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

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

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

Стандартное использование медиа-запросов в CSS: CSS-препроцессор, на самом деле, может реально упростить вам работу с выражениями вида @media. Вне зависимости от предложенных способов ниже, профит...

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

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

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

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

CSS счетчики

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

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

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

Анимация SVG

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

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

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

301 Redirect в ModX

Столкнулся с проблемой редиректа в ModX. Стандартные варианты редиректа не работают. Нашел такое решение: Если нужно сделать редирект какой-то страницы, используем такой код: Если нужно...

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

Анимируем элементы на странице при прокрутке. В данном примере рассмотрим плавное появление элементов при скроле страницы, а так же плавное затухание элементов когда элемент уже...

CSS анимации

CSS правило @keyframes Создание CSS анимации начинается с объявления имени анимации в блоке @keyframes и определения так называемых шагов анимации или ключевых кадров. CSS Структура...

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

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

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

Используем библиотеку WOW.js документация здесь. Подключаем WOW.js 1. Подключаем библиотеку Animate.css (можно подключить любую другую библиотеку для анимации, и указать ее в опциях WOW.js) 2....

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

Делаем кликабельным <object> с помощью CSS (проблема была замечена только в Chrome) Вешаем ссылку на svg-иконку: Добавляем такие стили для того, чтобы ссылка работала: В...

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

Все сталкивались с ситуацией, когда в Хроме при автозаполнении некоторых полей, например email или name, или любых других полей, которые заполнялись ранее в браузере, фон...

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

Пример кроссбраузерного варианта сделать картинку черно-белой с помощью CSS. IE11 не поддерживает filter. Make an image grayscale in all browsers https://work.karlhorky.com/gray/ https://github.com/karlhorky/gray

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

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

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

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

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

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

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

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

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

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

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

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

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

Гифка же и так анимированная подумали вы, но не все так просто, все еще проще. У меня в черновкиах есть несколько записей про анимацию svg,...

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

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

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

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

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

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

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

Простая инструкция, как перенести сайт на CMS WordPress с одного хостинга на другой. На самом деле это очень просто, но у многих знакомых все время...

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

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

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

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

CSS Grid

  CSS Grid – это технология совершенно новая и официально стала поддерживаться современными браузерами только в середине 2017 года. На данный момент (февраль 2018) использовать...

Bootstrap 4

  18 января 2018 года вышла из беты долгожданная версия Bootstrap 4, основанная на использовании модели Flexbox для разметки, которая в настоящее время уже имеет...

Flexbox

Модель Flexbox Layout (Flexible Box) направлена на предоставление более эффективного способа выстраивания, выравнивания и распределения пространства между элементами в контейнере, даже если их размер неизвестен...

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

Необходимое ПО В первую очередь надо установить клиент git: обязательно потребуется консольный клиент, доступный по ссылке http://git-scm.com/downloads (поддерживаются основные ОС), графический клиент можно установить по...

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

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

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

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

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

Условные комментарии более не поддерживаются Поддержка условных комментариев в стандартном режиме и режиме совместимости Internet Explorer 10 была удалена для улучшения взаимодействия и совместимости с...

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

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

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

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

Добавляем на сайт лоадер

Loader – это иконка-спиннер, которая крутится, пока загружается ваша страница. Так то я против таких лоадеров, потому что из-за них кажется, что страница загружается дольше,...

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

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

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

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

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

Ссылки на ресурсы, которые я использую в своей работе. Это мои реферальные ссылки, плохого не посоветую. https://www.ukraine.com.ua/ – Отличный хостинг в Украине и в СНГ....

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

Самый простой и удобный таймер обратного отсчета HTML CSS Javascript Указываем дату окончания работы таймера Формат вывода даты ISO 8601: Сокращенный формат: Длинный формат: Вывод...

Кнопки “Поделиться в социальных сетях” без сторонних плагинов

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

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

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

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

Сам скрипт целиком и полностью взят с сайта dimox.name HTML Обязательные CSS-стили для вышеуказанного HTML-кода Для красивого отображения на сайте нужно использовать свои стили. Подключаем...

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

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

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

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

[CSS Animation] PCPP Loading Boxes

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

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

Делаем параллакс-эффект для больших блоков с фоном и для отдельных элементов на сайте. Подключаем jQuery Библиотеку stellar.js качаем здесь, подробную документацию по stellar.js читаем здесь....

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

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

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

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

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

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

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

Источник – http://webdesign-master.ru/blog/tools/2016-03-09-gulp-beginners.html Видео: Видео для Обновление Gulp до версии 4 Основные ресурсы урока: Node.js: https://nodejs.org/en/ Gulp: http://gulpjs.com/ Bower: http://bower.io/ Browsersync: https://browsersync.io/ Проект-пример из данного...

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

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

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

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

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

Есть много способов сделать колонки одинаковой высоты, но самый удобный для меня – с помощью js Высота задается для блоков .column внутри родителя с классом...

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

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

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

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

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

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

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

Самый уникальный скрипт формы обратной связи, из всех, что я встречал, нашел на этой сайте http://webdesign-master.ru/blog/tools/578.html и использую уже очень давно. Выложу здесь коды, чтобы...

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

Рекомендую удалить все виджеты Яндекса и вКонтакте со своих сайтов из-за блокировки оных интернет-провайдерами в Украине или сделать их асинхронными (об этом ниже). Как известно,...

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

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

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

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

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

Сразу напишу, что я использую такой вариант для clearfix: Вдогонку статье о новом значении свойства display, призванном избавить верстальщиков от нужды в clearfix-хаках — своего рода...

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

Вариант 1 – Простой JS   Используем такой html: В блоке div.hidden мы выводим количество голосов за каждую оценку, например, 1 балл – 5 голосов,...

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

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

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

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

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

Проблема в том, что есть список, с дочерними списками, но из-за сложности структуры CMS, эти дочерние списки не являются вложенными ul > ul, их структура...

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

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

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

Добавлю для себя быстрое подключение шрифтов Google, просто потому что надоело постоянно брать их с сайта fonts.google.com. Если кому-то пригодится, то берите, мне не жалко....

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

Цель – сделать pop-up окно без использования Fancybox. В общем, его можно сделать даже без использования javascript, но нам нужен стабильно работающий в во всех...

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

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

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

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

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

Чтобы любое видео подстраивалось под размеры окна браузера, добавим пару правил в CSS и один скрипт JS. Таким образом можно сделать адаптивным любое видео: видео...

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

Больше текста напишу позже, а пока: добавьте в файл скриптов: Добавьте в файл стилей: Таблица будет помещена в блок с классом .table-wrap, и если таблица...

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

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

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

Наверное, многие, при html-верстке, встречали «баг», когда, размещая в блоке подряд два изображения, между ними возникает промежуток, примерно в 3-5 пикселей. Этот эффект присутствует не...

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

Для элемента с классом blink задаем такие стили и получаем мигание этого элемента: See the Pen Blinking by Denis (@deniscreative) on CodePen.

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

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

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

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

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

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

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

Для добавления на сайт возможности комментирования с помощью аккаунта Вконтакте, нужно создать виджет на этой странице http://vk.com/dev/Comments, обязательно нужно быть залогиненным под аккаунтом того человека,...

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

В общем, переносили сайт, вроде все сделали по правилам, осталось подождать обновления NS, но они долго не обновлялись, поэтому за работой про сайт и забыли....

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

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

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

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

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

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

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

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

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

Нашел на просторах сети интересную овальную кнопку, которая построена только на CSS3 без использования графических изображений. Создание красивой овальной кнопки без использования графических картинок. Код...

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

В таблице все, кроме буквы “Ё” – у нее кодировка в порядок не вписывается – &#1025; А у маленькой “ё” – &#1105; Так что если...

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

Для ввода в HTML документ символов, которые отсутствуют на клавиатуре или которые имеют в синтаксисе HTML специальное значение, употребляются подстановки (entities) двух видов — числовые...