Интересные работы

Свежие записи

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

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

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

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

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

Теги шаблонов — bloginfo

Использование Параметры $show ‘name’ — Показывает «Название сайта», установленное в Настройки > Общие настройки. Эти данные извлекаются из записи «blogname» в таблице wp_options. ‘description’ —...

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 была удалена для улучшения взаимодействия и совместимости с...

Подключаем правильно скрипты js в шаблоне WordPress

Подключать стили и скрипты в шаблон в файле header.php — неправильно. Правильная практика — подключать их в файле functions.php используя функцию wp_enqueue_scripts, это позволит избежать...

Подключаем правильно файлы стилей css в шаблоне WordPress

Подключать стили в шаблон в файле header.php — неправильно. Правильная практика — подключать их в файле functions.php используя функцию wp_enqueue_style. Это позволяет правильно добавить файл...