Скачать "Unidades do CSS na prática - parte 2 - WDEV"

Обложка аудиозаписи

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

Предыдущее видео: Основы C# - #4 - Полиморфизм и Абстракция Следующее видео: Адаптивная верстка интернет магазина с НУЛЯ. Выполняю реальный заказ. Верстка сайта за $150

Адаптивная верстка интернет магазина с НУЛЯ. Выполняю реальный заказ. Верстка сайта за $150

Адаптивная верстка интернет магазина с НУЛЯ. Выполняю реальный заказ. Верстка сайта за $150

Канал: ДЕН - подорожую та програмую

Основы C# - #4 - Полиморфизм и Абстракция

Основы C# - #4 - Полиморфизм и Абстракция

Канал: loftblog

Как сделать видео фон для текста на CSS и HTML и забыть про градиент #shorts

Как сделать видео фон для текста на CSS и HTML и забыть про градиент #shorts

Канал: OB Web Dev

CRÉER ET PERSONNALISER UN COMPTEUR (calendrier de l'avent : n°22)

CRÉER ET PERSONNALISER UN COMPTEUR (calendrier de l'avent : n°22)

Канал: New School Studio

CSS Grid #7 Управлять порядком элементов внутри grid-контейнера (Grid auto-flow, Dense & Order)

CSS Grid #7 Управлять порядком элементов внутри grid-контейнера (Grid auto-flow, Dense & Order)

Канал: webDev

Основы Ruby on Rails - #5 - Ассоциации. Многие ко многим

Основы Ruby on Rails - #5 - Ассоциации. Многие ко многим

Канал: loftblog

Конспектирование (часть 1)

Конспектирование (часть 1)

Канал: loftblog

Создание карты сайта. Sitemap

Создание карты сайта. Sitemap

Канал: loftblog

CSS3 #13 Отображение элементов и вендорные префиксы (Display vs. Visibility, Vendor Prefixes)

CSS3 #13 Отображение элементов и вендорные префиксы (Display vs. Visibility, Vendor Prefixes)

Канал: webDev

Начальный курс SQL.Объединение множеств строк UNION, UNION ALL

Начальный курс SQL.Объединение множеств строк UNION, UNION ALL

Канал: Igor Vovchenko

css

unidades

percentual

layout

html

pagina

web

front-end

wdev

william

william costa

video

js

margin

width

height

dica

absolute

relative

position

ch

ex

graus

deg

radianos

rad

turn

voltas

animation

hover

transition

div

button

00:00:01

И там

00:00:03

И там

00:00:04

[Музыка]

00:00:12

и скажи, что ты, должно быть, красива, я Виллиан Коста

00:00:15

и приветствую всех на канале

00:00:17

ох, ребята, мы должны на прошлой неделе

00:00:20

Мы видели, как некоторые единицы измерения

00:00:23

CSS работает и как вам он понравился

00:00:25

Я уже решил большую часть этого контента

00:00:27

перенеси часть 2 сюда на канал и далее

00:00:30

Сегодняшнее видео, в котором мы встретимся

00:00:31

тренируйся, как некоторые из них

00:00:33

они работают, но до этого я хочу

00:00:35

приглашаю тех, кто еще не зарегистрировался

00:00:37

подписывайтесь на канал, там снова все

00:00:39

неделю, я уверен, ты не будешь

00:00:41

сожалею об этом, ребятам нравится видео

00:00:44

сегодня продолжение это очень важно

00:00:45

Вы уже смотрели первую часть?

00:00:48

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

00:00:49

Вы еще не смотрели, ссылка здесь

00:00:51

на карточке и в описании тоже и как

00:00:54

В предыдущем видео мы говорили о

00:00:56

Измерение CSS можно использовать для

00:00:59

указать интенсивность или размер

00:01:01

свойства элементов и для видео

00:01:04

сегодня я тоже принесла сюда

00:01:05

базовая структура HTML уже реализована и

00:01:08

также здесь есть некоторые стили CSS для

00:01:11

оставляйте примеры в видео вино подробнее

00:01:13

красиво, но ни один из этих стилей здесь или

00:01:16

эта структура HTML здесь влияет

00:01:18

наши результаты или в

00:01:20

мера, которую мы будем использовать в видео

00:01:22

сегодня как раз для этой цели.

00:01:25

видео, и даже сегодняшнее видео является

00:01:27

продолжение ребята уберите примеры

00:01:29

первое видео, чтобы избежать каких-либо

00:01:30

Путаница со стилями контента

00:01:33

Хотя сегодня так без лишних слов

00:01:35

реализуйте первый модуль, ребята

00:01:38

которые я хочу показать в нашем видео

00:01:40

Сегодняшняя часть 2 нашей - единство

00:01:43

градусы, это верно, ребята, мы можем

00:01:45

установить некоторые свойства CSS

00:01:47

используя степени, которые мы можем

00:01:49

установите от 0 до 360, так что давайте сделаем

00:01:52

Ребята, давайте сейчас поместим это сюда.

00:01:54

здесь горизонтальная линия для разделения

00:01:56

наши примеры, не позволяйте нам обновлять

00:01:58

что браузер, как мы это делали в

00:02:00

видео с прошлой недели и мы выложим

00:02:02

здесь также H2 для определения заголовка

00:02:04

Из нашего первого примера

00:02:06

пример Итак, мы дадим имя

00:02:08

для него шаги Красота будут степенями и

00:02:10

есть среди родственников здесь я положу

00:02:12

d-хорошо внутри CSS, чего у нас нет

00:02:15

пишем градусы, пишем d&g

00:02:17

что указывает на то, что нам нужны степени там

00:02:20

в номере красоты от 0 до 360 позвольте мне

00:02:23

близко, я H2, и вот, ребята, я иду

00:02:25

поставь div и я оставлю один

00:02:27

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

00:02:30

красота и вот оно

00:02:32

построить несколько примеров здесь

00:02:34

используя полученные здесь степени для нас, я буду

00:02:37

сделайте следующее, я поставлю кнопку

00:02:38

здесь мы назовем это кнопкой, я иду

00:02:40

поставить кнопку

00:02:42

кнопку, и вот я собираюсь закрыть нашу кнопку

00:02:46

Вот ребята, я собираюсь это продублировать, да?

00:02:49

здесь три единицы этой кнопки по три

00:02:51

элементы кнопок здесь, и я помещу

00:02:52

в нем разные классы. Хорошо, я

00:02:55

положи сюда btn1, классическая красота

00:02:58

наша вторая кнопка здесь будет кнопкой 2

00:03:03

Привет и класс из нашей третьей кнопки

00:03:05

Позвольте мне скопировать наш класс сюда

00:03:07

третья кнопка здесь будет кнопка 3, красота

00:03:10

Давайте обновим наш пример здесь

00:03:12

браузер, чтобы увидеть, что

00:03:14

наш проект в том, что у меня есть три кнопки

00:03:16

правая кнопка, вторая кнопка и третья кнопка

00:03:19

обновите сейчас, цифры отличные

00:03:21

Теперь мы будем работать с

00:03:23

их стили с использованием степеней здесь

00:03:25

ОК, ребята, итак, пойдем сюда

00:03:27

наши стили здесь, которые

00:03:29

пусто, но я приведу пример здесь

00:03:31

градусов, да, чем в нашем первом примере, верно?

00:03:34

или даже оставить комментарий здесь

00:03:35

называется примером один и здесь, в нашем

00:03:39

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

00:03:41

стиль здесь, внутри нашей Дивы и

00:03:43

сначала, а потом мы подадим заявку

00:03:45

Различные стили внутри кнопок

00:03:47

красота и тут ребята мы определимся

00:03:49

свойство, называемое преобразованием с

00:03:52

Это свойство преображает нас

00:03:53

может вращать наш элемент на

00:03:56

пример использования скрипта здесь, тогда

00:03:58

это вращение, и здесь мы можем

00:04:01

пройти, сколько градусов и вращательное

00:04:04

В элементах я размещу это здесь

00:04:06

Я хочу повернуть его на 25 градусов, поэтому 25

00:04:09

черт возьми, как мы уже здесь научились

00:04:11

ниже мы будем использовать это имя

00:04:14

здесь для определения степеней, верно?

00:04:16

давайте обновим здесь, посмотрим, что

00:04:17

Ребята, давайте сюда посмотрим, он уже на дыбы встал.

00:04:20

Вот наш пример, вот он уже есть

00:04:22

поднялся здесь над градусами там тогда

00:04:24

давайте сделаем следующее, давайте поместим

00:04:25

здесь верхнее поле, здесь я поставлю одно

00:04:28

верхнее поле около 20 пикселей, посмотрим,

00:04:30

он скоро приедет сюда

00:04:32

Это еще в 40, в 40 было круто

00:04:35

Ребята, так вот, посмотрите здесь 40 пикселей

00:04:37

это уже выглядит так, если я это поставлю

00:04:39

отрицательный, он инвертируется, верно?

00:04:41

поверните в другую сторону, затем минус 25

00:04:43

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

00:04:45

здесь и сейчас, ребята, чего я хочу

00:04:47

сделать, это также повернуть наш

00:04:49

кнопки здесь в разных положениях

00:04:51

когда я навожу на них курсор и

00:04:54

Ребята, давайте сделаем следующее

00:04:55

давайте приведем здесь пример градусов

00:04:57

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

00:05:00

Я поставил кнопки классов 1, 2 и 3, которые мне нужны.

00:05:03

сначала поставь переход, окей тогда

00:05:05

Я собираюсь разместить здесь переход

00:05:08

0,5 это, затем 0,5 секунды и вот

00:05:13

Ребята, я собираюсь поставить следующее

00:05:14

выложи это сюда для всех

00:05:16

свойства, но я мог бы пройти

00:05:17

просто трансформируй это сюда, ок, я положу

00:05:20

здесь просто чтобы было проще

00:05:21

Нам нужно построить здесь еще один объект недвижимости

00:05:24

Здесь, красота, этот переход, этот

00:05:27

Нет, он не используется, мы не можем

00:05:28

определите это с помощью градусов, ладно, это только для нас

00:05:30

имеют другой эффект здесь, в нашем

00:05:32

пример: потому что степени, которые мы имеем

00:05:34

используется внутри снова повернуть Красота

00:05:36

поэтому я приведу здесь пример градусов

00:05:38

сейчас поставлю btn1, окей, поставлю

00:05:42

поместите сюда наше мощное преобразование

00:05:45

и эта ротация здесь, ребята, она пошла

00:05:48

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

00:05:51

Я оставлю это прямо, я поставлю 25 градусов

00:05:53

вот красота я ставлю 25° так по идее

00:05:56

Ребята, если я наведу сюда мышку, так и произойдет.

00:05:58

прямо моя кнопка здесь

00:06:00

правда не поймет это правильно, верно?

00:06:02

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

00:06:04

Оставайся на месте, посмотрим, как пойдет

00:06:05

оставайся красивой, молчи здесь, но

00:06:08

Я хочу этого, когда мне плохо, да?

00:06:10

Я сказал, что хочу этого только в этот момент

00:06:12

поэтому поставлю: Ровер здесь, в нашем

00:06:14

Класс красоты, так что теперь он вернется

00:06:17

быть склонным, но в данный момент

00:06:18

Я навожу мышку, куда он попадет

00:06:21

Ребята, красотки, я здесь еще раз обновлю

00:06:23

оставайся под наклоном, только когда я пройду мимо мыши

00:06:25

для нас это уже идеально, посмотри

00:06:27

круто, как я вставил в него переход

00:06:30

влияет ли это на наклон

00:06:32

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

00:06:34

он также возвращается, вращаясь, как

00:06:37

анимация здесь, в нашем CSS здесь

00:06:40

на канале, о котором мы уже говорили

00:06:41

анимация и переходы — вот контент

00:06:44

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

00:06:46

Если вы хотите узнать об этом больше, ссылка

00:06:48

здесь на карточке в описании также

00:06:51

Ребята, наша вторая кнопка вот и мы

00:06:53

мы не будем его вращать, мы будем

00:06:54

используйте здесь другое свойство, которое

00:06:56

будет фоновым свойством, которое

00:06:58

мы применим цвет здесь

00:07:00

конкретно в этой нашей кнопке

00:07:02

используя стандарт hsl, который мы

00:07:05

можно определить с помощью степеней еще и потому, что

00:07:07

это цветной круг, верно?

00:07:10

все цвета в этом круге от 0 до 360

00:07:13

Итак, у нас есть все стандарты

00:07:15

цвета, и мы также можем определить

00:07:17

интенсивность насыщения, а также

00:07:20

Свет на этих людей ставлю без процентов

00:07:23

свет у нас есть белый цвет, если мы

00:07:24

удали их, у нас есть черный цвет.

00:07:26

таким образом мы можем

00:07:28

настроить цвет света и насыщенность, да?

00:07:31

вы приблизитесь к тому же цвету

00:07:34

общая интенсивность цвета или масштаб

00:07:36

серый, и у нас также есть

00:07:39

градусы определили там какой цвет этого

00:07:41

здесь появится круг для

00:07:43

Так что здесь, ребята?

00:07:45

В нашем примере я скопирую

00:07:47

этот пример номер один здесь и я буду

00:07:49

поменяй здесь на btn2 Rover, я вытащу его и

00:07:52

преобразись здесь, что мы не такие

00:07:54

используйте его, и мы сделаем

00:07:55

Следующим я наклею фоновый клей

00:07:58

и я определю hsl, который является нашим

00:08:01

здесь сначала я определяю, сколько

00:08:03

градусы, которые я хочу от этого цветового круга

00:08:05

поэтому я положу это сюда, и это 100 градусов

00:08:08

Хорошо, тогда я могу определить, сколько

00:08:11

насыщенность, я хочу, я хочу сто

00:08:12

процент насыщения позже определяю

00:08:15

вот сколько света я хочу, если поставлю его

00:08:17

пятьдесят процентов я хочу чистый цвет

00:08:20

Белые больше даже не тянут его, верно?

00:08:23

слишком много света или более черная ручка

00:08:25

меньше света, тогда я точно

00:08:26

в цвете, который есть в моем кругу

00:08:29

круто, давайте обновим здесь, чтобы посмотреть, что

00:08:31

что он делает, ребята, я обновил

00:08:33

Я прошел здесь, когда он впервые наклонился

00:08:35

чтобы мы тебя победили, я сюда не приходил

00:08:37

вот во второй он поменял цвет Смотри

00:08:39

Как круто, вот оно

00:08:41

прошел через этот цветовой круг и

00:08:44

добрался до этого цвета здесь из 100 здесь из

00:08:48

100 градусов, да, если я поставлю сюда 200 градусов

00:08:50

Ребята, посмотрите сюда, оно выглядит по-другому

00:08:53

здесь для нас, позволь мне сделать то, что

00:08:54

следующие ребята, я возьму

00:08:56

наш Ровер, я уйду прямо сейчас

00:08:58

потому что я хочу привести здесь пример

00:09:00

с помощью второй кнопки здесь

00:09:02

свойства браузера, которые мы можем увидеть

00:09:04

эти градусы движутся внутри

00:09:06

этих цветов, поэтому я иду

00:09:08

щелкните правой кнопкой мыши здесь и

00:09:09

проверьте элемент нашей второй кнопки и

00:09:11

вот наш hsl, ребята

00:09:14

Я собираюсь сделать здесь следующее, я собираюсь

00:09:16

нажмите на эти степени здесь, и я

00:09:18

перемещая их внутри этого нашего

00:09:21

недвижимость, поэтому я поднимусь по ней и

00:09:24

Цвет нашей кнопки меняется Посмотрите там

00:09:25

Как здорово будет достичь 360, правда?

00:09:29

чтобы достичь 360, он пошел с 360, но

00:09:32

Это признак того, что он следует за нашим кругом

00:09:34

да, оно выходит за пределы 360, но это типа

00:09:36

если он вернулся к нулю, тогда пойдем

00:09:39

поставь здесь ноль и мы поднимемся вверх

00:09:41

снова нуля и здесь нуля, затем

00:09:44

мы можем пройти весь круг

00:09:46

цвета по всему цветовому кругу

00:09:48

используя там свойство CSS

00:09:52

используя цвет hsl, красотки, ребята, так

00:09:55

вот наш пример номер два

00:09:56

а в нашем примере №3 там и

00:09:58

эти два парня вместе здесь, так что

00:10:00

Мы собираемся сделать следующее, позвольте мне

00:10:02

закрыть здесь, я уже хочу сюда вернуться

00:10:04

мой Ровер здесь, внутри этого BTN 2 и

00:10:06

вот нашу кнопку 3 сюда скопирую и

00:10:09

вставьте сюда кнопку 3, я пройду обе

00:10:12

недвижимость здесь для него, он останется

00:10:14

с новым цветом, а также с позицией

00:10:17

новенький здесь, красотка, просто позиция

00:10:19

вместо 25 будет минус 25 и

00:10:22

наш цвет здесь будет нашим цветом 50

00:10:26

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

00:10:28

видишь, наши кнопки вернулись

00:10:30

стандартные цвета, этот возвращается

00:10:32

активировать этот другой, меняет цвет и этот

00:10:35

другой вращается в обмен на тот цвет, в котором он остался

00:10:37

гораздо более склонен теперь влево

00:10:39

мы просто меняем здесь минус 25

00:10:42

вот ставим, например, еще 50

00:10:44

Quina 50 уверен, что он наклонится

00:10:47

на другую сторону, так что давайте обновим

00:10:49

вот и он наклонился сюда к другому

00:10:51

сторону и изменил цвет для нас

00:10:53

таким образом мы уже использовали его

00:10:55

степени в двух разных свойствах

00:10:57

и мы также видели поведение CSS

00:11:00

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

00:11:03

также с цветным фоном, ребята, один

00:11:05

еще одна единица измерения, которую мы

00:11:07

также может быть использован внутри

00:11:08

поверните, вот радианы, да?

00:11:11

мы определили это как градусы в первом

00:11:13

пример сейчас во втором мы можем

00:11:15

примени сюда радианы, красота

00:11:17

давайте скопируем наш пример

00:11:19

номер один здесь я не буду копировать сюда и буду

00:11:22

определите здесь пример номер 2, который

00:11:24

это будут радианы и наши радианы

00:11:27

Здесь мы определяем, что такое радиокрасота

00:11:29

риад здесь будет примером радианов

00:11:32

красота и наш пример вот ребята я иду

00:11:35

приведи пример только потому, что так будет

00:11:36

очень похоже на первый

00:11:38

Так что я просто поставлю первый

00:11:39

кнопка здесь, круто, и мы сделаем это

00:11:41

С самого начала эта реализация

00:11:44

ротация здесь, да?

00:11:46

вращайте здесь в радианах

00:11:48

Приятное обновление вот и наше появилось

00:11:51

пример номера два здесь Включая

00:11:53

Панель, которая была здесь под кнопкой

00:11:55

позвольте мне привести вам пример номер один

00:11:57

вот и запас помады тоже здесь нет

00:12:01

Мне так много нужно здесь, но я положу это

00:12:02

кнопка поля здесь размером 20 пикселей я буду

00:12:05

Положи сюда, посмотрим, готово ли?

00:12:07

Круто, правда? Это уже дальше отсюда, чем?

00:12:09

пример и здесь я скопирую это

00:12:11

первый малыш здесь, да, он наш

00:12:13

пример номера один здесь, который остался здесь

00:12:15

выше мы перейдем к примеру

00:12:17

номер два, и я заменю его на пример

00:12:20

красота радианы вместо градусов

00:12:23

здесь я буду использовать радианы и радиан

00:12:25

он более или менее эквивалентен 57,3°.

00:12:29

поэтому мы можем определить его как - 1 рад

00:12:32

что это будет меньше

00:12:35

57. 3-й склон там, красотка, вот и я

00:12:39

оставьте поля здесь такими, какие они есть

00:12:40

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

00:12:42

что будет, я обновил, посмотри

00:12:44

вот ребята, он уже наклонился сюда в сторону

00:12:46

люди склонялись к этому гораздо больше, чем это

00:12:48

наш пример сверху здесь, среди этих людей

00:12:51

поставьте здесь, например, 0,5, это делает

00:12:53

половина этого, так? Так он собирается наклонить?

00:12:55

половину этого, а также мы добавили

00:12:57

удваивается в радианах, оно также удваивается

00:13:00

эта наша склонность Красота у нас уже есть

00:13:04

вот наш радиан здесь наклонен и

00:13:06

Вы также можете применить нашу кнопку, верно?

00:13:08

Итак, я собираюсь привести здесь пример

00:13:10

наша кнопка, которую я применю

00:13:11

прямо здесь на кнопке здесь наш

00:13:14

вращение, мы можем поместить сюда

00:13:17

вращение, как, например, это будет

00:13:19

держись прямо, чтобы мы все еще могли это принять

00:13:22

прямо на нашу кнопку, да?

00:13:24

поставь цвет фона вот

00:13:26

цвет фона здесь, поехали

00:13:28

поставь сюда красный цвет фона

00:13:31

Посмотрим, как пойдет, смотри здесь

00:13:32

Ребят, фон повёрнут, да?

00:13:35

наклонена туда на минус 1 радиан и

00:13:38

наша кнопка тоже наклонена

00:13:40

вращается на одно излучающее, затем кнопку

00:13:42

компенсирует это вращение здесь и

00:13:45

наш фон он выглядит какой классный фон

00:13:47

Там вот так и с наклоном к этому

00:13:50

мы красивые, поэтому мы

00:13:52

Вы также можете вращать наши предметы

00:13:53

затем наши элементы в радианах

00:13:56

наш третий пример, и в нем уже есть

00:13:59

очень крутая единица измерения вот это

00:14:01

широко используется в анимации

00:14:03

переходы там, что единица

00:14:05

Правильно, мы можем определить

00:14:08

количество витков, которое наш

00:14:10

элемент выдаст тогда, если он имеет

00:14:12

вращаясь, я могу передать это нам и

00:14:13

Сожалею, что ему предстоит три круга

00:14:15

наведение мыши например, а не

00:14:17

еда на самом деле будет вращаться три

00:14:19

времена, когда я навожу туда мышку

00:14:21

и это единство есть единство, которое делает

00:14:24

Мы собираемся обойти наш элемент E.

00:14:26

Для этого, ребята, я собираюсь скопировать наш

00:14:28

пример номер два здесь и я приведу

00:14:30

поместите наш пример номер 3

00:14:31

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

00:14:34

пример поворота красоты поворачивается здесь

00:14:37

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

00:14:40

кнопка здесь, одна здесь, чтобы мы могли сделать

00:14:42

наши круги здесь, и я думаю, так и будет

00:14:45

Было бы здорово, если бы мы сделали больше одного

00:14:46

пример Итак, я скопирую эти кнопки

00:14:48

здесь, и мы собираемся сделать три

00:14:50

примеры там с использованием количества

00:14:52

разные повороты для каждого из них

00:14:54

Хорошо, я обновлю это здесь, чтобы мы могли увидеть

00:14:56

вот у нас на очереди цифра 3 и

00:14:59

мы собираемся проехать эти круги

00:15:01

случись сейчас красота так за это

00:15:03

Ребята, давайте создадим здесь наш пример

00:15:05

номер три здесь в бьюти-стилях

00:15:08

пример получается и вот я его обмениваю на

00:15:11

пример 3, ведь трансформации здесь нет?

00:15:14

произойдет в нашем примере

00:15:17

даже из нашего div, да, так что я

00:15:19

удали это отсюда и что будем делать?

00:15:21

сделайте следующее, ребята, здесь

00:15:23

мы собираемся разместить нашу кнопку, верно?

00:15:26

наша кнопка напрямую без классов

00:15:28

потому что, если я хочу вращаться с помощью

00:15:30

переход я вложу все

00:15:31

сначала застегивает этот переход, затем

00:15:33

для этого я расскажу здесь о переходе

00:15:35

10,5 вправо, так что здесь он будет делать в

00:15:38

0.5 это переход вращения для нас

00:15:41

правильно И здесь ниже, ребята, я собираюсь определить

00:15:44

каждая кнопка о том, как каждая кнопка будет

00:15:47

вести себя Итак, я приведу пример

00:15:48

круги

00:15:50

точку btn1, и здесь я помещаю

00:15:53

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

00:15:55

Поэтому я поставлю

00:15:57

трансформация: мощная, и вот я иду

00:16:00

установка этой первой кнопки будет

00:16:02

повернуть один раз. Тогда это будет

00:16:04

Красота костюм теперь цифровая кнопка

00:16:07

два мы поместим его

00:16:08

Повернись дважды, и тебя станет двое.

00:16:11

у Красоты теперь наша кнопка номер 3

00:16:14

он расскажет три раза так три

00:16:17

повернуть, так что я готов

00:16:19

сколько кругов я хочу проехать

00:16:21

элемент внутри здесь он будет вращаться

00:16:23

прямо в Итак, когда я

00:16:25

обновите, тогда он будет вращаться

00:16:27

так что я могу навести на него курсор и разместить здесь

00:16:29

наш Ровер Красавица, затем наш Ровер

00:16:32

здесь этот элемент будет повернут

00:16:34

обновлю пока ничего не изменилось

00:16:36

но когда я навожу курсор мыши, мы

00:16:38

тренировка превратилась однажды, наш плач

00:16:41

перевернутый дважды акт об отношениях или

00:16:43

три раза здесь, как наша анимация о

00:16:45

Здесь очень быстро на этих кругах

00:16:47

Они также происходят так быстро, что вы можете

00:16:49

мы меняем, это то, что у одного есть два

00:16:51

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

00:16:53

право сделать эту анимацию в этом

00:16:55

переход завершен, поэтому я обновлю

00:16:56

вот наш первый здесь получился хорошо

00:16:59

медленно наш второй здесь исполняется один

00:17:01

немного быстрее, потому что он ой

00:17:03

потому что ему придется сделать это дважды здесь

00:17:05

да, я возьму Мауса сюда, если оставлю Мауса

00:17:07

он возвращается к этому вращательному движению и

00:17:10

вот у меня есть наш третий пункт, который

00:17:11

он вращается внутри этого три раза

00:17:14

наш переход, верно, если я вернусь к

00:17:16

во-вторых, здесь мы останемся подольше

00:17:17

классная наша анимация, которая идет быстро

00:17:20

и он не остается и не запускается

00:17:22

эти новые элементы здесь и здесь

00:17:24

нам удалось создать там переход

00:17:26

довольно круто, да, эффект наведения мыши,

00:17:28

круто, и вы можете использовать его в нескольких

00:17:30

элементы вашего проекта, а также

00:17:32

Открытый каминг-аут – это своего рода голосование, верно?

00:17:34

Ребята, выходящие из трансформаций

00:17:36

элементы, которые мы сейчас увидим два

00:17:38

единицы, а не две единицы, которые мы

00:17:40

использует размер шрифта в качестве основы для

00:17:43

умножение такого размера таких людей

00:17:46

юнит в видео на прошлой неделе

00:17:48

Мы также видели две единицы, которые

00:17:50

основан на единицах

00:17:52

ммм нэт и в сегодняшнем видео мы будем

00:17:55

см. еще два, но вместо

00:17:57

используйте там реальный размер шрифта

00:17:59

они используют символы, специфичные для шрифта

00:18:03

чтобы рассчитать этот размер первым

00:18:05

из них наш пример номер 4 он

00:18:08

будет использовать нулевую ширину символов

00:18:10

поэтому ширина нуля будет

00:18:13

размер он рассчитает и для

00:18:15

наш элемент, но давайте посмотрим, здесь ли

00:18:17

тренируйтесь, ребята, потому что я думаю, что должно быть

00:18:18

там немного запутался

00:18:20

понял, поэтому скопировал пример оттуда

00:18:22

номер 4 мы сейчас определим

00:18:24

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

00:18:29

быть единицей, которая использует ширину

00:18:32

нулевой символ Красота, затем ширина

00:18:35

здесь ноль, например, если он у меня есть

00:18:37

текст здесь даже позволяет вам привести пример

00:18:39

Здесь мы сделаем следующий пример

00:18:42

правильный пример, ребята, я собираюсь создать здесь

00:18:45

несколько абзацев, чтобы мы могли составить

00:18:47

например, если у меня есть

00:18:49

абзац, который всего за 10. Итак, это

00:18:52

здесь это будет размер

00:18:53

нулевой символ. Тогда это будет ch, если

00:18:56

Я положил это сюда, например

00:18:59

55 предметов здесь 50 добыча из этой шахты

00:19:02

абзац имеет размер 5 каналов

00:19:05

так что таким образом вы можете определить

00:19:07

тогда более-менее размер

00:19:09

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

00:19:11

вашего пространства внутри вашей стихии и

00:19:13

Можете ли вы получить больший размер?

00:19:15

правильно для этого элемента, верно?

00:19:17

давайте сделаем следующих ребят, которых я собираюсь создать

00:19:19

здесь несколько абзацев, каждый с

00:19:20

количество разных нулей Красота

00:19:22

итак, сначала будет 10, вторые два

00:19:25

нули третий здесь поставит четыре

00:19:27

нули четвертые здесь поставим 80

00:19:30

Хорошо, здесь у нас есть 0 2 4 и 8, верно?

00:19:36

сюда тоже поставьте шесть, ребята, кто собирается

00:19:37

Нам лучше визуализировать.

00:19:39

давайте обновим проект здесь просто ради

00:19:41

давайте посмотрим, что здесь произошло

00:19:43

Ребята, наши нули уже появились

00:19:45

вот, правильно, вот эти наши элементы

00:19:47

здесь они уже определены для проекта

00:19:51

но теперь, ребята, чего я хочу

00:19:52

хочу ли я свой размер

00:19:54

абзац — 16 символов в каждом

00:19:57

пример имеет пробел из 16 символов

00:19:59

представить данные здесь для нас

00:20:01

но я не могу определить 16

00:20:04

символы там с пикселями, потому что я

00:20:06

Мне нужно определить там значение этого размера

00:20:09

с моего поля, да, и у меня нет возможности

00:20:11

посчитать размер шрифта, да?

00:20:13

не используй ch, так что мне делать

00:20:15

хочу ли я определить это мое

00:20:17

абзац будет 16-канальным, что соответствует размеру

00:20:20

тогда здесь 16 нулевых символов

00:20:23

давайте сделаем следующее здесь

00:20:24

наши примеры Давайте поместим это здесь Жоао

00:20:26

прокомментируйте пример четвертый, мы будем

00:20:29

положить. Пример CH и наш параграф

00:20:33

что в нашем абзаце

00:20:35

мы настроим его Wi-Fi на 16-канальный

00:20:39

Я хочу 16 персонажей Эроса, вот я

00:20:42

тогда я еще рамку добавлю

00:20:44

граница 1px Сплошная, я задам цвет

00:20:47

вот ты и красотка серая и поехали

00:20:51

обновимся и посмотрим, что он создал

00:20:52

Ребята, посмотрите, каких крутых ребят Он создал

00:20:54

вот самый большой абзац для нас здесь

00:20:56

и он сказал, что это занимает 16, она здесь, что

00:20:59

абзац может содержать 16 символов

00:21:01

нули здесь, в Итак, если мы

00:21:04

выберите здесь этот 0c, просто перетащите сюда

00:21:06

чтобы мы могли увидеть, насколько он велик на самом деле

00:21:08

подходит Посмотрите, как круто, ребята, если я

00:21:10

сделайте следующее, позвольте мне скопировать это сюда

00:21:12

это наш последний Эрос, я иду

00:21:14

дважды, я поставлю сюда 16 лет

00:21:16

Посмотрим, что здесь будет

00:21:18

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

00:21:20

размер сбоку - это не сотовый телефон

00:21:22

гуру здесь, но он подходит всем

00:21:24

наши нули здесь и самое интересное в этом

00:21:27

это увеличение шрифта на этот размер

00:21:29

от ch до нулевого символа идет

00:21:30

тоже увеличивается, поэтому поместите это сюда

00:21:32

некоторые выходят с CD 20 пикселей, например наш

00:21:34

размер здесь тоже увеличился Посмотрите что

00:21:36

круто поставить сюда 40 пикселей посмотри

00:21:39

круто, что наш пример был, ребята

00:21:41

здесь всегда поместится 16 символов

00:21:43

почему? Потому что я определил, что это

00:21:45

размер 16 ч, завтра это не имеет значения

00:21:48

шрифт всегда подойдет и три символа

00:21:51

здесь нули EA Другая наша единица

00:21:53

здесь это также работает с размером

00:21:55

конкретного символа единица измерения и x

00:21:58

это работает с размером символов

00:22:00

Только X теперь это высота персонажа

00:22:03

Это не ширина, верно? Как это работает?

00:22:05

с нулевой шириной Но это не так

00:22:07

ширина прописной буквы

00:22:09

крошечный, да, так что теперь у нас есть

00:22:12

нулевая ширина символов для работы

00:22:14

с боковыми размерами и имеем

00:22:16

высота символа X для работы

00:22:19

у нас размер отображается вертикально

00:22:21

высота элементов Итак, давайте создадим

00:22:23

наш пример номер 5 вот красота

00:22:25

Я собираюсь скопировать этот пример четыре сюда и

00:22:27

Я создам пятый пример, в котором модуль

00:22:29

и красота XIX и здесь мы воспользуемся

00:22:32

высота персонажа

00:22:35

О

00:22:36

х красота и это с маленькой буквы х я напишу

00:22:39

вот здесь, крошечный, крошечный, хорошо, тогда

00:22:41

здесь у нас есть этот парень, который

00:22:43

наше подразделение, теперь мы идем

00:22:45

поработайте с ней в нашем примере

00:22:47

Итак, что мы собираемся сделать, ребята, это

00:22:49

очень часто можно увидеть на некоторых сайтах

00:22:50

когда они представляют там значения в

00:22:53

продукты там для покупки в змейке, если

00:22:54

например, знак доллара R — это наша

00:22:58

наш настоящий отряд там

00:23:00

В начале там меньше, чем значение

00:23:02

там оно целое, там из нашей стихии оно остаётся

00:23:06

очень большой, и центы, которые он держит

00:23:08

меньшие тоже и находятся в верхней части

00:23:10

линия, да, вот так она становится меньше

00:23:12

на очереди, давайте попробуем сделать

00:23:14

этот пример здесь с использованием этого

00:23:17

собственность в этой квартире здесь и x, затем

00:23:19

Для этого, ребята, мы собираемся сделать то, что

00:23:20

следующее здесь в нашем примере x

00:23:22

Я собираюсь рассылать здесь спам, это может быть

00:23:25

div, верно? Это может быть другой элемент, который

00:23:27

вы хотите создать, это просто пример

00:23:28

сегодня красота, мы здесь не говорим

00:23:30

насчет семантики, да, итак поехали

00:23:32

создайте класс по этому вопросу здесь, и я

00:23:33

установлен на реальный, и это знак доллара R

00:23:37

для нас красота вот я это положу

00:23:40

закрытие нашего пролета сразу после

00:23:43

Поэтому я поставлю значение пароля

00:23:44

вот, да, а потом я добавлю еще один?

00:23:47

шлепать, это будет наш шлепок, который будет

00:23:50

прибереги копейки, поэтому я положу

00:23:52

класс сентаво, и я помещу его сюда

00:23:54

например, 99 красота вот у меня вот это

00:23:59

без реальных 99 центов это не для нашего

00:24:01

пример здесь, давайте поместим его сюда, ребята

00:24:04

79/99 не должен быть примером в

00:24:07

более сломанный, и мы посмотрим, как это будет

00:24:09

это значение будет отображаться здесь

00:24:11

в рамках нашего проекта я буду обновлять

00:24:12

вот тогда он создал здесь и там был

00:24:15

наш знак доллара R 79 и наш 99 здесь

00:24:19

Хорошо, позвольте мне просто предпринять эти шаги

00:24:22

Что здесь между этими элементами?

00:24:23

Ребят, вот и собираюсь довести до того же

00:24:25

линия, чтобы лучше выглядеть между буквой R

00:24:27

знак доллара и число имеет место, но здесь

00:24:29

среди центов, нет, поехали

00:24:31

обнови, теперь выглядит мило

00:24:33

Здесь есть это число, но оно много

00:24:34

маленький

00:24:35

и нужно лечить эти элементы там

00:24:38

для этого они будут меньше E

00:24:40

также 99 появится на нашей линии

00:24:42

Итак, что мы собираемся делать дальше?

00:24:44

Ребята, выше в наших примерах

00:24:46

хорошо, мы собираемся создать наш пример

00:24:47

номер 5 пример 5 и начнем

00:24:50

положить. Пример

00:24:53

пример и XIX в и здесь в

00:24:56

у нас здесь будет настоящая, настоящая, настоящая точка зрения

00:24:58

это наш класс и здесь, ребята

00:25:01

мы отметим следующий момент

00:25:02

реальным будет размер шрифта, это его размер

00:25:05

Это будет Х, да, бывший, что это значит?

00:25:10

там мой размер

00:25:12

курица будет такого же размера, как и

00:25:13

строчная буква X, затем ваш

00:25:16

обновите здесь, у меня уже есть знак доллара R

00:25:18

малыш здесь, ребята, посмотрите, как круто, правда?

00:25:21

здесь только наш полный номер

00:25:23

остается больше, вплоть до наших центов

00:25:25

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

00:25:27

очень плохо видеть здесь, он очень

00:25:29

маленький, так что мы тоже можем

00:25:30

измените здесь общее значение этого размера

00:25:32

Итак, мы сделаем здесь следующее

00:25:34

Выше мы обменяемся примерами и XIX

00:25:37

и мы определим здесь

00:25:40

полный шрифт веб-сайта, затем размер шрифта и

00:25:43

вот я тоже могу с этим определиться

00:25:45

Итак, я собираюсь поставить следующие 6 x

00:25:48

Так что же он собирается делать?

00:25:49

узнать размер шрифта, что это такое

00:25:52

определяется в нашем элементе в

00:25:53

родительский элемент к размеру шрифта, который

00:25:56

достиг этого элемента, что он

00:25:57

отображается, и он поймает

00:25:59

персонаж X тянет дубль на шесть и уходит

00:26:01

придайте этой красоте ценность, у меня есть источник

00:26:03

затем в шесть раз больше

00:26:05

стандартный размер, теперь вот мой настоящий

00:26:08

когда-то он был персонажем x этого шаблона

00:26:12

здесь после того, как его увеличили, так что смотри

00:26:15

Насколько это круто, я обновлю наш?

00:26:17

число здесь увеличилось, и наш знак доллара R

00:26:20

еще и потому, что когда-то он был персонажем

00:26:22

x в этом большем размере, вот так. Итак, если

00:26:25

мы увеличиваем его здесь, например, до 10

00:26:26

оно также увеличится в Италии

00:26:29

увеличьте здесь, и здесь это выглядит очень круто

00:26:31

проект Итак, ребята, теперь, когда мы

00:26:33

вам нужно уменьшить это 99 здесь

00:26:35

поэтому нам нужно добраться до него и

00:26:37

Завтра здесь и придет, он не будет Сариньей

00:26:40

Итак, здесь мы сделаем следующее

00:26:41

Я приведу пример здесь еще раз

00:26:43

но теперь я использую центы, верно?

00:26:46

размер шрифта тоже относится к одному из них, например

00:26:49

обновите здесь, он просто немного меньше

00:26:51

что нам нужно подняться сюда

00:26:53

Ребята, мы собираемся сделать следующее

00:26:54

добавьте бывшего, тогда это будет размер

00:26:59

DX уходит от дна и останавливается

00:27:02

Нам нужно определить свои

00:27:03

позиция здесь как относительная Нетао

00:27:06

положение относительно, а также нас

00:27:08

необходимо определить здесь, в рамках нашего

00:27:09

пример, который является его позицией, также

00:27:11

относительно так позиция относительно так

00:27:14

теперь это останется особенностью

00:27:16

подальше снизу, так что давай сделаем

00:27:18

этот пример обновления, посмотрите, сколько

00:27:20

Что осталось, ребята, наши 99 - это то, что поднялось.

00:27:23

так что там был персонаж Шу

00:27:25

расстояние от дна и нашей R

00:27:28

знак доллара здесь был размером с

00:27:30

символ x и вставлен внизу, верно?

00:27:32

Это стандартное значение для этой позиции, верно?

00:27:35

элемента и вот наши 79 остались это

00:27:37

полностью

00:27:39

определяется его реальным размером, не так ли?

00:27:41

не изменил свой размер, кроме

00:27:43

размер умножения здесь равен 10

00:27:45

умножить символ x по умолчанию здесь, в шрифте

00:27:48

который уже был реализован здесь

00:27:50

этого элемента и с этим, ребята

00:27:52

сегодня мы заканчиваем наше видео, где

00:27:55

мы видели на практике еще кое-что

00:27:57

Единицы измерения CSS, и у ребят есть

00:27:59

гораздо больше информации о CSS для

00:28:01

принеси это сюда на канал, так что если ты

00:28:03

Понравился ли вам этот тип контента, оставьте комментарий

00:28:05

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

00:28:07

больше информации об этом SS можно найти здесь.

00:28:09

канал

00:28:10

и все, ребята, надеюсь, у вас есть

00:28:12

понравилось сегодняшнее видео, если оно вам понравилось

00:28:14

Уже знаешь, поставь лайк под видео

00:28:16

прокомментируйте, что вы думаете об этом

00:28:18

контента было не так много

00:28:19

приходят новости, и одна из них заключается в том, что

00:28:21

скоро ваш магазин W должен купить

00:28:24

персонализированные, сделанные с осторожностью

00:28:25

для тебя Так что следуй за нами в сетях

00:28:28

в социальных сетях, чтобы не пропустить ни одной новости

00:28:29

с канала, потому что я уверен

00:28:31

вы не хотите остаться в стороне от промоакции

00:28:32

запуск магазина и, конечно, если вы

00:28:35

вы еще не подписаны на канал, если

00:28:36

подписывайтесь, каждую неделю новое видео

00:28:38

Я уверен, ты не будешь

00:28:40

сожалею, что этого еще не увидел

00:28:42

последние видео, вышедшие на канале

00:28:43

очень крутой контент вышел и ты

00:28:45

Не пропустите, ссылки оставлю здесь.

00:28:47

чтобы ты посмотрел на сегодня, вот и все, я

00:28:50

Я останусь здесь до следующего раза

00:28:52

видео это

Описание:

No vídeo de hoje vamos continuar o nosso conteúdo sobre unidades de medidas do CSS e vamos ver na prática como utilizar mais algumas delas nossos projetos. ________ Vídeos recomendados: Unidades do CSS na prática - parte 1 - WDEV: https://www.youtube.com/watch?v=u6D1tOt98bg Criando animações e transições em CSS - https://www.youtube.com/watch?v=JJiyguTeBzU ________ Agradecimento especial: Felipe Chada - https://www.facebook.com/unsupportedbrowser ________ Redes sociais: Instagram: https://www.facebook.com/unsupportedbrowser Facebook: https://www.facebook.com/unsupportedbrowser Twitter: https://twitter.com/wdevoficial ________ Créditos Abertura utiliza vídeos do Pexel (https://www.pexels.com/) dos autores Carlos Arribas, Joseph Redfield e BuildWith Angga ________

Готовим варианты загрузки

Популярные

HD видео

Только звук

Все форматы

* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."

** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

Как можно скачать видео "Unidades do CSS na prática - parte 2 - WDEV"?

Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

Какой формат видео "Unidades do CSS na prática - parte 2 - WDEV" выбрать?

Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

Почему компьютер зависает при загрузке видео "Unidades do CSS na prática - parte 2 - WDEV"?

Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.

Как скачать видео "Unidades do CSS na prática - parte 2 - WDEV" на телефон?

Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

Как скачать аудиодорожку (музыку) в MP3 "Unidades do CSS na prática - parte 2 - WDEV"?

Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

Как сохранить кадр из видео "Unidades do CSS na prática - parte 2 - WDEV"?

Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

Сколько это всё стоит?

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