Статьи из категории HTML CSS JS Страница 3

HTML CSS JS Страница 3

Создание структуры web-страницы, её стилизация и добавление интерактивности

Список статей категории HTML CSS JS Страница 3

Как вставить svg картинку на свой сайт

Как вставить svg картинку на свой сайт

Дата размещения статьи 08/06/2019

Рассмотрим способы вставки SVG изображений: через тег img, инлайново, base64, теги object и embed; а также как вставить SVG картинку через CSS. Вставка SVG в HTML SVG через тег img Inline SVG HTML SVG data URI / base64 SVG через тег object Вставка SVG через CSS SVG через...

SVG анимация

SVG анимация

Дата размещения статьи 01/05/2019

Сегодня поговорим об анимации SVG. Реализуем следующее: при клике на svg-изображение, будет проигрываться анимация. А также попутно познакомимся с тегами <g></g> и <defs></defs>. Для примера я скачал svg картинку. Анимация внутри SVG Нам необходимо выполнить следующие действия. Загрузить svg изображение на страницу с помощью тега <embed>. Сгруппировать необходимые...

Эффекты при нажатии CSS

Эффекты при нажатии CSS

Дата размещения статьи 24/03/2019

Рассмотрим, как добавить красивые эффекты при нажатии на кнопку с помощью CSS и jQuery. Создадим три кнопки с разными эффектами. Структура: <button class="mybutton mybutton--animate-click-one"> <span class="mybutton__text">Первый эффект при нажатии</span> </button> <button class="mybutton mybutton--animate-click-two"> <span class="mybutton__text">Второй эффект при нажатии</span> </button> <button class="mybutton mybutton--animate-click-three"> <span class="mybutton__text">Третий эффект при нажатии</span> </button>...

Выполнение js в зависимости от ширины экрана

Выполнение js в зависимости от ширины экрана

Дата размещения статьи 04/03/2019

Рассмотрим два способа как выполнить js код в зависимости от ширины экрана, а затем и высоты. 1 способ - с помощью нативного js, 2 способ - используя jQuery. 1 способ - нативный JavaScript. Выполнение js кода на экранах шириной более 768px. if (document.documentElement.clientWidth > 768) { } Пример:...

Подсветка активного пункта меню с помощью jQuery

Подсветка активного пункта меню с помощью jQuery

Дата размещения статьи 19/01/2019

Подсветка активного пункта меню с помощью jQuery и JavaScript (самый простой способ определения ссылки текущей страницы). А так же реализуем подсветку текущего пункта меню при скролле. Содержание: подсветка активного пункта одноуровнего меню (jQuery); подсветка вложенного активного пункта меню (jQuery); подсветка активного пункта меню (нативный JavaScript); подсветка активного пункта...

Добавление FontAwesome через CSS

Добавление FontAwesome через CSS

Дата размещения статьи 13/01/2019

Иногда требуется добавить иконки FontAwesome нестандартным способом, например через файл стилей или js. Рассмотрим как можно это реализовать. Допустим у нас есть div, к которому нужно добавить иконку <div class="address">Россия, Москва, ул. Никольская</div> Тогда CSS будет следующим .address::before { font-family: 'FontAwesome'; content: '\f24e'; } Чтобы узнать код символа...

Шпаргалка по использованию jQuery

Шпаргалка по использованию jQuery

Дата размещения статьи 10/01/2019

Шпаргалка по использованию jQuery включает в себя: события загрузки страницы, манипуляции с DOM-деревом, поиск необходимых элементов, анимация и многое другое. События загрузки страницы Выполнение кода после загрузки DOM-дерева $(function() { /* код */ }); или jQuery(function($) { /* код */ }); Выполнение кода после ПОЛНОЙ загрузки ВСЕЙ страницы...

Ссылки на мессенджеры на сайте

Ссылки на мессенджеры на сайте

Дата размещения статьи 15/12/2018

Сегодня добавим на сайт ссылки на мессенджеры: Telegram, WhatsApp, Viber, Skype, Вконтакте, Facebook; а так же рассмотрим как добавлять другие виды ссылок: на почту, телефон и файл. Ссылка на Telegram <!-- для перехода к диалогу Telegram --> <a href="tg://resolve?domain=only_to_top">Telegram</a> Пример: Telegram - переход к диалогу. <!-- Telegram через...

Accordion jQuery

Accordion jQuery

Дата размещения статьи 12/12/2018

Рассмотрим создание Accordion без использования плагинов. Для его реализации мы будет использовать jQuery и CSS. Структура: .accordion - обёртка для аккордеона, .accordion__item - вкладки аккордеона, .accordion__title - заголовки, .accordion__content - контент, который будет виден у активной вкладки. <div class="accordion" id="accordion"> <div class="accordion__item active__item"> <div class="accordion__title">Tab name one</div> <div...

Вертикальные табы

Вертикальные табы

Дата размещения статьи 01/12/2018

Сегодня мы сделаем адаптивные вертикальные табы (вкладки) для сайта Сначала создадим структуру для вертикальных табов: обёртку - wrap-myvertical-tabs, сами вкладки - myvertical-tabs, а так же само содержимое - myvertical-tabs-content. <div class="wrap-myvertical-tabs"> <ul class="myvertical-tabs"> <li class="chosen">Spring</li> <li>Summer</li> <li>Autumn</li> </ul> <div class="myvertical-tabs-content-wrap"> <div class="myvertical-tabs-content active">About Spring</div> <div class="myvertical-tabs-content">About Summer</div> <div...

Как передать данные из одной формы в другую

Как передать данные из одной формы в другую

Дата размещения статьи 28/11/2018

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