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

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

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

Суть задачи — в 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. Это позволяет правильно добавить файл...

Создаем виджеты в шаблоне на CMS WordPress

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

Создание мультиязычных сайтов на CMS WordPress

Для начала в файле functions.php указываем папку с локализованными переводами и даем понять, что шаблон мультиязычен: В шаблоне в папке /languages должны находиться файлы с...

Добавляем файлы SVG через PHP

Используя PHP можно загружать содержимое SVG-файлов без лишних запросов к серверу, без использования img или object. В чем плюс — меньше HTTP-запросов, проще и красивее...

Добавляем меню в свой шаблон на CMS WordPress

Регистрируем и выводим произвольное меню, созданное в панели: «Внешний вид > Меню» (Appearance > Menus). Регистрируем меню Второй вариант регистрации меню (не знаю, на сколько...

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

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

Что нового в WordPress 4.9

15 ноября 2017 года был выпущен WordPress версии 4.9, названный в честь джазового музыканта Билли Типтона. WordPress 4.9 сделает процесс работы над шаблоном более легким...

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

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