Опубликовано Оставить комментарий

Качающееся меню на CSS

Качающееся CSS меню

Качающееся меню — меню с использованием свойств transition и transform

Ролик о создании простого меню на CSS стал популярным на канале, потому возвращаемся к теме и создаём качающееся меню на CSS. Если вы знакомы с темой построения выпадающих меню, следует смотреть видео с момента рассказа о добавлении свойств перехода — transition и transform.  Читать далее Качающееся меню на CSS

Опубликовано 2 комментария

Изменение dropdown меню Bootstrap

Изменение dropdown меню Bootstrap
Изменение dropdown меню Bootstrap

Понадобилось изменить стандартное отображение dropdown меню Bootstrap. По основам Bootstrap есть целый список роликов, а по компонентам не нашёл время заснять. Итак,  исходный компонент находится тут, но можно воспользоваться навигационным баром она же навигационная панель меню. Результат, к который должен получится, виден на гиф-анимации к заметке (кажется переборщил с мельканием 🙂 ). Читать далее Изменение dropdown меню Bootstrap

Опубликовано Оставить комментарий

Зависимые списки

Зависимые списки с JavaScript
Зависимые списки с JavaScript

Зависимые списки — часто используемое решение для улучшения пользовательского интерфейса. Пользователю не нужно вводить/рассматривать огромную массу информации. Достаточно выбрать нужны элемент списка в первом списке, а через JavaScript построить второй список, зависимый от первого. Это могут быть сочетания Автокомпания — Марка машины, название языка программирования — курсы по этому языку программирования. Читать далее Зависимые списки

Опубликовано Оставить комментарий

JavaScript анимация кнопки вызова диспетчера

JavaScript анимация кнопки вызова диспетчера
JavaScript анимация кнопки вызова диспетчера

JavaScript анимация кнопки вызова диспетчера или менеджера через Skype или другой мессенджер выполнятся через таймеры JavaScript. Верстаем заготовку кнопки, позиционируем её (в нашем случае нижняя правая часть страницы); в атрибуте href прописываем псевдопротокол skype и название учётной записи, на которую будет осуществлён звонок. Читать далее JavaScript анимация кнопки вызова диспетчера

Опубликовано Оставить комментарий

Autocomplete в HTML

Autocomplete в HTML (Автозавершение)
Autocomplete в HTML (Автозавершение)

Автозавершение (Autocomplete) ввода — удобный механизм помочь посетителю сайта выбрать нужный пункт для ввода и сократить время на обработку данных (на стороне сервера данные проверяются всё равно, но при правильном вводе посетитель сэкономит время). В HTML-элементе input есть возможность создания атрибута autocomplete, который подключает или отключает подсказку вводимых ранее значений. Читать далее Autocomplete в HTML

Опубликовано Оставить комментарий

Brackets и Emmet

Brackets Emmet
Brackets Emmet

Популярный кроссплатформенный текстовый редактор Brackets (бесплатный, для работы с HTML, CSS, JavaScript) от Adobe позволяет подключать плагин быстрой верстки Emmet в несколько нажатий. Достаточно открыть окно плагинов, ввести в поисковую строку ключевую фразу «emmet» и нажать ссылку «Установить». Важно помнить, что Emmet начинает работать только на HTML-странице или в CSS-файле, если вы создаёте CSS-свойства — во вновь созданном пустом документе без расширения ничего сделать не получится. Читать далее Brackets и Emmet

Опубликовано Оставить комментарий

Emmet и CSS-свойства

Emmet и CSS-свойства
Emmet и CSS-свойства

В заметке об Emmet, мы описали чем хорошо этот плагин для создания структуры HTML-страницы, блоков, меню и т.д. Надо признаться, что Emmet и CSS-свойства — тоже очень дружат. При помощи огромного набора сокращений, можно «развернуть» любое CSS-свойство в считанные секунды. Попробуйте ввести в Emmet: «bg+» или «f+» (без кавычек) и Вы увидите, как появятся полные записи: background: #fff url() 0 0 no-repeat; и font: 1em Arial,sans-serif; Оцените по достоинству возможности Emmet! Читать далее Emmet и CSS-свойства

Опубликовано Оставить комментарий

Яндекс.Карты (Static API)

Яндекс.Карта
Яндекс.Карта

Яндекс.Карты — популярный картографический сервис от компании Яндекс. С его помощью можно отмечать месторасположение объектов на карте, строить маршруты, вставлять фрагменты карты разного масштаба на своём сайте при помощи статического API или работать с картой при помощи JavaScript. Речь пойдет о том, как использовать статический API (программный прикладной интерфейс).  Читать далее Яндекс.Карты (Static API)

Опубликовано Оставить комментарий

CSS-селектор дочернего элемента

Селектор дочернего HTML-элемента
Селектор дочернего HTML-элемента

Когда мы работаем с HTML, между элементами существуют связи «родительски-дочерний«, «соседние элементы», «предок», «потомок». Всем этим связям можно поставить в соответствие CSS-селектор. Один из селекторовCSS-селектор дочернего элемента. Этот селектор выбирает такие HTML-элементы внутри других, что первые находятся на самом первом уровне вложенности. Другими словами HTML-элементы с большими уровнями вложенности не выбираются. Читать далее CSS-селектор дочернего элемента

Опубликовано Оставить комментарий

Emmet

Emmet и HTML
Emmet и HTML

Emmet — плагин для быстрой верстки HTML-страниц. Записывая названия HTML-элементов мы можем их превращать в разметку гораздо быстрей, чем писать каждый тег вручную. Например, div превращается в <div></div>, а div>p в <div><p></p></div>. Начинающему разработчику на первый момент может показаться, что все запутано и не стоит возиться с набором новых обозначений. Но на практике верстальщик создаёт HTML-страницу гораздо быстрее, когда владеет этим плагином. Читать далее Emmet