CSS фича #3 ➤ 3D карточки портфолио на сайт | Transform 3D card portfolio

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

КОМЕНТАРІ • 168

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

    Почему я смотрю этого чувака ? Просто он не строит из себя умника-гуру верстки, не льёт воду, а дает кучу полезной информации за короткое время.

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

    Привет Артём! Прошлый мой комментарий был о том, что я иду на собеседование на аутсорс, так вот, благодоря твоим видео, всего за несколько недель, я поднял скилл с 0 в практике и каких-то теоретических знаниях, до приличнего уровня, там спрашивали и про Gulp, и про SASS & Less препроцессоры,про BOOTSTRAP, про GIT и CMS системы и я разговаривал на одном языке сначала с кадровиком, затем с разработчиком, итогом собеседования стало то, что они мне будут скидывать небольшие заказы на верстку, когда у них будет завал, плюсом для меня послужило то, что когда у меня будет свой заказчик, они помогут мне с дизайнером и BackEnd-щиком. А мне всего 33 года, сколько еще впереди, и я не понимаю людей которые говорят что нет времени, либо у них какие-то обстоятельства, я военнослужащий по контракту, отец 3 детей (мальчиков), вот где поидее не должно быть времени, но я его нахожу.
    СПАСИБО ОГРОМНОЕ ЗА ТУ РАБОТУ КОТОРУЮ ДЕЛАЕШЬ ТЫ и ТВОЯ КОММАНДА!!!
    Можно учиться даже без денег, просто уходит немного больше времени.
    Планирую через год уволится нахрен из армии и занять как минимум позицию джуна по фронту, либо с теми же навыками на фрилансе.

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

      Мое уважение)

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

      С радостью, готов к любым испытаниям и вызовам, моя почта itprogeram@gmail.com

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

      Можно и мне скинуть??Заранее благодарен))) mzxk26@gmail.com

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

      Можешь и мне тоже? Буду благодарен) vladislav2074@gmail.com

    • @Донило-т4ы
      @Донило-т4ы 6 років тому

      mne) denkuz228@gmail.com

  • @user-yd1di2gn9y
    @user-yd1di2gn9y 6 років тому

    Неожиданно для себя нашел этот плейлист, спасибо за приобретенные знания. Жду новых видео.

  • @КоляФемельченко
    @КоляФемельченко 6 років тому +12

    Лайк не глядя!) Если не сложно, то выпускай ролики как можно чаще, от тебя узнал намного больше нового, чем из курсов по ксс)

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

    Уроки огонь, много чего узнал и стал понимать, в последние годы много разных технологий появились

  • @ЮрийПлисковский-щ4щ

    Артём, отлично всё)))
    Это мой любимый плейлист, смотрится очень легко.
    Тем более современные штуки это всегда хорошо))

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

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

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

    Огонь, фичи! Артём, спасибо!

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

    Просто вауууу, даёшь продолжение и зрелищ) Без колебаний лайк👍

  • @dobrydyadka
    @dobrydyadka 6 років тому +42

    Подача материала чем-то похожа на то, как это делал Sorax ) Очень внятно, понятно, доходчиво!
    Продолжай в том же духе! Очень интересно!

    • @ЕгорЖолнин-е1й
      @ЕгорЖолнин-е1й 6 років тому +5

      Sorax не говорит лишних слов. Если из текста этого автора можно выкинуть некоторые слова, не потеряв смысл, то у Sorax'а это будет посложнее сделать

    • @Монарх-т8м
      @Монарх-т8м 6 років тому +2

      Sorax вообще топ, обучился у него CSS И JS

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

      Этот парень расказывает хорошо и понятно без надменности и с уважением к своим ученикам как друг. А соракс сильно напыщенный !! И плохо и быстро тораторил - типо наотъебись сам понял и типо вам смертным не дано.

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

      mrBurlaka1 + Артём хороший оратор и преподаватель)

    • @ОлесяМессер-н9й
      @ОлесяМессер-н9й 6 років тому

      Иван Дворковой, этот канал мне больше по душе. Соракс немного сложновато преподносит, лично мне не совсем всё понятно, но да кому как, та и он не записывал ничего давно, у него там свои проекты, если не ошибаюсь..

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

    Продолжай в том же духе !!! интерстно смотреть твои ролики с каждым выпуском узнаю что то новое)

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

    круто !!! день за днем новые полезные css фичи ) спасибо

  • @ВасилийИгоревич-м1р
    @ВасилийИгоревич-м1р 6 років тому +4

    Да, да очень нравится плейлист!!

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

    очень круто ,спасибо...))ждем еще подобных видео .очень крутые штуки и очень доступно показываешь и обьясняещь

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

    Черт побери, урок ещё лучше предыдущего!!! ))

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

    Очень круто. Спасибо. Покажи нестандартные фишки в css, которые ты использовал в работе.

  • @dbuzeninka8005
    @dbuzeninka8005 6 років тому +8

    смотрю твои фичи каждый день, жду паралакс :3

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

    Очень понравилось) Продолжай)

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

    Годный тутор, подача на уровне👍Интересно посмотреть кто как заюзает эту фишку) На дрибббле в топах много крутых концептов модные слайдеров и переходов (в том числе подвязанных на скролл). В русском сегменте мало инфы по тому как это делать на практике.

  • @Мишаня-х1я
    @Мишаня-х1я 2 роки тому

    Крутая рубрика, Спасибо)

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

    очень классные понятные и интересные видеуроки спасибо и жду новых видеоурлков

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

    Новый ролик :D
    Круто!Спасибо за ролики)

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

    интересный проект. Надо развивать

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

    Огонь! Очень понравилось🔥

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

    Фишка на 12/10, лучший)

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

    Лучший веб дизайнер!!

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

    Как всегда очень круто! Хотелось бы увидеть используемые тобой методы отслеживания скрола , что бы привязать это к анимации

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

    Спасибо большое вам за эту рубрику !
    Очень полезно!!!!

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

    Спасибо супер урок для новичка

  • @omsomol.j2501
    @omsomol.j2501 3 роки тому

    Thanks for useful videos.I dont know russian but i understand your videos.)

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

    Делается это очень просто: (дальше пошла картинка про сову). Но круто, круто. Очень прикольно.

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

    Отличные уроки и фичи! Даёшь анимацию svg!😏

  • @RewCSharp
    @RewCSharp 11 місяців тому

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

  • @alpha-dzhem
    @alpha-dzhem 6 років тому

    Привет, Артём! Спасибо за урок!
    Интересно посмотреть, как ты реализуешь шкалу оценивания чего-либо без js. Я имею в виду, например звёздочки на карточке товара, при наведении меняющие цвет, а при клике фиксирующие его.

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

    Молодец, классные уроки, объясняешь круто, продолжай снимать еще что нибудь интересное

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

    Было бы интересно посмотреть про стилизацию меню. Например перестилизовать стандартное меню bootstrap с различными фишками.

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

    Круто! Молодец! 👍

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

    спасибо, ждем больше)

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

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

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

    Это то что я искал, лайк

  • @flipper-limon
    @flipper-limon 6 років тому

    Огонь. мне понравилось)

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

    Артем, привет! Можно показать урок с карточками как в уроке CSS фича №3, только, чтобы они разворачивались не все сразу
    а по одной. Из положения когда они лежат, при наведении курсора карточка ( 1-на) принимала фронтальное положение.

  • @ХасанМухамметрахимов

    можешь показать 3d slider!)
    твои видосы топ!!!

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

    Ты сказал про титры из звёздных войн. Мне стало интересно как такое можно сделать на HTML CSS JS. Если знаешь как это сделать, сними такой видос, пожалуйста.
    ПС. Спасибо за этот урок))

  • @АндрейЛисецкий-ч1д

    ПУШЕЧНЫЙ КОНТЕНТ!

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

    Спасибо! Как делает анимации? По анимации тоже снимете урок.

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

    Хороший контент!

  • @ВасяПупкин-т2б2п
    @ВасяПупкин-т2б2п 4 роки тому

    Лысый - ты лучший!

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

    Круто. Познавательно.

  • @andpalgol_v_7616
    @andpalgol_v_7616 3 роки тому +1

    Красавчик!!!

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

    А как программа-переводчик называется, окно которой выскакиевает в левом верхнем углу при выделении слова?

  • @Anton-ez3pl
    @Anton-ez3pl 6 років тому

    Вау, просто супер )

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

    Привет, норм тема/)) хотелось бы видосов по работе с svg. Какие-то анимации, ну или прикольные фичи.

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

    Что-то интересное с канвасом можно? видел на сайтах анимации волн например, интересно)

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

    Не плохо было бы объяснить немного как работает perspective и transform-style, а так норм

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

    Ребят... Я в общем новенький в верстке и хотел бы узнать можно ли сделать слайд шоу без js?

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

    Сделайте пожалуйста урок, как можно на чистом js с набора картинок сделать gif. Или имитацию gif

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

    Расскажи про все анимации которые есть на сайтах.
    А потом научи нас их создавать :)

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

      У таких анимаций есть большой минус - они не работают на мобильных устройствах. А сейчас большинство заказчиков требуют 100% адаптивность.

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

      Но parallax работает же, просто нужно отключенное свойство (табов браузера, иначе прыграть будет).

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

    Давай еще JS фичи с использованием JQuery или же без него
    Например, parrallax-эффекты, в частности jparrallax, простенькая карусель фотографий, модальные окна, оригинальные выезжающие меню на сайт и тд
    будет интересно посмотреть, я считаю

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

    Хотелось бы пример секции, у которой borer имеет не прямую линию, а изгибы или облака. Спасибо!

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

    Однозначно подписка

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

    Cпасибо Артём!

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

    У меня вот такой вопрос. У многих свойств, есть стандартные отступы, сверху, снизу. Есть запреты. Несовместимости. Вот хотелось бы сгруппированную информацию найти.

  • @ВладимирБорисовский-к4ю

    Огонь!

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

    Оч круто, спасибо!

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

    крууууууть❤❤❤

  • @Юрий-р7ф
    @Юрий-р7ф 6 років тому

    как на счет анимированной карточки как на этом сайте openai.com ??)) самый трабл заключается в блеске который перемещается в противоположную сторону от поворота карточки.. и верхняя часть карты чуть сдвигается при перемещении курсора.. в общем как не старался, пока каша какая то получается)

  • @freeskins7236
    @freeskins7236 6 років тому +9

    Давай fullscreen slider на нативном JS

  • @СусловРостислав
    @СусловРостислав 3 роки тому

    Глассморфизм 2021🤟🤟🤟 Еще один тренд UI дизайна становится все более популярным🚀🚀🚀🚀🙃🥺

  • @Александр-Беляев
    @Александр-Беляев 6 років тому +5

    CSS и JS фииииичи) Спасибо!

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

    супер,еще еще еще

  • @СамараАлымкулова-ь8е

    Круто 👍, а как сделать так чтоб не все карточки к нам поворачивались а только та на которую мы кликаем? Спасибо

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

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

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

    Очень круто

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

    Что за плагин в браузере по быстрому переводу у тебя, Артем, установлен?
    И доступен ли он для Firefox Quantum?

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

      Плагин называется vimbox

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

      Спасибо огроменное!) И кстати этот плейлист про фичи CSS просто огнище, Артем!

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

    Шикарно)

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

    Крутая фича!

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

    как насчет canvas ? )

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

    Код запустил у тебя, в джаваскрипте не работает трансформ 0, то есть при клике карточки не выезжают, что делать?

  • @ДанилПономаренко-я3о

    Хочу больше CSS фич!!

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

    Привет Артём. Благодарен вам за видео. Очень интересное и познавательное. У меня небольшая проблемка. Код работает, все хорошо, но при наведении карточки исчезают. Можете помочь с этой проблемкой?))

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

    Красавчик!! Интересно, понятно. Спасибо!!
    А что на счет такого интерактива блоков: блок трансформируется в зависимости от скрола страницы. скролишь вниз и блок как-бы раскрывается, скролишь вверх,
    и блок закрывается или меняте свое положение или форму?

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

      Можно реализовать на js

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

    О, Артём, вспомнил когда-то поднимавшийся вопрос, на который не смог найти решения в свое время)
    Как можно расположить на странице элементы(очень много элементов, не менее 50) с разной высотой и шириной таким образом, чтобы нигде не вставлялись лишние отступы, а все элементы выстраивались таким образом, чтобы занимать все свободное пространство как по ширине так и по высоте?

    • @Glo_Academy
      @Glo_Academy  5 років тому +1

      CSS GRID или погугли masonry

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

    может градиенты разберешь? p.s. уроки огонь!

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

    Артём здорово. А в каком редакторе ты работаешь.

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

      На видео не редактор, а сайт codepen.io

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

    СПАСИБО!

  • @БогданШафранський
    @БогданШафранський 6 років тому

    Привет, интересует галерея на чистом CSS

  • @александпустовит
    @александпустовит 5 років тому

    круто спасибо

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

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

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

    Расскажи как сделать backgrond с видео на заднем фоне.

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

      Ну это не фича) Запрос в поисковике "видео на фон сайта" решит все Ваши проблемы)

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

    Хотелось бы какую-нибудь фичу с анимацией svg 🤪

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

    как js сделать что бы заработал? все ост пашет ок, а при клике не хочет поворачиваться
    скорее всего чего-то не хватает в коде

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

    Очень хочется увидеть реализацию glitch-эффекта

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

    Было бы круто, если бы выезжала только одна карточка из перечня при клике.

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

    Так как еще не знаю Jquery вставила ссылку CDN. Но наверное подключить не удалось, и последний момент с Жаваскриптом у меня не удался.( Но спасибо остальное получилось

  • @РоманЧерный-л1к
    @РоманЧерный-л1к 5 років тому

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

  • @ВладимирБорисовский-к4ю

    Как вы смотрите на то, чтобы реализовать такую фичу; заходит человек к нам на сайт, зажимает определенную клавишу, допустим "z" и не отпуская ее вводит секретное слово, к примеру "разработчик", после чего вылазит модальное окно с текстом "Этот сайт разработал Артем Исламов" и контактные данные для связи. Как вам такая идея?

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

      Зачем? Невидимый UX типо?)

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

    Супер !

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

    Не работает JS:(
    Файл подключил, все прописал, потом ещё несколько раз скопировал, а результата 0
    Помогите!)

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

    Анимации на js была бы хорошая тема!