Улучшаем скорость сайта при помощи сервиса GT metrix

Сайты тормозят из-за большого веса, обилия кода и внешних скриптов. Существует сервис GTmetrix, он проверяет скорость загрузки страниц сайта и показывает из-за чего та или иная страница так долго грузится. https://gtmetrix.com/ — проверить скорость сайта Почему сайты тормозят? Первая причина — это изображения, по идее, их вес не должен быть более 100 килобайт. Изображения с …

Скрываем и показываем слова, картинки, видео

WordPress может скрывать нужный текст при помощи специального плагина WP-ShowHide. Находится данный плагин в админке WordPress, он легко интегрируется в статьи и записи. Плагин WP-ShowHide для скрытия контента 1. Сначала идет установка WP-ShowHide, потом его активация, а после оборачивание желаемого контента в шорткод. [showhide type=»post» more_text=»Читать Далее…» less_text=»Скрыть текст…»] Тут находятся буквы, картинки и другие элементы, которые …

Загружаем YouTube видео в WordPress

Существует два способа для вставки видео на WordPress сайт. Первый метод связан с URL адресом видеоролика, а второй с кодом видеоролика. Первый вариант вставки видео Заходим на страничку того видеоролика, который планируем добавить в WordPress. Копируем адрес видеоролика.   Заходим в админку WordPress, создаем запись и нажимаем «добавить медиафайл».   Вставляем скопированный URL страницы с …

Работаем с CSS фильтрами — изменяем внешний вид картинок

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

Используем CSS анимацию для оживления элементов сайта

Анимация — это видимое передвижение объекта происходящее за определенный промежуток времени. Создание базовой анимации Каждый управляемый веб-объект подчиняется анимации. Предположим нам нужно анимировать текстовый абзац на сайте: что нам понадобится? Указать деятельность нашей анимации, которая действует в промежутке от 0% до 100%. 1 Создаем абзац <p> Hellow </p> Сначала в CSS задается @keyframes и рандомное имя …

Создаем рамки для картинок с помощью box-shadow и border-image

Благодаря CSS можно прикрутить красивые раки ко всем изображениям на сайте. Как правило для создания рамок используется свойство border, но в некоторых случаях и box-shadow. Линейные рамки Свойство border создает линию, которая обволакивает все изображение или конкретную её часть. 1 Существуют 8 типов border-линий: Solid, Double, Dotted, Dashed, Groove, Ridge, Inset, Outset 2 Свойство border делится …