Таймер обратного отсчёта 🚀
Всем привет! Выкладываю код таймера обратного отсчёта для сайта 🚀
Таймер для сайта нужен в случае, если вам необходимо показать посетителям оставшееся время до какого-либо определенного события, мероприятия или праздника.
Кроме того, таймер обратного отсчета уже давно стал неотъемлемой частью Landing Page, а также «продающих сайтов». Таймер побуждает аудиторию к совершению целевого действия на сайте, ограничивая время акции, создавая эффект срочности и/или эффект дефицита товара.
Таймер написан на чистом JavaScript без использования сторонних библиотек. Вёрстка также уже написана.
Всем привет! Выкладываю код таймера обратного отсчёта для сайта 🚀
Таймер для сайта нужен в случае, если вам необходимо показать посетителям оставшееся время до какого-либо определенного события, мероприятия или праздника.
Кроме того, таймер обратного отсчета уже давно стал неотъемлемой частью Landing Page, а также «продающих сайтов». Таймер побуждает аудиторию к совершению целевого действия на сайте, ограничивая время акции, создавая эффект срочности и/или эффект дефицита товара.
Таймер написан на чистом JavaScript без использования сторонних библиотек. Вёрстка также уже написана.
Подсказка при нажатии на input 🚀
Всем привет! Выкладываю код реализации подсказки при нажатии на поле input 🚀
В дизайне часто требуется вставить подсказку для пользователя. Решением в таком случае является добавление подсказывающего текста непосредственно внутрь поля при наведении. Это делается с помощью атрибута placeholder, значением которого служит любой текст.
Подсказывающий текст отображается красным цветом, появляется при получении фокуса и исчезает, если фокус теряется.
Написано на HTML + CSS.
Всем привет! Выкладываю код реализации подсказки при нажатии на поле input 🚀
В дизайне часто требуется вставить подсказку для пользователя. Решением в таком случае является добавление подсказывающего текста непосредственно внутрь поля при наведении. Это делается с помощью атрибута placeholder, значением которого служит любой текст.
Подсказывающий текст отображается красным цветом, появляется при получении фокуса и исчезает, если фокус теряется.
Написано на HTML + CSS.
Подсказка при нажатии на input 🚀
Всем привет! Выкладываю код анимированного текста. HTML + CSS
CSS3-анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.
CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов :before и :after.
Написано на HTML + CSS.
Всем привет! Выкладываю код анимированного текста. HTML + CSS
CSS3-анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.
CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов :before и :after.
Написано на HTML + CSS.
Подсказка при нажатии на input 🚀
Всем привет! Выкладываю код реализации плавного подчёркивания при наведении. HTML + CSS 🚀
Подчёркивание текстовых ссылок уже стало определённым стандартом и сигналом о том, что это не просто текст, а именно ссылка. Это, кстати, является одной из причин, по которой не следует применять подчёркивание к обычному тексту, — пользователи будут считать, что имеют дело со ссылкой. Наряду с использованием подчёркивания благодаря CSS у разработчиков сайтов появился и альтернативный вариант — создание ссылок без подчёркивания. При правильном применении такое оформление ссылок даже может придать сайту определённый эффект. Только надо обязательно дать понять пользователю, что является ссылкой, а что обычным текстом, разграничивая их, например, цветом. Ещё можно сделать так что при наведении курсора ссылка становится подчёркнутой, меняет свой цвет или используется и тот, и другой эффект одновременно.
Написано на HTML + CSS.
Всем привет! Выкладываю код реализации плавного подчёркивания при наведении. HTML + CSS 🚀
Подчёркивание текстовых ссылок уже стало определённым стандартом и сигналом о том, что это не просто текст, а именно ссылка. Это, кстати, является одной из причин, по которой не следует применять подчёркивание к обычному тексту, — пользователи будут считать, что имеют дело со ссылкой. Наряду с использованием подчёркивания благодаря CSS у разработчиков сайтов появился и альтернативный вариант — создание ссылок без подчёркивания. При правильном применении такое оформление ссылок даже может придать сайту определённый эффект. Только надо обязательно дать понять пользователю, что является ссылкой, а что обычным текстом, разграничивая их, например, цветом. Ещё можно сделать так что при наведении курсора ссылка становится подчёркнутой, меняет свой цвет или используется и тот, и другой эффект одновременно.
Написано на HTML + CSS.
[Курс по GIT] Основы 🚀
В этом курсе познакомимся с основами Git. Рекомендую все команды прописывать своими руками. Так вы быстрее и качественне будете усваивать материал.
Git - это консольная утилита, для отслеживания и ведения истории изменения файлов, в вашем проекте. Чаще всего его используют для кода, но можно и для других файлов. Например, для картинок - полезно для дизайнеров.
С помощью Git-a вы можете откатить свой проект до более старой версии, сравнивать, анализировать или сливать свои изменения в репозиторий.
Репозиторием называют хранилище вашего кода и историю его изменений. Git работает локально и все ваши репозитории хранятся в определенных папках на жестком диске.
Каждая точка сохранения вашего проекта носит название коммит (commit). У каждого commit-a есть hash (уникальный id) и комментарий. Из таких commit-ов собирается ветка. Ветка - это история изменений. У каждой ветки есть свое название. Репозиторий может содержать в себе несколько веток, которые создаются из других веток или вливаются в них.
В этом курсе познакомимся с основами Git. Рекомендую все команды прописывать своими руками. Так вы быстрее и качественне будете усваивать материал.
Git - это консольная утилита, для отслеживания и ведения истории изменения файлов, в вашем проекте. Чаще всего его используют для кода, но можно и для других файлов. Например, для картинок - полезно для дизайнеров.
С помощью Git-a вы можете откатить свой проект до более старой версии, сравнивать, анализировать или сливать свои изменения в репозиторий.
Репозиторием называют хранилище вашего кода и историю его изменений. Git работает локально и все ваши репозитории хранятся в определенных папках на жестком диске.
Каждая точка сохранения вашего проекта носит название коммит (commit). У каждого commit-a есть hash (уникальный id) и комментарий. Из таких commit-ов собирается ветка. Ветка - это история изменений. У каждой ветки есть свое название. Репозиторий может содержать в себе несколько веток, которые создаются из других веток или вливаются в них.
Анимация при наведении на ссылку 🚀
Всем привет! В этом посте вы узнаете, как можно сделать красивую кастомную анимацию при наведении на ссылку 🚀
CSS3-анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.
CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов :before и :after. Список анимируемых свойств приведен на этой странице. При создании анимации не стоит забывать о возможных проблемах с производительностью, так как на изменение некоторых свойств требуется много ресурсов.
Написано на HTML + CSS.
Всем привет! В этом посте вы узнаете, как можно сделать красивую кастомную анимацию при наведении на ссылку 🚀
CSS3-анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.
CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов :before и :after. Список анимируемых свойств приведен на этой странице. При создании анимации не стоит забывать о возможных проблемах с производительностью, так как на изменение некоторых свойств требуется много ресурсов.
Написано на HTML + CSS.
Проверка файлов на вирусы в браузере, надежнее любого антивируса 🔥
Элементарная безопасность: не открывать на своём ПК сомнительные файлы от незнакомых людей. Лучше использовать сторонние сервисы — например, Virustotal. Он проверяет файлы и сайты на наличие вредоносного кода по базам 40 разных антивирусов. Это надёжнее, чем проверять одним антивирусом. Ещё удобно, что Virustotal не требует установки и работает даже на смартфоне.
Достаточно загрузить файл весом до 650 МБ или ссылку, чтобы онлайн-антивирус сделал своё дело — полный анализ файла всеми антивирусами и обобщённый результат. Если файл уже был загружен в сервис и прошел проверку, результат будет мгновенным. Хотя у вас всегда есть возможность просканировать файл ещё раз — чтобы информация точно была актуальной.
Если боитесь открыть ссылку или документ, Virustotal является одним из лучших сервисов, который регулярно обновляет свои базы данных. Пользуйтесь!
Элементарная безопасность: не открывать на своём ПК сомнительные файлы от незнакомых людей. Лучше использовать сторонние сервисы — например, Virustotal. Он проверяет файлы и сайты на наличие вредоносного кода по базам 40 разных антивирусов. Это надёжнее, чем проверять одним антивирусом. Ещё удобно, что Virustotal не требует установки и работает даже на смартфоне.
Достаточно загрузить файл весом до 650 МБ или ссылку, чтобы онлайн-антивирус сделал своё дело — полный анализ файла всеми антивирусами и обобщённый результат. Если файл уже был загружен в сервис и прошел проверку, результат будет мгновенным. Хотя у вас всегда есть возможность просканировать файл ещё раз — чтобы информация точно была актуальной.
Если боитесь открыть ссылку или документ, Virustotal является одним из лучших сервисов, который регулярно обновляет свои базы данных. Пользуйтесь!
Крутая анимация при наведении 🚀
Всем привет! В этом посте покажу, как можно сделать карточку с крутым эффектом при наведении.
Данная карточка написана на HTML + CSS.
CSS3-анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.
CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов :before и :after. Список анимируемых свойств приведен на этой странице. При создании анимации не стоит забывать о возможных проблемах с производительностью, так как на изменение некоторых свойств требуется много ресурсов.
Всем привет! В этом посте покажу, как можно сделать карточку с крутым эффектом при наведении.
Данная карточка написана на HTML + CSS.
CSS3-анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.
CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов :before и :after. Список анимируемых свойств приведен на этой странице. При создании анимации не стоит забывать о возможных проблемах с производительностью, так как на изменение некоторых свойств требуется много ресурсов.
Видео внутри текста 🚀
Всем привет! В этом посте покажу, как можно сделать видео внутри текста.
Данная карточка написана на HTML + CSS.
Тег video добавляет, воспроизводит и управляет настройками видеоролика на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>
Всем привет! В этом посте покажу, как можно сделать видео внутри текста.
Данная карточка написана на HTML + CSS.
Тег video добавляет, воспроизводит и управляет настройками видеоролика на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>
Ключевое слово this [Курс по JS] 🚀
Всем привет! В этом посте разберем, как ведет себя ключевое слово this в зависимости от контекста. Уверен, будет полезно!
Поведение ключевого слова this в JavaScript несколько отличается по сравнению с остальными языками. В большинстве случаев значение this определяется тем, каким образом вызвана функция. Значение this не может быть установлено путём присваивания во время исполнения кода и может иметь разное значение при каждом вызове функции. В ES5 представлен метод bind(), который используется для привязки значения ключевого слова this независимо от того, как вызвана функция. Также в ES2015 представлены стрелочные функции, которые не создают собственные привязки к this (они сохраняют значение this лексического окружения, в котором были созданы).
Всем привет! В этом посте разберем, как ведет себя ключевое слово this в зависимости от контекста. Уверен, будет полезно!
Поведение ключевого слова this в JavaScript несколько отличается по сравнению с остальными языками. В большинстве случаев значение this определяется тем, каким образом вызвана функция. Значение this не может быть установлено путём присваивания во время исполнения кода и может иметь разное значение при каждом вызове функции. В ES5 представлен метод bind(), который используется для привязки значения ключевого слова this независимо от того, как вызвана функция. Также в ES2015 представлены стрелочные функции, которые не создают собственные привязки к this (они сохраняют значение this лексического окружения, в котором были созданы).
