HTML CSS JS

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

Кнопки "поделиться" для сайта

Кнопки "поделиться" для сайта

01/11/2019

Рассмотрим, как добавить социальные кнопки "поделиться" для вашего сайта. Для решения данной задачи мы не будем использовать сторонние сервисы, поэтому наши кнопки "поделиться" не будут оказывать отрицательного влияния на загрузку сайта и будут стабильно работать. HTML-структура кнопок: <div...

Валидация input

Валидация input

24/10/2019

Валидация input с помощью HTML, JavaScript, а также стилизация верно и не верно заполненного поля ввода Валидация input с помощью HTML Для этой задачи воспользуемся атрибутом pattern. При использовании такого подхода, обязательно нужно сообщить пользователю в каком формате...

JavaScript: Информация О Нажатой Клавише 👇🏽

JavaScript: Информация О Нажатой Клавише 👇🏽

16/10/2019

В данной статье рассмотрим, как получить информацию о нажатой клавише клавиатуры или кнопки мыши, а также как выполнять необходимые действия (нужный код) при нажатии определенных сочетаний клавиш или кнопок (правый/левый клик мыши). Чтобы получить информацию, о том какая...

CSS: Обрезать Текст ✂️

CSS: Обрезать Текст ✂️

12/10/2019

Рассмотрим, как обрезать текст с помощью CSS. Сначала обрежем строку с текстом и добавим многоточие, а затем рассмотрим как обрезать текст по высоте (многострочный текст) Обрежем текст, если он не помещается в строке. .crop-line { white-space: nowrap; overflow-x:...

CSS to iFrame: Как Изменить CSS в iFrame

CSS to iFrame: Как Изменить CSS в iFrame

03/10/2019

Добавление CSS стилей на родительской странице не работает для тегов iFrame. Из данного руководства вы узнаете, как с помощью JavaScript изменить CSS стили в iFrame, а также как добавить новые (подключить с помощью link). Пусть у нас есть...

Клик вне элемента (блока)

Клик вне элемента (блока)

30/09/2019

Рассмотрим, как отловить клик вне элемента с помощью jQuery, а затем на чистом JavaScript. Это может понадобится, например, для всплывающих окон или для закрытия меню при клике за его пределами. Клик вне элемента jQuery Рассмотрим, как отловить клик...

jQuery to JS - Переход к нативному JavaScript

jQuery to JS - Переход к нативному JavaScript

24/09/2019

Переходим от библиотеки jQuery на чистый JavaScript. В статье вы найдёте следующие JavaScript методы: выбор элементов, перемещение по DOM-дереву, работа с атрибутами, событиями, классами; создание и удаление элементов, а также многое другое. Воспользуйтесь поиском ниже. Выбор элементов jQuery...

Плавное появление блока CSS

Плавное появление блока CSS

07/09/2019

Рассмотрим, как можно реализовать плавное появление блока при наведении с помощью CSS Пример HTML структуры. Два блока: первый видимый, при наведении на который будем плавно показывать второй (скрытый) элемент. <div class="o2t-element">i</div> <div class="o2t-element--hidden">Скрытый элемент</div> Всплывающий блок может содержать...

Слайдер до-после без использования плагинов

Слайдер до-после без использования плагинов

17/08/2019

Сегодня расмотрим как можно создать слайдер сравнения изображений (до/после) без использования плагинов с помощью JavaScript и jQuery Разметка. Обёртка с id image-comparison и двумя изображениями. Подключим jQuery <div id="image-comparison"> <img src="./img/1.jpeg" alt="alt"> <img src="./img/2.jpeg" alt="alt"> </div> <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>...

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

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

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