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

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

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

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

Стилизация select

Стилизация select

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

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

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

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

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

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

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

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

Дата размещения статьи 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; } На момент написания статьи градиентный текст поддерживается 90% браузеров. Градиентный...

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

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

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

Изменим цвет svg картинки двумя способами: сначала используем свойство fill, затем mask-image. Первый способ. Картинка должна быть inline SVG. Если так, тогда просто изменим цвет с помощью свойства fill Цвет svg картинки изменяется с помощью CSS свойства fill - заливки. See the Pen Inline svg by Nikolay (@Only-to-top)...

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

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

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

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

CSS анимация

CSS анимация

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

Использование CSS-анимации для оживления HTML-страницы при помощи правила @keyframes и свойства animation. Создание ключевых кадров с помощью правила @keyframes Синтаксис @keyframes с двумя ключевыми кадрами выглядит следующим образом @keyframes myAnimation_name { from { css-свойство: значение; } to { css-свойство: значение; } } Пример @keyframes myAnime { from {...

Всплывающее окно jQuery

Всплывающее окно jQuery

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

При нажатии на ссылку будет плавно появляться всплывающее окно, затемняя остальной контент сайта. И также плавно будет закрываться окно при клике на крестик или вне окна. Создание плавно всплывающего окна с использованием библиотеки jQuery В HTML создадим ссылку, блок для контента, крестик для закрытия окна и оверлей для...

Как при нажатии на кнопку открыть и закрыть меню

Как при нажатии на кнопку открыть и закрыть меню

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

При нажатии на кнопку - появляется меню, при последующем нажатии - закрывается. Для этой задачи будет использовать jQuery. Создадим структуру кнопки, по нажатию на которую будет открываться меню и само меню, которое изначально будет скрыто. <nav class="wrap-myMenu"> <button class="main-myButton">☰</button> <ul class="content"> <li><a href="#link97">Главная</a></li> <li><a href="#link98">Обо мне</a></li> <li><a href="#link99">Портфолио</a></li>...

Плавный скролл до элемента

Плавный скролл до элемента

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

Реализуем следующее: после клика по ссылке будет происходить плавный скролл до элемента. Реализуем это без использования плагинов сначала при помощи jQuery, а затем на чистом JavaScript Плавный скролл до якоря. С помощью jQuery. Для всех ссылок, начинающихся с #. На чистом JavaScript - метод Element.scrollIntoView(). На чистом JavaScript...

Кнопка наверх для сайта

Кнопка наверх для сайта

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

Сегодня реализуем «Кнопку наверх» для вашего сайта с помощью jQuery и нативного JavaScript. Когда посетитель будет скроллить страницу вниз, в определенном месте будет появляться кнопка, при клике на которую, произойдёт плавный скролл наверх страницы. В HTML файле создайте div, который будет представлять из себя кнопку для возврата наверх....