Изменим цвет svg картинки двумя способами: сначала используем свойство fill, затем mask-image Первый способ. Картинка должна быть inline SVG. Если так, тогда просто изменим цвет с помощью свойства fill Цвет svg картинки изменяется с помощью CSS свойства fill...
Сегодня мы сделаем адаптивные вкладки для сайта, так называемые табы. Сначала используя jQuery, затем нативный JavaScript. В HTML-файле создадим структуру будущих табов: обёртку для табов - mywrap-tabs, сами вкладки - mytabs (активный таб и неактивный), и содержимое вкладок...
Использование CSS-анимации для оживления HTML-страницы при помощи правила @keyframes и свойства animation Создание ключевых кадров с помощью правила @keyframes Синтаксис @keyframes с двумя ключевыми кадрами выглядит следующим образом @keyframes myAnimation_name { from { css-свойство: значение; } to {...
При нажатии на ссылку будет плавно появляться всплывающее окно, затемняя остальной контент сайта. И также плавно будет закрываться окно при клике на крестик или вне окна Создание плавно всплывающего окна с использованием библиотеки jQuery В HTML создадим ссылку,...
При нажатии на кнопку - появляется меню, при последующем нажатии - закрывается. Для этой задачи будет использовать jQuery. Создадим структуру кнопки, по нажатию на которую будет открываться меню и само меню, которое изначально будет скрыто. <nav class="wrap-myMenu"> <button...
Реализуем следующее: после клика по ссылке будет происходить плавный скролл до элемента. Реализуем это без использования плагинов сначала при помощи jQuery, а затем на чистом JavaScript Плавный скролл до якоря. С помощью jQuery. Для всех ссылок, начинающихся с...
Сегодня реализуем «Кнопку наверх» для вашего сайта с помощью jQuery и нативного JavaScript. Когда посетитель будет скроллить страницу вниз, в определенном месте будет появляться кнопка, при клике на которую, произойдёт плавный скролл наверх страницы. В HTML файле создайте...
При наведении на блок появляется описание, и исчезает когда курсор покидает его. Создадим HTML разметку. <div class="blocks"> <div class="block"> <div class="block__hidden"> <b>Заголовок</b> <i>Подпись</i> </div> </div> <div class="block"> <div class="block__hidden"> <b>Заголовок</b> <i>Подпись</i> </div> </div> <div class="block"> <div class="block__hidden"> <b>Заголовок</b>...
Когда сайт будет полностью загружен, тогда прелоадер исчезнет и пользователь увидит сайт. В файле HTML создадим два div'a - обёртку для прелоадера и сам прелоадер. <div id="myPreloader" class="wrap-myLoader"> <div class="myLoader"></div> </div> Стилизуем блок-обёртку для прелоадера. Растянем блок wrap-myLoader...
Нет больше статей для загрузки
