Что такое якорные ссылки и для чего они нужны?
Якорные ссылки помогут направить посетителей в нужный раздел сайта.
Когда посетитель сайта нажимает на элемент, к которому добавлена ссылка на якорь, он автоматически переносится в ту часть страницы, где был добавлен якорь.
Как создать якорную ссылку?
Задаем ссылке через хэштег ссылку такого вида
Затем, необходимо разделу или блоку до которого надо прокрутить добавляем
Как настроить плавную анимацию на JS читайте в полной статье.
Якорные ссылки помогут направить посетителей в нужный раздел сайта.
Когда посетитель сайта нажимает на элемент, к которому добавлена ссылка на якорь, он автоматически переносится в ту часть страницы, где был добавлен якорь.
Как создать якорную ссылку?
Задаем ссылке через хэштег ссылку такого вида
<ul class="link_box"> <li><a href="#link">Ссылка</a></li> <li><a href="#link2">Ссылка</a></li> <li><a href="#link3">Ссылка</a></li> <li><a href="#link4">Ссылка</a></li></ul>Затем, необходимо разделу или блоку до которого надо прокрутить добавляем
id с таким же именем, как href у ссылки, только уже без хэштега. Каждый id должен соответствовать своей ссылке<div id="link">Раздел</div><div id="link2">Раздел</div><div id="link3">Раздел</div><div id="link4">Раздел</div>Как настроить плавную анимацию на JS читайте в полной статье.
May 20, 2020
Mobile First подразумевает сперва разработку под мобильные системы. Это значит, что сперва разрабатывается мобильная версия сайта, а уже потом идет подготовка к созданию десктопной версии.
Проверьте, соответствует ли мобильная версия вашего сайта следующим пунктам:
- Информация отображается корректно как в книжной, так и в альбомной ориентации;
- Все кликабельные элементы работают;
- Отсутствуют тяжелые изображения, которые замедляют загрузку страницы;
- На сайте нет ничего, связанного с Flash;
- Нет всплывающих окон, которые перекрывают полстраницы;
- Нигде не задействована горизонтальная прокрутка;
- Контактный номер кликабельный или его хотя бы можно скопировать;
- Поля в форме регистрации короткие и простые, отключена функция автозаполнения (часто может подтягиваться некорректная информация);
- Все кнопки сделаны с помощью CSS, нет кнопок-изображений;
- Размер картинок меняется автоматически в зависимости от типа устройства;
- Есть возможность совершить покупку в один клик.
Проверьте, соответствует ли мобильная версия вашего сайта следующим пунктам:
- Информация отображается корректно как в книжной, так и в альбомной ориентации;
- Все кликабельные элементы работают;
- Отсутствуют тяжелые изображения, которые замедляют загрузку страницы;
- На сайте нет ничего, связанного с Flash;
- Нет всплывающих окон, которые перекрывают полстраницы;
- Нигде не задействована горизонтальная прокрутка;
- Контактный номер кликабельный или его хотя бы можно скопировать;
- Поля в форме регистрации короткие и простые, отключена функция автозаполнения (часто может подтягиваться некорректная информация);
- Все кнопки сделаны с помощью CSS, нет кнопок-изображений;
- Размер картинок меняется автоматически в зависимости от типа устройства;
- Есть возможность совершить покупку в один клик.
May 20, 2020
May 20, 2020
Как подключить собственные шрифты к своему проекту.
Очень часто приходится подключать к проекту свои шрифты, чтобы как то уникализировать и выделить свой проект среди остальных и обеспечить ему максимальное удобство при чтении и использовании. В данной статье мы подробно рассмотрим способы подключения собственных шрифтов на сайт через Ваш файл стилей.
#CSS
Очень часто приходится подключать к проекту свои шрифты, чтобы как то уникализировать и выделить свой проект среди остальных и обеспечить ему максимальное удобство при чтении и использовании. В данной статье мы подробно рассмотрим способы подключения собственных шрифтов на сайт через Ваш файл стилей.
#CSS
May 21, 2020
Анимированный прелоадер для сайта на чистом CSS.
Страница любого сайта или веб-приложения не загружается мгновенно. На загрузку и отображение страницы необходимо некоторое время. При этом страница при её загрузке может видоизменяться. Обычно это происходит при загрузке стилей, шрифтов, картинок. Чтобы этот не привлекательный момент скрыть от пользователя, можно на время загрузки страницы отобразить пользователю какой-нибудь анимированный прелоадер. А после того, как страница полностью загрузится его убрать. Основная цель прелоадера — это улучшить впечатление пользователя о сайте.
#HTML_CSS
Страница любого сайта или веб-приложения не загружается мгновенно. На загрузку и отображение страницы необходимо некоторое время. При этом страница при её загрузке может видоизменяться. Обычно это происходит при загрузке стилей, шрифтов, картинок. Чтобы этот не привлекательный момент скрыть от пользователя, можно на время загрузки страницы отобразить пользователю какой-нибудь анимированный прелоадер. А после того, как страница полностью загрузится его убрать. Основная цель прелоадера — это улучшить впечатление пользователя о сайте.
#HTML_CSS
May 21, 2020
AOS — это современная библиотека, которая способна менять позиции элементов при скролле. Богатый функционал, есть возможность создавать свои анимации.
Инструкция по установке и настройке AOS
Рассмотрим на примере подключения через CDN
Шаг 1.
Подключить перед закрывающим тегом </head> CSS файл
Перед закрывающим тегом </body> подключить JS файл
Шаг 2.
Выполнить инициализацию библиотеки. Перед закрывающим тегом </body> добавить
Шаг 3.
Добавляем анимацию для нашего блока. Просто добавьте к блоку data-атрибут c названием анимации
#JS #HTML_CSS
Инструкция по установке и настройке AOS
Рассмотрим на примере подключения через CDN
Шаг 1.
Подключить перед закрывающим тегом </head> CSS файл
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">Перед закрывающим тегом </body> подключить JS файл
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>Шаг 2.
Выполнить инициализацию библиотеки. Перед закрывающим тегом </body> добавить
<script> AOS.init();</script>Шаг 3.
Добавляем анимацию для нашего блока. Просто добавьте к блоку data-атрибут c названием анимации
<div data-aos="fade-up-right"></div>#JS #HTML_CSS
May 22, 2020
У нас новая рубрика, давайте не только обучаться и работать, но и отдыхать. Теперь, каждую пятницу, будем что то рекомендовать для проведения личного досуга в выходные. Но не просто проведения. а конечно c айтишным упором. И открывает эту пятницу фильм.
Игра в имитацию (2014)
1941 год. Английскому математику Алану Тьюрингу поручено расшифровать секретный код Третьего рейха – "Энигма". Тьюринг действует по поручению Британской разведки в центре, специализирующемся на взломе шифров и кодов. Для выполнения сверхсекретного задания здесь собрана целая команда талантливых ученых, которым предстоит создать первый в мире компьютер.
КиноПоиск: 7.6
IMDB: 8.0
Игра в имитацию (2014)
1941 год. Английскому математику Алану Тьюрингу поручено расшифровать секретный код Третьего рейха – "Энигма". Тьюринг действует по поручению Британской разведки в центре, специализирующемся на взломе шифров и кодов. Для выполнения сверхсекретного задания здесь собрана целая команда талантливых ученых, которым предстоит создать первый в мире компьютер.
КиноПоиск: 7.6
IMDB: 8.0
May 22, 2020
Анимированный скролл на чистом CSS
Совсем недавно мы разбирали, что такое ссылка-якорь и как сделать плавную анимацию к блоку по клике на эту ссылку. В этом уроке поговорим о создании анимированной кнопки-скролла для привлечения пользователя вашего проекта к какому либо действию.
#HTML_CSS
Совсем недавно мы разбирали, что такое ссылка-якорь и как сделать плавную анимацию к блоку по клике на эту ссылку. В этом уроке поговорим о создании анимированной кнопки-скролла для привлечения пользователя вашего проекта к какому либо действию.
#HTML_CSS
May 23, 2020
Stacks - это бесплатный и простой в использовании диспетчер задач, который помогает организовать ваши задачи элегантным и интуитивно понятным способом. При использовании парадигмы канбан для управления вашими проектами, Stacks предлагает гибкий и наглядный способ организации задач. Сочетая мощные функции, такие как теги, группировка задач, быстрый поиск и вложения с красивым пользовательским интерфейсом, Stacks стремится сделать управление задачами простым и увлекательным. Скачать планировщик для своей платформы можно с официального сайта.
#Инструменты
#Инструменты
May 24, 2020
Лучшее на канале за последнюю неделю.
1) IKONS - иконки для дизайнеров и разработчиков.
2) AOS — это современная библиотека, которая может менять позиции элементов при скролле.
3) Magic CSS3 Animations - библиотека крутых кросс-браузерных анимаций.
4) Vue.js с нуля
5) Анимированный прелоадер для сайта на чистом CSS.
Всем успешной разработки!
#Лучшее
1) IKONS - иконки для дизайнеров и разработчиков.
2) AOS — это современная библиотека, которая может менять позиции элементов при скролле.
3) Magic CSS3 Animations - библиотека крутых кросс-браузерных анимаций.
4) Vue.js с нуля
5) Анимированный прелоадер для сайта на чистом CSS.
Всем успешной разработки!
#Лучшее
May 24, 2020
Particles.js - библиотека для создания красивых плавающих частиц на веб-странице. Плавающие частицы данной библиотеки отлично реагируют на поведение курсора для создания интерактивности.
#JS
#JS
May 25, 2020
YoPalette - отличный сервис для подбора оптимальной цветовой гаммы при разработке шаблона или макета сайта. Просто делаете клик по цвету и он будет сразу скопирован в буфер обмена. YoPalette поможет оптимально подобрать цветовое решение с оттенками для Вашего веб-проекта.
#Инструменты
#Инструменты
May 25, 2020
Corso - шаблон для целевой страницы.
Шаблон разработан на Bootstrap 4 и имеет таймер обратного отсчета до даты события, слайдер галереи, слайдер логотипов, лайтбокс подробностей для дополнительной информации, лайтбокс видео, слайдер текста для отзывов, раскрывающуюся навигацию, дополнительные страницы: подробности статьи, условия, политика конфиденциальности, регистрация, информационный бюллетень и контактные формы.
Corso имеет смешанный стиль дизайна со светлым и темным фоном, который создает современную обстановку для презентации вашего мероприятия вместе с контрастной черно-желтой цветовой гаммой.
#Шаблоны
Шаблон разработан на Bootstrap 4 и имеет таймер обратного отсчета до даты события, слайдер галереи, слайдер логотипов, лайтбокс подробностей для дополнительной информации, лайтбокс видео, слайдер текста для отзывов, раскрывающуюся навигацию, дополнительные страницы: подробности статьи, условия, политика конфиденциальности, регистрация, информационный бюллетень и контактные формы.
Corso имеет смешанный стиль дизайна со светлым и темным фоном, который создает современную обстановку для презентации вашего мероприятия вместе с контрастной черно-желтой цветовой гаммой.
#Шаблоны
👍1
May 25, 2020
Анимированная страница 404 ошибки на чистом CSS.
Одной из самых распространенных проблем, с которыми сталкиваются посетители различных сайтов является ошибка 404 Not Found. Если говорить простым языком, то он означает, что страницы с таким адресом не существует. В этом уроке мы рассмотрим как стилизовать страницу с 404 ошибкой.
#HTML_CSS
Одной из самых распространенных проблем, с которыми сталкиваются посетители различных сайтов является ошибка 404 Not Found. Если говорить простым языком, то он означает, что страницы с таким адресом не существует. В этом уроке мы рассмотрим как стилизовать страницу с 404 ошибкой.
#HTML_CSS
May 26, 2020
Бесплатный анимированный набор иконок от команды дизайнеров Mercury, чтобы добавить немного плавного движения в ваш свежий дизайн пользовательского интерфейса. Прилагаемый архив содержит 24 иконки в нескольких форматах и разрешениях:
- CSS SVG для Web
- PNG-спрайты для iOS и Android (версии 24 и 48 пикселей)
- Lottie JSON для React Native
- Статические иконки в PNG + SVG.
#Иконки
- CSS SVG для Web
- PNG-спрайты для iOS и Android (версии 24 и 48 пикселей)
- Lottie JSON для React Native
- Статические иконки в PNG + SVG.
#Иконки
May 26, 2020
Курс Python 3 для начинающих от ADV-IT.
Язык программирования Python 3 — это мощный инструмент для создания программ самого разнообразного назначения, доступный даже для новичков. С его помощью можно решать задачи различных типов. Этот курс вас с основами языка, работой с запросами и данными, погружением во фреймворк Django, установкой и запуском игр.
#Курсы
Язык программирования Python 3 — это мощный инструмент для создания программ самого разнообразного назначения, доступный даже для новичков. С его помощью можно решать задачи различных типов. Этот курс вас с основами языка, работой с запросами и данными, погружением во фреймворк Django, установкой и запуском игр.
#Курсы
May 27, 2020
May 27, 2020
May 27, 2020
Resizing — бесплатный онлайн сервис, который помогает конвертировать, оптимизировать, обрезать и изменять размеры изображений в сети одним щелчком мыши. Есть расширение для Chrome.
#Инструменты
#Инструменты
May 27, 2020
Что такое Fallback и почему это необходимо?
С английского слово fallback можно перевести как резервный. То есть иначе говоря, вы пытаетесь оставить резервный вариант для отображения того или иного элемента в случае проблем с отображением стилей, работой jаvascript или jquery.
Банальный пример того, как все сейчас рисуют скругленные края у элементов:
В случае, если браузер пользователя не поддерживает CSS3, он увидит просто прямоугольник, обладающий всей необходимой функциональность. То есть отобразится базовый вид элемента - это и есть fallback (резервная) страховка.
#Статьи
С английского слово fallback можно перевести как резервный. То есть иначе говоря, вы пытаетесь оставить резервный вариант для отображения того или иного элемента в случае проблем с отображением стилей, работой jаvascript или jquery.
Банальный пример того, как все сейчас рисуют скругленные края у элементов:
#roundbox { -webkit-border-radius: 5px; /* Safari */ -moz-border-radius: 5px; /* Firefox */ -o-border-radius: 5px; /* Opera */ border-radius: 5px; }В случае, если браузер пользователя не поддерживает CSS3, он увидит просто прямоугольник, обладающий всей необходимой функциональность. То есть отобразится базовый вид элемента - это и есть fallback (резервная) страховка.
#Статьи
👍1
May 28, 2020
Evolution CMS - это бесплатная платформа с открытым исходным кодом для разработки сайтов и сервисов, перераборанная, всемирно известная MODX Evolution с использованием компонентов PHP-фреймворка Laravel, но с обязательным условием сохранения полной обратной совместимости.
Laravel выбран потому, что имеется обширная документация, активная поддержка, множество готовых пакетов, которые можно будет использовать и на Evolution 2.0. На данный момент более 70 000 сайтов сделано на Evolution CMS.
Так как прародитель этой CMS был запущен в далеком 2005 году, сегодня у Evolution CMS имеется развитое сообщество разработчиков по всему миру.
#CMS
Laravel выбран потому, что имеется обширная документация, активная поддержка, множество готовых пакетов, которые можно будет использовать и на Evolution 2.0. На данный момент более 70 000 сайтов сделано на Evolution CMS.
Так как прародитель этой CMS был запущен в далеком 2005 году, сегодня у Evolution CMS имеется развитое сообщество разработчиков по всему миру.
#CMS
May 28, 2020