ВЕБ РАЗБОР: APPLE

ну что ребята приветики давно не виделись сегодня я покажу сайт apple и мы посмотрим в проспекта и проспекта крайне полезная вещь для как разработчика так и для дизайнера но первым что она встречается и т. п. это три apple мандалы и они кстати анимированы давайте посмотрим я открываю inspector лучший друг любого разработчика и дизайнеры кстати тоже потому что если вам нужно что-то поменять быстро не заходя в дизайн протестировать гипотезу то лучшее средство для этого это инспектор с помощью мишеньки я нахожу я кстати пользуюсь браузером сафари сейчас потому что чаще всего если что-то не работает это не работает в сафари если я проверяю холод если разрабатываем и проверяю его в сафари то и сотни работает форме скорее всего все будет работать но я буду сразу знать что-то не так тем более после того как к команде я достаточно давно уже посетил джин симмонс лаймана из команды firefox была верной отвечает за продукты для разработчиков после этого чистого супер круто поэтому не стесняйтесь и раньше прям невозможно было этим пользоваться но сейчас очень даже ничего есть вещи которых нету в хроме но его сердце хроме и что то чего нет в сафари к сожалению я нашел нужный мне элемент я хочу найти анимацию и оно написано вот моя анимация классная вещь который сафари которой нет в хроме это вот у значок информация он перекидывает тебя сразу на mdl это очень удобно если нужно посмотреть как пишется свойства как-то ценил поиграться повзаимодействовать ндн это что-то вроде википедии для разработчиков часть есть в русском языке но к сожалению она написана русском языке поэтому это такая голод у штука английский язык н д м но если что то непонятно какие то свойство например вы очень полезная вещь сокращенное описание свойства не выше и он здесь показывает что вот эта вас длительность это у нас временная функции это у нас отсрочка то есть анимация будет проигрываться через одну секунду сколько раз она будет проигрываться два раза его направлении она будет в обратном направлении и и наверное prolink заполненность то есть что будет происходить по окончанию анимации плей стоит здесь на паузе чем можно управлять с помощью джесс и название анимация кстати порядок не так важно как то умеет складывать все эти вещи сам и почему я говорю что это лучший друг любого дизайнера потому что можно прям здесь миграция и имея минимальные навыки владеть этим инструментом можно смотреть от начала ключу вот эту штуку после этого я добавлю например инфинит да инфинит почему при наличии синицы то он заканчивает анимацию я могу добавить еще alternet тогда анимация будет идти и вперед и обратно можно поменять время почему-то его не сохраняет его это наверное все таки вот один из минусов сафари вот такая вещь еще полезная вещь в инспекторе которые можно посмотреть в принципе в коде сайта 70 до рекомендую если вы как-то недавно начали заниматься разработкой да даже недавно любого человека который занимается одна из самых сложных вещей и от не я придумал это наименование класса называть классы думает как ты будешь называть вот продумывать всю свою вот эту вот архитектуру имен это не просто я всегда рекомендую подсматривать на больших сайтах с большим бюджетом на разработку что там целая команда об этом думали и вот они пришли к такому к такой штуки вот например здесь например модуль контент в нем юнит wrapper оболочка какого-то элемента и например не нравится что у них все же связаны с текстом находится в обертке копи и здесь например headline h2 но очень часто можно видеть как когда элементом заголовков между h3 добавляют классы типа h2 это не классно это не совсем понятно вот например headline да

и сам хоть то есть такие понятные семантические названия это читаешь код тебе понятно что это такое не нужно смотреть на круглый год также что крутую здесь можно например проверять текст важная вещь и дизайнерам и разработчикам сложно стоит проверять потому что не всегда бывает влезает фон сайт 56 а если мы поставим в маленьком разрешении например на айфоне там будет мало места и заголовок может раз не влезь поэтому тоже это классно способ тестировать разные заголовки не такая конечно такое. но так или иначе это просто делать можно делать скриншоты этот текст будет сохраняться до обновления страницы то есть поставку 0 вечер он исчезнет кстати прикольная вещь здесь что при обновлении они меняются вот эти вот мандалы ну ладно поехали нас еще страниц мы посмотрим что есть на ней интересно и первое что я вижу эта кнопка прикольная кнопка с фоновым изображением но вместо фонового изображения у нас книжки градиент эта функция которую ты можешь подставить цвета и до их можно также менять допустим хочу немного синего вот это уже становится похожим на то что мне нравится при наведении да он сохраняется здесь интересно да здесь это можно поставить правой кнопкой мыши hover да вот он hover у нас появился бы грант клип текст непрозрачный текст это крутая штука можем сделать из нашего текста маску и опять же если какое-то свойство новое непонятно с ним можно поиграться прям здесь и можно всегда посмотреть описание на md и не и если у вас по умолчанию влазит русские при печати русский язык потому что скорее всего тут будет больше да здесь как минимум есть вот такая в это второй которая мне например сильно помогает разобраться в новом свойстве очень часто бывает так что свойства работают в связке другими свойствами если бы написала просто бы грант клип текст это бы не сработало нужно еще добавить цвет прозрачный здесь такая же история и кажется здесь называется снежинки почему же там они так и называются я так и не понял но так или иначе это не могла и снежинки у них есть анимации вот такие вот анимация кстати очень простая но очень эффектно и в сафари есть вкладка графика где можно посмотреть анимации не совсем правильно не понимаю почему он не показывает правильное значение но можно посмотреть храме тоже самое раз отличие тоже хрома в том что в храме можно посмотреть и фрейма и это очень удобно ну то есть их можно там посмотреть вас есть более удобно реализована вот наши снежинки и вот наша анимация называется тезума она идет 2 ст 2 секунды задержка 25 сотая секунды проигрывается один раз если я хочу посмотреть будет анимацию я доволен интернет и 1 а это количество раз мне ещё нужно добавить бесконечность чтобы она пригласила сюда и в хроме всегда в конце наши keyframe и вот они начинаются со скал один на плагине скейл тоже один что странно и потом у нас скилл 19 то есть вот эту вещь это то же самое что написать задержку и в конце скилл 19 до то есть тут тоже можно экспериментировать уменьшит скейл поиграться со временем если у вас не работает изменения которые вы вносите посмотрите возможно где-то и свойство дублируется и их и переписывают имейте ввиду это тоже что здесь есть еще интересного что может привлечь но дома я очень интересно а кстати скругления оскорбления полоски

их тоже можно посмотреть выбираем нужный нам элемент здесь до борт радиус 20 пикселей есть то есть если вы хотите связать японский дизайн the board родилась 20 пикселей ваше оружие это очень красивой открытке можно скачать в разделе gift вау узнали бы об этом конечно нет кстати вот тоже такая же история с текстом это гарант клип текст прозрачный и по умолчанию h2 вот у нас если у нас нет бэкграунд клип текст то он будет будет заполнять как только мы добавим в гран-при текст он становится становится текстами ну что же хорошо понемножку ну что надеюсь это было полезно и интересно если да вы знаете что делать вообще есть одна штука я не могу не показать потому что это просто какая-то сумасшедшая история показать зацени я бы тут короче охочусь и штор но вам корабли и у нее гигантская сетка белую рыбу это супер круто безумие