CSS фича #2 ➤ Трансформации CSS. Блок с адаптивной версткой

Поділитися
Вставка
  • Опубліковано 17 січ 2025

КОМЕНТАРІ • 125

  • @ДмитрийШухов-п1э
    @ДмитрийШухов-п1э 3 роки тому +1

    реально ты крутой человек! так просто объясняешь, поклон тебе до земли! На разных обучалках в ютубе по этой же теме смотрел, ты лучше всех расказваешь и понятным языком! СПАСИБО за твой труд!)

  • @smriel8274
    @smriel8274 6 років тому +11

    Класс 👍 продолжайте снимать фичи. Они будут очень полезны тем, кто находится в процессе изучения вёрстки.

  • @dkdragon777
    @dkdragon777 6 років тому +26

    Артем, у тебя Талант рассказывать... Спокойно-Четко-Ясно! и темы тоже интересные! так что Ждем-с! )

  • @RadCor
    @RadCor 6 років тому +11

    Крутое поставленная речь. Материал сделан на уровне! Молодец.

  • @alexdreamer11
    @alexdreamer11 3 роки тому

    Здорово! Мне понравился формат уроков про фичи

  • @danilkuksenok8301
    @danilkuksenok8301 6 років тому +2

    Очень классно подносишь материал,приятно смотреть!

  • @serg9836
    @serg9836 6 років тому +36

    Годнота) Даёшь больше таких видосов🙆 лови лойс👍

  • @serhiimuzychuk1912
    @serhiimuzychuk1912 4 роки тому +2

    До наведения эллементы .phone .tablet .desktop не скрываются, а висят снизу в скролле. Для устранения для родительского блока - .section добавляем свойство overflow-y: hidden (Скрывает содержимое, которое выходит за границы блока по оси Y).

  • @СергейФомин-ъ5ж
    @СергейФомин-ъ5ж 4 роки тому

    Крутейшее видео. И большое спасибо за исходник !

  • @Tribunall
    @Tribunall 6 років тому

    Лайк и подписка. Другие видяшки в этом разделе тоже должны быть интересны. Пошел смотреть

  • @KZ-uo8gc
    @KZ-uo8gc 6 років тому

    Классный плейлист! Спасибо Артём за нищтяки)) P.S. Когда на фону тихо играет мелодия - ролик интереснее слушать, не скучно))

  • @bunnybugs6623
    @bunnybugs6623 2 роки тому

    Чётко, как заправка для фантазии! Все понятно интерестно пошёл чаечеу запаривать)))

  • @pavelkush3184
    @pavelkush3184 6 років тому +2

    очень хорошие уроки, спасибо большое. Ждём новые видео)

  • @MicroDobb
    @MicroDobb 6 років тому

    это просто праздник какой-то!)) супер урок

  • @3dzbot
    @3dzbot 6 років тому +3

    Отменное обучающее видео. Может я пропустил но неплохо добавить overflow: hidden; для section. А то немножко вредит странице :)

  • @АнтонАндреевских-л9с

    Я только начал изучать CSS, не мог подвинуть текст как надо, потом зашёл сюда и офигел. Чёртов гуру!

  • @MrMaftoul
    @MrMaftoul 6 років тому

    Огромное спасибо за Ваши уроки!

  • @RUFATIMANLI-bv8xj
    @RUFATIMANLI-bv8xj 6 років тому

    Большое спасибо! Все очень доходчиво и приятно смотреть;)

  • @ИгорьГорбунов-ю9ж
    @ИгорьГорбунов-ю9ж 4 роки тому

    Благодарю Вас за видео.

  • @raloynner9385
    @raloynner9385 6 років тому +2

    Подписка) и лайк как раз люблю разные эффекты делать (в section не хватает overflow: hidden)

  • @RewCSharp
    @RewCSharp Рік тому

    Спасибо за урок!

  • @faronbleed
    @faronbleed 6 років тому

    Просто самый годный контент по CSS

  • @K155
    @K155 6 років тому

    Потрясающие уроки

  • @mrmagistr6958
    @mrmagistr6958 6 років тому

    Крутая задумка для рубрики) Молодец, так держать )

  • @calm_night
    @calm_night 6 років тому +3

    Красивенько. Еще если привязать трансформацию не к :hover, а к скроллу через jQuery, то будет самодельный аналог wow.js :)

  • @myfbone9480
    @myfbone9480 6 років тому

    Круто! Единственное, что стоит добавить, overflow:hidden, чтоб не появлялись полосы прокрутки от того что мы картинки вниз опускаем

  • @ЯгорКабан
    @ЯгорКабан 6 років тому +2

    Интересно смотреть, продолжай

  • @efreetomsk
    @efreetomsk 6 років тому +4

    Класс! Ждем-с фичу намбер 3 ))))

  • @Illia-mm
    @Illia-mm 6 років тому

    Спасибо, все очень легко и понятно, удачи в развитии канала))

  • @seobaron
    @seobaron 6 років тому

    Отлично!!! Продолжайте

  • @kirririnn
    @kirririnn 6 років тому

    неожиданно вылетело твое видео, в предложенных..))вот это встреча..

  • @osintervalproject5636
    @osintervalproject5636 4 роки тому

    с карточками получилось круто

  • @ShevNikita
    @ShevNikita 6 років тому +1

    Топовые видео, продолжайте

  • @muskat9012
    @muskat9012 6 років тому

    Крутое видео! Спасибо! Хоть немного начинаю понять что можно делать с помощью css. На своем, рабочем сайте хочу сделать адаптивный шаблон, но пока знании не хватает

    • @lablala8229
      @lablala8229 6 років тому

      Muska T в гунле скачай

  • @dmitriymovchan6563
    @dmitriymovchan6563 6 років тому +1

    Продолжай так дальше!

  • @TheZUB95
    @TheZUB95 6 років тому

    круто,больше таких роликов!

  • @Эрмек.Султанов
    @Эрмек.Султанов 6 років тому

    Супер. Большое спасибо !

  • @КАбрамян-ш4э
    @КАбрамян-ш4э 6 років тому

    👍 то что надо урок хороший

  • @wswebus922
    @wswebus922 6 років тому +2

    Параллакс ждём все)

  • @sergeyzhavrid7676
    @sergeyzhavrid7676 6 років тому

    Отлично и очень познавательно. Спасибо. Если не сложно, то можно ли начинать ролик с демонстрации готового эффекта, это увеличит аудитории, думаю, что кроме «программеров» подключатся «заказчики».

  • @codebuilderpro2487
    @codebuilderpro2487 6 років тому

    Круто, спасибо!)

  • @Gift1234444
    @Gift1234444 6 років тому

    Артём, спасибо

  • @artemijeka
    @artemijeka 5 років тому

    Спасибо большое!

  • @jamescartman9314
    @jamescartman9314 6 років тому

    Спасибо Темыч.

  • @evtuhovdo
    @evtuhovdo 6 років тому

    годны стиль )

  • @nefsky
    @nefsky 6 років тому

    Артем, подскажи каким редактором ты пользуешься. Или это через какой то онлайн ресурс?

  • @gulomovcreative
    @gulomovcreative 6 років тому +17

    desktop

  • @happylife2345
    @happylife2345 6 років тому

    Здравствуйте! Спасибо за уроки! Скажите пожалуйста, как указать путь картинки если она на рабочем столе?

  • @Kontrbandist
    @Kontrbandist 6 років тому

    Очень классно

  • @ziyodillaj4080
    @ziyodillaj4080 2 роки тому

    Отлично

  • @dimitrikupzov7698
    @dimitrikupzov7698 6 років тому

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

  • @kostasancez2358
    @kostasancez2358 6 років тому

    Артем, спасибо огромное! Запиши Как нибудь про calc

  • @shamistanaliyev5678
    @shamistanaliyev5678 5 років тому

    Супер

  • @tonywhite8092
    @tonywhite8092 6 років тому

    Артем, спасибо тебе за видосы, на следующей неделе иду на собеседование в оутсорс, изучаю верстку 3 месяца сам, уже есть первый заказ.

  • @stroy-art
    @stroy-art 4 роки тому

    браво))

  • @daniillipatkin8650
    @daniillipatkin8650 6 років тому +5

    desctop)

  • @andriikuzmichov4022
    @andriikuzmichov4022 6 років тому

    Просто супер, жду фичу как же сделать толщину этим карточкам

  • @xDiezz
    @xDiezz 6 років тому +1

    какая адаптивная верстка если эффект на ховере

  • @zajac2995
    @zajac2995 6 років тому

    А как добавить прозрачность элементу?Что бы плавно переходил от прозрачного к нормальному виду

  • @pugaloo
    @pugaloo 6 років тому +20

    голова летающая

    • @aman1gg
      @aman1gg 3 роки тому

      ахахахахах

  • @СергейКондулуков-з9ч

    Артём здорово. А зачем медиа запросы. Можно сделать на flex. И ещё в каком редакторе ты работаешь и не мог бы ты скинуть ссылку на предыдущий урок где крутится карточка. И ещё нет ли у тебя уроков по созданию адаптивного дизайна сайта. То есть фактически это будут три разных дизайна.

  • @ВасилийИгоревич-м1р

    Отличной темой станет паралакс.

  • @nestromae
    @nestromae 6 років тому

    это называется потратить время весело, но впустую

  • @kostasancez2358
    @kostasancez2358 6 років тому

    Кстати и гриды я думаю пора пилить)))

  • @AndrewRusinas
    @AndrewRusinas 6 років тому

    А как сделать так, чтобы они выплывали не при наведении на блок, а в тот момент, когда юзер докрутит до этого места?

  • @edwardchesterton2452
    @edwardchesterton2452 6 років тому

    Ещё больше фич!

  • @AlekseyNaumov_734
    @AlekseyNaumov_734 2 роки тому

    IE можно слать в далёкое путешествие, в известном направлении.

  • @dariavozdrahanova6662
    @dariavozdrahanova6662 6 років тому

    Здравствуйте. Спасибо за уроки. А как сделать, чтоб вместо простых прямоугольников было изображение планшета, компа и мобильного, а внутри какой-то сайт?

  • @Vadim-pp6hg
    @Vadim-pp6hg 6 років тому

    background-repeat можно перенести в кусок css-кода с классами .phone, .tablet, .desctop

  • @andreyshepel1213
    @andreyshepel1213 3 роки тому

    Вы говорите что можно таким образом сделать ввод на банковской карте, но ведь ввести данные получится только в тыльную сторону, потому что при hover на лицевой стороне будет переворот, и лицевая сторона видима но недоступна.
    Как исправить?

  • @dzhamiali5321
    @dzhamiali5321 5 років тому

    круто очень

  • @pompei2
    @pompei2 6 років тому

    классно!!!

  • @AlvionDn
    @AlvionDn 6 років тому

    Как сделать анимацию при скролле ?

  • @dhpcode
    @dhpcode Рік тому

    Super

  • @АндрейИшманов
    @АндрейИшманов 6 років тому

    Как называется среда в которой он пишет код?

  • @ЭйсВентура-б8д
    @ЭйсВентура-б8д 5 років тому

    Блин,все хорошо получилось,но эффекта задержки на 0.2,0.4 и 0.6s я так и не получил,видимо гугл хром не поддерживает эту фичу )) Спасибо за твой труд Артем !

  • @ДмитрийГущин-ы2л
    @ДмитрийГущин-ы2л 6 років тому +4

    Артем, можете рассмотреть поэкранный 3d-скролл а-ля "кубик"? Типа как на rdcm.com/. Интересно, как это реализуется.
    И ещё залипательный эффект перехода по ссылкам, типа как у jrabbit.ru в разделе "Наши работы".
    Спасибо большое за Ваши видео)

    • @СергейКондулуков-з9ч
      @СергейКондулуков-з9ч 6 років тому

      залипательный эффект мне не очень нравится, гораздо лучше 3Д вращение. А вот кубик здорово.

    • @ДмитрийГущин-ы2л
      @ДмитрийГущин-ы2л 6 років тому +1

      Там есть нестандартный момент с изменением направления поворота в зависимости от точки входа курсора. Поэтому когда блоков много, несколько рядов минимум, выглядит очень недурственно.
      В любом случае, дизайн - это вкусовщина)

    • @СергейКондулуков-з9ч
      @СергейКондулуков-з9ч 6 років тому

      Согласен полностью.

    • @Victoria-ly2ij
      @Victoria-ly2ij 6 років тому

      Вот что-то похожее с кубиком..ua-cam.com/video/_xuCWTtLmKk/v-deo.html

  • @eltensy8067
    @eltensy8067 6 років тому

    Пасебо, годно

  • @imbydlo1552
    @imbydlo1552 3 роки тому

    А почему при flex исчезают отступы?

  • @ДенисВасильев-й3у
    @ДенисВасильев-й3у 6 років тому

    Codepen ставит префиксы по умолчанию, в настройках CSS можно поменять

  • @ihor_solomko
    @ihor_solomko 6 років тому

    Ааагонь!)))

  • @gowhertangriewa70
    @gowhertangriewa70 2 роки тому

    Как называется редактор?

  • @NirupamDji
    @NirupamDji 6 років тому

    Такой вопрос, а как можно скрыть эти блоки под секцией? Они же занимают пространство под первой секцией, а если продолжить писать страницу эти блоки будут перекрывать контент следующей секции.

    • @calm_night
      @calm_night 6 років тому +1

      Николай Юшин overflow: hidden

  • @ИванИван-ч4ж
    @ИванИван-ч4ж 6 років тому +1

    Может попробуем слайдер, чтоб заместо точек были svg и текст, как элементы перелистывания?

  • @orkligi4396
    @orkligi4396 6 років тому +2

    Найсово

  • @Pennywise-bh9cx
    @Pennywise-bh9cx 6 років тому

    Сделай видео о книгах для веб-разработчиов)

  • @OtryadPanimaniya
    @OtryadPanimaniya 4 роки тому

    Никто:
    Лысый из браузера: Ой я забыл точку поставить)

  • @emilibraimov3853
    @emilibraimov3853 4 роки тому

    появляется скролл когда завёл вниз как решить?

  • @MrSpaaRk
    @MrSpaaRk 6 років тому

    Годно.

  • @ketarrofun1530
    @ketarrofun1530 6 років тому

    Прикольно)))

  • @Dude-iz2dw
    @Dude-iz2dw 6 років тому

    та как сделать на скрол? Без jquery возможно???

    • @Dude-iz2dw
      @Dude-iz2dw 6 років тому

      No_Name поконкретнее, я не пашел как сделать на чистом css3. Пришлось с помощью jquery on scroll добавлять класс animated в котором я прописал translate. Если действительно знаешь как на css то подскажи.

  • @muskat9012
    @muskat9012 6 років тому

    Ребята, кто тут знает где взять коды или где посмотреть выпадающий каталог товаров, как в юлмарте? Автор может Вы сталкивались, или сможете сделать такое видео?

    • @muskat9012
      @muskat9012 6 років тому

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

    • @muskat9012
      @muskat9012 6 років тому

      No_Name ok, я тогда сегодня попробую, отпишусь как и что...

    • @muskat9012
      @muskat9012 6 років тому

      No_Name приветствую) никак не мог найти время для работы над сайтом. Сегодня попробовал. Да, нашел класс .open. Примерно начинаю разбираться в цсс) много классов есть, типа dropdown-menu, b-dropdown._collapsed>.b-dropdown__body что это?))) причем всё это вместе написаны, прям одной стороной)

  • @eltensy8067
    @eltensy8067 6 років тому

    1:44. Во-первых для бати :)

  • @firdavsdadakhanov5087
    @firdavsdadakhanov5087 6 років тому

    Классно вышло. (Uzb)

  • @abc111prod
    @abc111prod Рік тому

    Кла-а-а-а-с-с-с!!!

  • @csstricks6943
    @csstricks6943 6 років тому

    спасибо за урок, но у меня задержка не срабатывает

  • @sneik999
    @sneik999 5 років тому

    подписка и лак от меня

  • @Кочевник-р2е
    @Кочевник-р2е 6 років тому

    Nice

  • @skeelo3157
    @skeelo3157 6 років тому

    Артем помоги. Как подключить javascript файл к php,чтобы он его видел

    • @lablala8229
      @lablala8229 6 років тому

      MEC Production Вроде так

    • @skeelo3157
      @skeelo3157 6 років тому

      я пробую через include подключать файл и тд между не работает

  • @urushadze
    @urushadze 6 років тому

    Сделай 3d карусель изображений. Пж