HTML

Использование @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 Видео: Основные ресурсы урока: Node.js: https://nodejs.org/en/ Gulp: http://gulpjs.com/ Bower: http://bower.io/ Browsersync: https://browsersync.io/ Проект-пример из данного урока вы можете посмотреть на GitHub и...

Содержимое файла 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 Высота задается для блоков div внутри родителя с классом...

Создаем всплывающую 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 адаптивным на вашем сайте

Чтобы окно с видео встроенного с youtube подстраивалось под размеры окна браузера, добавим пару стилей и скрипт. Добавим такой скрипт, чтобы помещать наше видео в...

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

Больше текста напишу позже, а пока: добавьте в файл скриптов: Добавьте в файл стилей: Таблица будет помещена в блок с классом .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) двух видов — числовые...