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

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

Вычитание дат JavaScript

Вычитание дат JavaScript

11/08/2019

Рассмотрим, как вычесть из одной даты другую, т.е. найти разницу в количестве дней между двумя датами, используя JavaScript. Проделаем следующее: Создадим два объекта типа Date() Объявим функцию, например, diffDates() для подсчёта разницы в днях Вызовем функцию, передав в...

Input type number стилизация

Input type number стилизация

25/07/2019

Сегодня рассмотрим как можно стилизовать input type number. А если быть точным, то как его создать таким, каким душе угодно. Разметка <div class="inputTN"> <input class="inputTN__input"type="text" pattern="^[0-9]+$" value="0"> <div class="inputTN__top"></div> <div class="inputTN__bottom"></div> </div> Стилизация .inputTN { position: relative; }...

Печать HTML таблицы с помощью JavaScript

Печать HTML таблицы с помощью JavaScript

16/07/2019

Рассмотрим, как вывести HTML таблицу на печать с помощью JavaScript и jQuery HTML-разметка <button id="printTable">Печать таблицы</button> <table id="printMe"> <style> @media print { /* Стили для печати */ #printMe .hidden { display:none; } /* что не надо печатать */...

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

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

08/06/2019

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

SVG анимация

SVG анимация

01/05/2019

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

Эффекты при нажатии 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>...

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

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

04/03/2019

Рассмотрим два способа как выполнить js код в зависимости от ширины экрана, а затем и высоты. 1 способ - с помощью нативного js, 2 способ - используя jQuery. 1 способ - нативный JavaScript. Выполнение js кода на экранах...

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

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

19/01/2019

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

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

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

13/01/2019

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

Следующая страница

Нет больше статей для загрузки