Topchiy Dev
Topchiy Dev
  • Видео 699
  • Просмотров 585 797
Свойство animation-play-state в CSS || Animation-play-state property in CSS || Full CSS course
В этом видео уроке вы узнаете, что такое свойство animation-play-state и как оно работает и применяется на примерах.
In this video tutorial you will learn what the animation-play-state property is and how it works and is applied using examples.
Please hit the LIKE 👍, it`ll help to grow on RUclips algorithm.
Have a nice day, GOD bless you ❤️
👍 Полезная информация для программирования и дизайна на моем телеграм-канале: t.me/TopchiyDev
💵 Поддержать канал (support channel): 5375411204111681 (universal bank || mono)
💵 Поддержать канал (support channel): send.monobank.ua/jar/3Aze2gcvVa
💵 Поддержать канал (support channel): www.patreon.com/TopchiyDev
👍 Subscribe: ruclips.net/channel/UC93wVeK8kdQAHQYFjpH...
Просмотров: 40

Видео

Как добавить счётчик показателей на сайт HTML, CSS & JS | CounterUp Numbers using counterup.js16:48Как добавить счётчик показателей на сайт HTML, CSS & JS | CounterUp Numbers using counterup.js
Как добавить счётчик показателей на сайт HTML, CSS & JS | CounterUp Numbers using counterup.js
Просмотров 1697 часов назад
👉 Support me on Patreon: www.patreon.com/c/topchiydev/membership Counter Up Number Animation using counterup.js jQuery plugin В этом видео вы узнаете, как сделать счётчик для показателей на сайте используя HTML, CSS & JavaScript jQuery counterUp.js plugin. 🔗 jQuery link: cdnjs.com/libraries/jquery 🔗 counterUp link: cdnjs.com/libraries/Counter-Up 🔗 waypoints link: cdnjs.com/libraries/waypoints P...
Tada animation CSS using HTML & CSS step by step5:25Tada animation CSS using HTML & CSS step by step
Tada animation CSS using HTML & CSS step by step
Просмотров 5514 часов назад
👉 Animation CSS collection on Patreon: www.patreon.com/collection/817084 Tada animation CSS using HTML & CSS step by step. В этом видео вы узнаете, как сделать анимацию с эффектом Tada используя HTML & CSS анимации шаг за шагом. Please hit the LIKE 👍, it`ll help to grow on RUclips algorithm. Have a nice day, GOD bless you ❤️ 👍 Полезная информация для программирования и дизайна на моем телеграм-...
Свойство animation-direction в CSS || Animation-direction property in CSS || Full CSS course10:42Свойство animation-direction в CSS || Animation-direction property in CSS || Full CSS course
Свойство animation-direction в CSS || Animation-direction property in CSS || Full CSS course
Просмотров 6619 часов назад
Animation-direction property in CSS В этом видео уроке вы узнаете, что такое свойство animation-direction в CSS, а также узнаете, как оно работает и примменяется на примерах. Please hit the LIKE 👍, it`ll help to grow on RUclips algorithm. Have a nice day, GOD bless you ❤️ 👍 Полезная информация для программирования и дизайна на моем телеграм-канале: t.me/TopchiyDev 💵 Поддержать канал (support ch...
Кнопка с волновым эффектом при клике HTML, CSS & JavaScript || Button with ripple effect on click JS9:37Кнопка с волновым эффектом при клике HTML, CSS & JavaScript || Button with ripple effect on click JS
Кнопка с волновым эффектом при клике HTML, CSS & JavaScript || Button with ripple effect on click JS
Просмотров 129День назад
Button with ripple effect on click using HTML, CSS & JavaScript В этом видео вы узнаете, как сделать кнопку с волновым эффектом при клике на кнопку используя HTML, CSS & JavaScript шаг за шагом. Please hit the LIKE 👍, it`ll help to grow on RUclips algorithm. Have a nice day, GOD bless you ❤️ 👍 Полезная информация для программирования и дизайна на моем телеграм-канале: t.me/TopchiyDev 💵 Поддержа...
Анимация раскачки для элемента HTML & CSS || Swing animation CSS6:06Анимация раскачки для элемента HTML & CSS || Swing animation CSS
Анимация раскачки для элемента HTML & CSS || Swing animation CSS
Просмотров 92День назад
👉 Animation CSS collection on Patreon: www.patreon.com/collection/817084 Swing animation using HTML & CSS. В этом видео вы узнаете, как сделать анимацию раскачки для элемента. Please hit the LIKE 👍, it`ll help to grow on RUclips algorithm. Have a nice day, GOD bless you ❤️ 👍 Полезная информация для программирования и дизайна на моем телеграм-канале: t.me/TopchiyDev 💵 Поддержать канал (support c...
Свойство animation-iteration-count в CSS || Animation-iteration-count property in CSS || Full CSS8:57Свойство animation-iteration-count в CSS || Animation-iteration-count property in CSS || Full CSS
Свойство animation-iteration-count в CSS || Animation-iteration-count property in CSS || Full CSS
Просмотров 7714 дней назад
Свойство animation-iteration-count в CSS || Animation-iteration-count property in CSS || Full CSS
Эффект наложения при наведении откидывать вверх изображение HTML & CSS | Hinge up overlay effect CSS12:08Эффект наложения при наведении откидывать вверх изображение HTML & CSS | Hinge up overlay effect CSS
Эффект наложения при наведении откидывать вверх изображение HTML & CSS | Hinge up overlay effect CSS
Просмотров 19914 дней назад
Эффект наложения при наведении откидывать вверх изображение HTML & CSS | Hinge up overlay effect CSS
Анимация встряхивания по горизонтали и вертикали для элемента CSS || ShakeX and ShakeY animation CSS7:36Анимация встряхивания по горизонтали и вертикали для элемента CSS || ShakeX and ShakeY animation CSS
Анимация встряхивания по горизонтали и вертикали для элемента CSS || ShakeX and ShakeY animation CSS
Просмотров 6214 дней назад
Анимация встряхивания по горизонтали и вертикали для элемента CSS || ShakeX and ShakeY animation CSS
Свойство animation-delay в CSS || Animation-delay property in CSS || Full CSS course8:06Свойство animation-delay в CSS || Animation-delay property in CSS || Full CSS course
Свойство animation-delay в CSS || Animation-delay property in CSS || Full CSS course
Просмотров 7321 день назад
Свойство animation-delay в CSS || Animation-delay property in CSS || Full CSS course
Адаптивная галерея с фильтрами HTML, CSS & JavaScript || Responsive filterable gallery using Isotope26:19Адаптивная галерея с фильтрами HTML, CSS & JavaScript || Responsive filterable gallery using Isotope
Адаптивная галерея с фильтрами HTML, CSS & JavaScript || Responsive filterable gallery using Isotope
Просмотров 18121 день назад
Адаптивная галерея с фильтрами HTML, CSS & JavaScript || Responsive filterable gallery using Isotope
Rubber band animation CSS7:28Rubber band animation CSS
Rubber band animation CSS
Просмотров 11021 день назад
Rubber band animation CSS
Свойство animation-timing-function в CSS || Animation-timing-function property in CSS25:56Свойство animation-timing-function в CSS || Animation-timing-function property in CSS
Свойство animation-timing-function в CSS || Animation-timing-function property in CSS
Просмотров 8728 дней назад
Свойство animation-timing-function в CSS || Animation-timing-function property in CSS
Эффект наложения при наведении используя HTML & CSS шаг за шагом | Overlay Effect on hover using CSS9:10Эффект наложения при наведении используя HTML & CSS шаг за шагом | Overlay Effect on hover using CSS
Эффект наложения при наведении используя HTML & CSS шаг за шагом | Overlay Effect on hover using CSS
Просмотров 211Месяц назад
Эффект наложения при наведении используя HTML & CSS шаг за шагом | Overlay Effect on hover using CSS
Как сделать боковое вертикально меню используя HTML, CSS & JavaScript || Sidebar navigation menu JS21:12Как сделать боковое вертикально меню используя HTML, CSS & JavaScript || Sidebar navigation menu JS
Как сделать боковое вертикально меню используя HTML, CSS & JavaScript || Sidebar navigation menu JS
Просмотров 294Месяц назад
Как сделать боковое вертикально меню используя HTML, CSS & JavaScript || Sidebar navigation menu JS
Анимация вспышки для элемента HTML & CSS || Flash animation CSS4:53Анимация вспышки для элемента HTML & CSS || Flash animation CSS
Анимация вспышки для элемента HTML & CSS || Flash animation CSS
Просмотров 146Месяц назад
Анимация вспышки для элемента HTML & CSS || Flash animation CSS
Эффект наложения при наведении на чистом HTML & CSS || Overlay effect on hover using HTML & CSS14:52Эффект наложения при наведении на чистом HTML & CSS || Overlay effect on hover using HTML & CSS
Эффект наложения при наведении на чистом HTML & CSS || Overlay effect on hover using HTML & CSS
Просмотров 169Месяц назад
Эффект наложения при наведении на чистом HTML & CSS || Overlay effect on hover using HTML & CSS
Адаптивный двойной header используя HTML, CSS & JavaScript || Responsive double header using JS23:22Адаптивный двойной header используя HTML, CSS & JavaScript || Responsive double header using JS
Адаптивный двойной header используя HTML, CSS & JavaScript || Responsive double header using JS
Просмотров 233Месяц назад
Адаптивный двойной header используя HTML, CSS & JavaScript || Responsive double header using JS
Кнопка наверх которая отображается при прокрутке страницы вниз HTML, CSS & JavaScript || Scroll Up9:30Кнопка наверх которая отображается при прокрутке страницы вниз HTML, CSS & JavaScript || Scroll Up
Кнопка наверх которая отображается при прокрутке страницы вниз HTML, CSS & JavaScript || Scroll Up
Просмотров 276Месяц назад
Кнопка наверх которая отображается при прокрутке страницы вниз HTML, CSS & JavaScript || Scroll Up
How to create CSS Ribbon using only HTML & CSS10:28How to create CSS Ribbon using only HTML & CSS
How to create CSS Ribbon using only HTML & CSS
Просмотров 163Месяц назад
How to create CSS Ribbon using only HTML & CSS
Свойство animation-duration в CSS || Animation-duration property in CSS || Full CSS course5:34Свойство animation-duration в CSS || Animation-duration property in CSS || Full CSS course
Свойство animation-duration в CSS || Animation-duration property in CSS || Full CSS course
Просмотров 58Месяц назад
Свойство animation-duration в CSS || Animation-duration property in CSS || Full CSS course
Решение проблемы со свойством background-attachment: fixed на мобильных устройствах на чистом CSS10:24Решение проблемы со свойством background-attachment: fixed на мобильных устройствах на чистом CSS
Решение проблемы со свойством background-attachment: fixed на мобильных устройствах на чистом CSS
Просмотров 117Месяц назад
Решение проблемы со свойством background-attachment: fixed на мобильных устройствах на чистом CSS
Как сделать закрепленный лист из тетради на чистом HTML & CSS шаг за шагом || Pinned notebook page6:25Как сделать закрепленный лист из тетради на чистом HTML & CSS шаг за шагом || Pinned notebook page
Как сделать закрепленный лист из тетради на чистом HTML & CSS шаг за шагом || Pinned notebook page
Просмотров 150Месяц назад
Как сделать закрепленный лист из тетради на чистом HTML & CSS шаг за шагом || Pinned notebook page
Свойство animation-name в CSS || Animation-name property in CSS || Full CSS course6:16Свойство animation-name в CSS || Animation-name property in CSS || Full CSS course
Свойство animation-name в CSS || Animation-name property in CSS || Full CSS course
Просмотров 121Месяц назад
Свойство animation-name в CSS || Animation-name property in CSS || Full CSS course
Card with hover effect using only HTML & CSS step by step10:38Card with hover effect using only HTML & CSS step by step
Card with hover effect using only HTML & CSS step by step
Просмотров 1942 месяца назад
Card with hover effect using only HTML & CSS step by step
Правило @keyframes в CSS || CSS Animations || CSS Анимации13:59Правило @keyframes в CSS || CSS Animations || CSS Анимации
Правило @keyframes в CSS || CSS Animations || CSS Анимации
Просмотров 2182 месяца назад
Правило @keyframes в CSS || CSS Animations || CSS Анимации
Тег dialog в HTML || Простой способ создавать модальные и поп-ап окна HTML, CSS & JavaScript20:50Тег dialog в HTML || Простой способ создавать модальные и поп-ап окна HTML, CSS & JavaScript
Тег dialog в HTML || Простой способ создавать модальные и поп-ап окна HTML, CSS & JavaScript
Просмотров 4442 месяца назад
Тег dialog в HTML || Простой способ создавать модальные и поп-ап окна HTML, CSS & JavaScript
Как отправить HTML форму на почту || How to send data from HTML form on email using EmailJS31:59Как отправить HTML форму на почту || How to send data from HTML form on email using EmailJS
Как отправить HTML форму на почту || How to send data from HTML form on email using EmailJS
Просмотров 4742 месяца назад
Как отправить HTML форму на почту || How to send data from HTML form on email using EmailJS
Play/Pause button for video background using HMTL, CSS & JavaScript || jQuery11:53Play/Pause button for video background using HMTL, CSS & JavaScript || jQuery
Play/Pause button for video background using HMTL, CSS & JavaScript || jQuery
Просмотров 1142 месяца назад
Play/Pause button for video background using HMTL, CSS & JavaScript || jQuery
Анимация отскока в CSS || Amimation CSS Effects - Bounce7:08Анимация отскока в CSS || Amimation CSS Effects - Bounce
Анимация отскока в CSS || Amimation CSS Effects - Bounce
Просмотров 1292 месяца назад
Анимация отскока в CSS || Amimation CSS Effects - Bounce

Комментарии

  • @vyac-q1h
    @vyac-q1h 3 часа назад

    почему у меня стоит ошибка 404?

    • @topchiydev
      @topchiydev 3 часа назад

      Приветствую! Скорей всего не верно указали название файла или путь к файлам не верный, проверьте еще раз все, должно работать.

    • @vyac-q1h
      @vyac-q1h 2 часа назад

      @@topchiydev Извините. правда ошибся

    • @topchiydev
      @topchiydev 2 часа назад

      Ничего) Отлично, что ошибка нашлась 👍

  • @Albert_Hall
    @Albert_Hall 9 часов назад

    Чётко 🎉

    • @topchiydev
      @topchiydev 8 часов назад

      Спасибо 👍😀

  • @cestlavie1257
    @cestlavie1257 23 часа назад

    3:27

  • @marpusik1277
    @marpusik1277 23 часа назад

    thanks 🙏

    • @topchiydev
      @topchiydev 23 часа назад

      Пожалуйста 👍

  • @mikhaildolgov
    @mikhaildolgov День назад

    😎👍

  • @AlibekAUBAKIROV-f1w
    @AlibekAUBAKIROV-f1w День назад

    Доброго времени суток! Благодарность!

    • @topchiydev
      @topchiydev День назад

      Приветствую) Пожалуйста 👍

  • @RoniK_DomiK
    @RoniK_DomiK День назад

    Просто лучший бро. Я уже 150 дней страдал от этого а тут бам и ты появился решил посмотреть и вот понял что одно из самых полезных видео! обязательно подпишусь ♥

    • @topchiydev
      @topchiydev День назад

      Рад, что видео оказалось полезным 👍 Спасибо 🙂

  • @marpusik1277
    @marpusik1277 День назад

    thanks 🙏

    • @topchiydev
      @topchiydev День назад

      Пожалуйста 👍

  • @rizemun
    @rizemun День назад

    верно, а еще можно ускорить, написав + между выражениями, t0+b0 превратится в "top: 0; bottom: 0:"

    • @topchiydev
      @topchiydev День назад

      Круто, об этом не знал) Протестирую, спасибо, что подсказали 👍

  • @ОлегГалушко-к8ч
    @ОлегГалушко-к8ч 2 дня назад

    Отличный урок! Огромное спасибо!

    • @topchiydev
      @topchiydev 2 дня назад

      Пожалуйста 👍

  • @AlibekAUBAKIROV-f1w
    @AlibekAUBAKIROV-f1w 2 дня назад

    Супер! Зашло! С первого раза всё сделал!

    • @topchiydev
      @topchiydev 2 дня назад

      Отлично) Рад, что все вышло 👍

  • @mikhaildolgov
    @mikhaildolgov 3 дня назад

    😎👍

  • @verstkalive
    @verstkalive 3 дня назад

    Молодец! Круто объясняешь👍

    • @topchiydev
      @topchiydev 3 дня назад

      Спасибо за обратную связь 👍

  • @navi4046
    @navi4046 3 дня назад

    Я обычно писал просто первые буквы - pa это как position absolute

    • @topchiydev
      @topchiydev 3 дня назад

      Спасибо что поделились 👍 Это еще проще)

  • @MrDenisik
    @MrDenisik 3 дня назад

    Спасибо крутой видос

    • @topchiydev
      @topchiydev 3 дня назад

      Пожалуйста 👍

  • @MrDenisik
    @MrDenisik 3 дня назад

    Спасибо Запиши видос про маски на просторах ютуба его не так много

  • @UilleamUallas
    @UilleamUallas 4 дня назад

    молодец! только вот нахуа?))

  • @girls2599
    @girls2599 5 дней назад

    круто

  • @marpusik1277
    @marpusik1277 5 дней назад

    thanks 🙏

  • @Stepmcs1029
    @Stepmcs1029 5 дней назад

    Здравствуйте а как сделать так чтобы можно было видеть какая будет структура на emmet как у вас. а то у меня только подсказка h1.title>p.subtitle$*3

    • @topchiydev
      @topchiydev 5 дней назад

      Приветствую! Когда пишете код и видите подсказку, в конце подсказки есть надпись “Emmet Abbreviation” кликните на нее и будет видно структуру.

  • @ОлегГалушко-к8ч
    @ОлегГалушко-к8ч 5 дней назад

    👍 👍 👍 👍 👍

  • @БакирИмомов
    @БакирИмомов 5 дней назад

    Интересно, но не все понятно для новичков.

    • @topchiydev
      @topchiydev 5 дней назад

      Приветствую! Согласен, поэтому есть курс CSS на канале. Сейчас как раз разбираем анимацию.

  • @mikhaildolgov
    @mikhaildolgov 5 дней назад

    😎👍

  • @AlibekAUBAKIROV-f1w
    @AlibekAUBAKIROV-f1w 6 дней назад

    Добрый вечер! Благодарю!

    • @topchiydev
      @topchiydev 5 дней назад

      Пожалуйста 👍

  • @Просточеловек-э6ы
    @Просточеловек-э6ы 6 дней назад

    Спасибо, с помощью text-align: center; центрировал ссылки наконец-то

    • @topchiydev
      @topchiydev 6 дней назад

      Пожалуйста 👍

  • @myradmyradow-c1q
    @myradmyradow-c1q 6 дней назад

    no angel, right angle

  • @PspAz-cp4je
    @PspAz-cp4je 6 дней назад

    Спасибо за фишки!

    • @topchiydev
      @topchiydev 6 дней назад

      Пожалуйста 👍

  • @mexvision-3556
    @mexvision-3556 6 дней назад

    SVG: я по вашему шутка какая-то?

  • @chepisat66
    @chepisat66 7 дней назад

    у меня почему-то открывается README а не сам сайт

    • @topchiydev
      @topchiydev 7 дней назад

      Приветствую! Что-то в настройках не правильно выбрали. Вот еще альтернативная возможность загрузить сайт: Как загрузить сайт в интернет используя бесплатный хостинг netlify ruclips.net/video/E47jQsDCnFY/видео.html

  • @brainup0
    @brainup0 7 дней назад

    Приветствую. Работаете с WordPress?

    • @topchiydev
      @topchiydev 7 дней назад

      Приветствую! Нет.

    • @brainup0
      @brainup0 7 дней назад

      @topchiydev жаль.. Может php знаете?

    • @topchiydev
      @topchiydev 7 дней назад

      В основном это front end.

    • @brainup0
      @brainup0 7 дней назад

      @@topchiydev сможете помочь пожалуйста? Как добавить интеграцию Яндекс картдля расширения Геолокация HivePress (Wordpress, HivePress - плагин, Геолокация - расширение для HivePress)? Очень нужно

  • @polischiuk
    @polischiuk 7 дней назад

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

    • @topchiydev
      @topchiydev 7 дней назад

      Приветствую! Честно говоря не пробовал так делать, но думаю, что можно, если разобраться со стилями ресурса.

  • @ISLAND-GTA5RP
    @ISLAND-GTA5RP 7 дней назад

    Очень помогаешь спасибо

    • @topchiydev
      @topchiydev 7 дней назад

      Пожалуйста 👍

  • @rrompo
    @rrompo 7 дней назад

    не забудьте таким образом отправлять персональные данные в открытом виде через буржуйский сервер. а лучше данные карт. так победим!

  • @alexbrutski1210
    @alexbrutski1210 8 дней назад

    Чётко и по делу. Этого я жду от подобных видео. Однозначный лайк. Но как сделать такое без JS?

    • @topchiydev
      @topchiydev 8 дней назад

      Приветствую! Спасибо за обратную связь 👍 Посмотрите это видео: Как сделать кнопку на верх используя HTML & CSS ruclips.net/video/jqTpkuuN9Mg/видео.html

  • @profesor2009
    @profesor2009 8 дней назад

    Меня всегда интересовала как разделить афтер и бефоре. Если надо использовать на одном элемент несколько раз, получается что новый афтер перебивает старый который выше в коде. И по факту их можно использовать только по разу, но как тогда сделать 4 или 5 элементов отдельных?

    • @topchiydev
      @topchiydev 8 дней назад

      Приветствую! Тогда нужно создавать несколько элементов со своими псевдоэлементами и уже их позиционировать для целостной картины.

  • @БакирИмомов
    @БакирИмомов 8 дней назад

    Интересно, спасибо.

    • @topchiydev
      @topchiydev 8 дней назад

      Пожалуйста 👍

  • @AlibekAUBAKIROV-f1w
    @AlibekAUBAKIROV-f1w 8 дней назад

    Добрый вечер! Благодарю!

    • @topchiydev
      @topchiydev 8 дней назад

      Приветствую! Пожалуйста 👍

  • @БакирИмомов
    @БакирИмомов 8 дней назад

    Отлично, круто, спасибо.

    • @topchiydev
      @topchiydev 8 дней назад

      Пожалуйста)

  • @mikhaildolgov
    @mikhaildolgov 8 дней назад

    😎👍

  • @ITPro-ym7cq
    @ITPro-ym7cq 8 дней назад

    Если кто-то не может загрузить файл с сайтом то просто поместите этот файл в папку и у вас все сработает

    • @topchiydev
      @topchiydev 8 дней назад

      Спасибо за обратную связь 👍

  • @profesor2009
    @profesor2009 8 дней назад

    Из за описания шортса смайлик внизу экрана невидно вообще что там с ним происходит

    • @topchiydev
      @topchiydev 8 дней назад

      Приветствую! Спасибо за обратную связь, подправлю 👍

  • @balancemovie3836
    @balancemovie3836 8 дней назад

    смотреть с 2:50

  • @marpusik1277
    @marpusik1277 9 дней назад

    thanks 🙏

    • @topchiydev
      @topchiydev 9 дней назад

      Пожалуйста 👍

  • @daxter5060
    @daxter5060 9 дней назад

    Спасибо за урок, подскажите пожалуйста название темы vscode

    • @topchiydev
      @topchiydev 9 дней назад

      Приветствую! Пожалуйста 👍 Bearded Theme Blueberry Arc если не ошибся)

  • @АяулымЕсенхан
    @АяулымЕсенхан 9 дней назад

    Почему не добавляется background image

    • @topchiydev
      @topchiydev 9 дней назад

      Приветствую! Скорее всего где-то допустили ошибку, проверьте код.

  • @АлинаКлингбайль
    @АлинаКлингбайль 10 дней назад

    На сайте ключ не генерируется😢

    • @topchiydev
      @topchiydev 10 дней назад

      Приветствую! Напишите в службу поддержки сайта, может они помогут.

    • @АлинаКлингбайль
      @АлинаКлингбайль 10 дней назад

      @ Спасибо за ответ! С телефона все получилось, в отличие от компьютера. Однако теперь возникла другая проблема. Про отправке форма идет долгая загрузка в конце которой не удается установить соединение с сайтом/соединение сброшено(

    • @topchiydev
      @topchiydev 10 дней назад

      Возможно какие-то проблемы на самом ресурсе, попробуйте позже снова.

  • @AlibekAUBAKIROV-f1w
    @AlibekAUBAKIROV-f1w 10 дней назад

    Спасибо! Будет, чем сегодня вечером заняться...

    • @topchiydev
      @topchiydev 10 дней назад

      Пожалуйста 👍