​​Крутая анимация при наведении 🚀

Всем привет! В этом посте покажу, как можно сделать карточку с крутым эффектом при наведении.

Данная карточка написана на HTML + CSS.

CSS3-анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.

CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов :before и :after. Список анимируемых свойств приведен на этой странице. При создании анимации не стоит забывать о возможных проблемах с производительностью, так как на изменение некоторых свойств требуется много ресурсов.

Готовый код

​​Видео внутри текста 🚀

Всем привет! В этом посте покажу, как можно сделать видео внутри текста.

Данная карточка написана на HTML + CSS.

Тег video добавляет, воспроизводит и управляет настройками видеоролика на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>

Готовый код

​​Ключевое слово this [Курс по JS] 🚀

Всем привет! В этом посте разберем, как ведет себя ключевое слово this в зависимости от контекста. Уверен, будет полезно!

Поведение ключевого слова this в JavaScript несколько отличается по сравнению с остальными языками. В большинстве случаев значение this определяется тем, каким образом вызвана функция. Значение this не может быть установлено путём присваивания во время исполнения кода и может иметь разное значение при каждом вызове функции. В ES5 представлен метод bind(), который используется для привязки значения ключевого слова this независимо от того, как вызвана функция. Также в ES2015 представлены стрелочные функции, которые не создают собственные привязки к this (они сохраняют значение this лексического окружения, в котором были созданы).

​​Задача по JavaScript 🚀

Подумайте, что будет выведено в консоль, после выполнения программы.

Свой вариант ответа указывай здесь 🔥👇

Что будет выведено?

CoderZone

Друзья, создал второй канал с мемами и интересными фактами из мира IT. Также на нем буду продолжать выкладывать задачи для проверки своих знаний ❗️

Подписывайтесь, будет интересно 😉👇

CoderZone
CoderZone
CoderZone

Всем успехов в обучении:)

Hotte Take Away Food - шаблон, который идеально подходит для уличной еды, фудкорта, пекарни, кондитерской, кофейни. Довольно интересный шаблон, с большим количеством мелочей.

Сложность: средняя

Шаблоны макетов Figma 🔥

По многочисленным просьбам буду выкладывать еще и макеты шаблонов, чтобы вы могли практиковаться в верстке)

Ссылка на макет в предыдущем посте 👆

Задачка JS

Сколько раз будет выведена переменная j?

CoderZone

Lucknow - шаблон интернет магазина по доставке еды, имеющий стильный, приятный и минималистичный дизайн. Эта работа будет хорошо смотреться в вашем портфолио!)

Сложность: средняя

Задача по JavaScript 🚀

Подумайте, что будет выведено в консоль, после выполнения программы.

Свой вариант ответа указывай здесь 🔥👇

Karbox - шаблон для автосалона. Данный шаблон включает в себя 6 уникальных и современных экранов пользовательского интерфейса в формате Figma. На этом шаблоне вы сможете отработать свои навыки верстки различных часто встречающихся элементов на сайте.

Сложность: средняя