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

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

Accordion jQuery

Accordion jQuery

12/12/2018

Рассмотрим создание Accordion без использования плагинов. Для его реализации мы будет использовать jQuery и CSS. Структура: .accordion - обёртка для аккордеона, .accordion__item - вкладки аккордеона, .accordion__title - заголовки, .accordion__content - контент, который будет виден у активной вкладки. <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>...

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

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

28/11/2018

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

Стилизация select

Стилизация select

17/11/2018

Стилизация select на чистом CSS без использования сторонних библиотек или JavaScript кода. А также бонус: рассмотрим как стилизовать select option при помощи JavaScript и jQuery Стилизация select Структура будет стандартной <select size="1"> <option>Слон</option> <option>Бегемот</option> <option>Жираф</option> </select> Чтобы в...

Как изменить маркер списка

Как изменить маркер списка

10/11/2018

Рассмотрим как изменить цвет для маркеров списка, и добавить картинку с помощью CSS Как изменить цвет маркера списка с помощью CSS Цвет маркера списка можно изменить несколькими способами: - обернуть содержимое списка в тег span и стилизовать; -...

Стилизация чекбокса

Стилизация чекбокса

07/11/2018

Рассмотрим стилизацию чекбоксов с помощью CSS. А также рассмотрим, как реализовать отметку чекбокса картинкой. Стилизация чекбокса Создадим input с типом checkbox и элемент, который будет новым чекбоксом .mycheckbox__new. Затем обернём их в label чтобы связать label и input....

Градиентный текст

Градиентный текст

20/10/2018

Рассмотрим градиент для текста и рамки, сделаем текст прозрачным, а также реализуем интересный эффект при наведении Градиент текста CSS <p class="my-gradient-txt">Градиентный текст</p> .my-gradient-txt { background: linear-gradient(to right, #ad1457, #4a148c); background-clip: text; -webkit-background-clip: text; color: transparent; display: inline-block; }...

Как изменить цвет svg

Как изменить цвет svg

25/09/2018

Изменим цвет svg картинки двумя способами: сначала используем свойство fill, затем mask-image Первый способ. Картинка должна быть inline SVG. Если так, тогда просто изменим цвет с помощью свойства fill Цвет svg картинки изменяется с помощью CSS свойства fill...

Горизонтальные табы

Горизонтальные табы

29/07/2018

Сегодня мы сделаем адаптивные вкладки для сайта, так называемые табы. Сначала используя jQuery, затем нативный JavaScript. В HTML-файле создадим структуру будущих табов: обёртку для табов - mywrap-tabs, сами вкладки - mytabs (активный таб и неактивный), и содержимое вкладок...

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

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

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