background top icon
background center wave icon
background filled rhombus icon
background two lines icon
background stroke rhombus icon
header logo icon

Скачать "How To Create Animated CSS Cards"

input logo icon
"videoThumbnail How To Create Animated CSS Cards
Оглавление
|

Оглавление

0:00
Introduction
0:30
Card Basics
3:30
Header/Footer Card
9:45
Shadow Card
11:40
Card Grid
13:50
Image Card
19:04
Animated Image Card
Похожие ролики из нашего каталога
|

Похожие ролики из нашего каталога

Теги видео
|

Теги видео

webdevsimplified
css cards
css card responsive
css card tutorial
css card animation
animated css card
css card hover animation
css card
css
css card design
css card design tutorial
css card hover effects
css card image
css card shadow
css shadow
css card grid
wds
csscards
Субтитры
|

Субтитры

subtitles menu arrow
  • enАнглийский
Скачать
00:00:00
сегодня я собираюсь показать вам, как
00:00:01
создавать дизайны CSS-карточек, но, что наиболее
00:00:04
важно, я на самом деле собираюсь поговорить
00:00:06
о том, как создать CSS-карточку любого стиля, который
00:00:08
вы хотите, чтобы вы могли создавать любую карточку,
00:00:10
а не только те, которые я вам показываю.
00:00:12
[Музыка]
00:00:15
Добро пожаловать обратно в веб-разработку. Меня
00:00:16
зовут Кайл, и моя работа — упростить
00:00:18
для вас Интернет, чтобы вы могли начать
00:00:19
создавать центр проектов своей мечты, и
00:00:21
сегодня мы начнем с
00:00:22
карточек CSS, как вы можете видеть, это окончательная
00:00:24
версия того, что мы собираемся
00:00:25
создать, у нас есть несколько разных
00:00:26
стилей карточек с границами, тенями и т.
00:00:28
д., но для начала нам просто нужно
00:00:30
создать простую страницу index.html с
00:00:32
восклицательным знаком и ввести, и она будет
00:00:34
заполнена все это для вас, если
00:00:36
вы используете vs code и emmit, и если
00:00:37
вы не знакомы с тем, как это работает, у меня
00:00:39
есть руководство по emmett, ссылка на которое приведена в
00:00:40
карточках и описании ниже, а теперь
00:00:43
следующее, что я хочу сделать, прежде чем мы получим
00:00:44
что-нибудь кроме того, я хочу использовать собственный
00:00:46
шрифт, потому что шрифт по умолчанию выглядит
00:00:47
некрасиво, все, что мы сделали, это перешли к
00:00:49
шрифтам Google и выполнили поиск по открытому sans, я
00:00:51
включу ссылку на него в
00:00:52
описание ниже, мы просто хотим прокрутить
00:00:53
вниз до того места, где у нас есть обычный 400,
00:00:55
выберите этот стиль, а затем вверху мы
00:00:56
можем нажать эту кнопку, и здесь мы можем
00:00:58
скопировать несколько тегов ссылок, которые
00:01:00
позволят нам использовать этот шрифт
00:01:01
внутри нашей страницы, так что теперь у нас есть
00:01:03
привязку шрифтов, а затем нам нужно
00:01:05
просто создать простой CSS-файл, и
00:01:07
мы назовем Styles.css,
00:01:09
мы хотим создать здесь селектор, и этот
00:01:11
селектор будет просто ссылаться на
00:01:12
все, что мы собираемся сделать. a before
00:01:15
и мы собираемся сделать селектор after,
00:01:17
мы просто хотим установить наш шрифт, поэтому, если мы
00:01:19
прокрутим здесь вниз, вы увидите, что у нас есть
00:01:20
это семейство шрифтов, которое мы можем просто скопировать
00:01:22
и вставить, и теперь он установит
00:01:24
шрифт для всего в нашем приложении
00:01:25
к этому открытому шрифту без засечек, и теперь мы собираемся
00:01:27
вернуться к без засечек. Теперь, если мы
00:01:29
просто пройдемся по нашему индексному HTML, мы обязательно
00:01:30
включим тег ссылки для CSS, который предназначен для
00:01:33
той таблицы стилей, которую мы только что создали, и
00:01:34
включим какой-нибудь шрифт на нашей странице, и теперь мы
00:01:36
открываем это на живом сервере, вы увидите
00:01:38
здесь, у нас теперь есть этот собственный открытый
00:01:40
шрифт без шрифта, если я перейду к своему стилю CSS
00:01:42
и прокомментирую это, вы увидите, что
00:01:43
теперь этот шрифт исчез, так что это это просто
00:01:45
способ сделать наш веб-сайт немного
00:01:47
лучше. Теперь самое первое, что
00:01:48
я хочу сделать, это просто
00:01:50
создать базовую карточку внутри нашего
00:01:52
тела, а не просто иметь здесь этот текст, который
00:01:53
мы собираемся сделать. создайте элемент div
00:01:55
с классом карты, и внутри него
00:01:57
мы просто поместим текст. Это
00:01:58
будет самый простой стиль
00:02:00
карты, поэтому мы просто напечатаем lorem 20, и
00:02:01
это даст нам 20 случайных слов.
00:02:03
текст, и теперь вы можете видеть, что у нас есть этот
00:02:05
случайный текст на нашем экране, я просто
00:02:06
немного увеличу его, чтобы мы могли это видеть, поэтому
00:02:08
теперь, чтобы создать карточку внутри
00:02:10
нашего CSS, мы можем просто зайти сюда и
00:02:11
выбрать это card, и на самом деле карта
00:02:13
в CSS — это, по сути, коробка, обычно
00:02:15
с белым фоном, вокруг которой есть какая-то
00:02:17
граница, закругленные
00:02:19
края и некоторые отступы, поэтому первое, что
00:02:20
мы хотим сделать, это
00:02:22
указать фон, в нашем случае мы сейчас я буду
00:02:24
использовать белый цвет, это не будет выглядеть так,
00:02:26
как будто он что-то делает, потому что фон
00:02:27
нашего тела белый, но если мы изменим
00:02:29
фон нашего тела на цвет,
00:02:30
например черный,
00:02:32
и убедитесь, что мы установили его в качестве
00:02:33
фона, и мы сохраните, теперь вы можете видеть,
00:02:35
что у него белый фон, а
00:02:37
если мы удалим этот белый фон, вы
00:02:38
увидите, что фона теперь вообще нет, поэтому
00:02:40
очень важно
00:02:41
включить это на вашу карту, давайте вернем это
00:02:43
к тому, как оно было у нас раньше. Следующее,
00:02:45
что нам нужно сделать, это
00:02:46
добавить немного отступов, поэтому просто скажите, что наш отступ
00:02:48
будет равен 1 рем, и сохраните его. Теперь вы
00:02:50
увидите, что вокруг того места, где он был раньше, есть некоторое пространство,
00:02:52
если мы удалим его, вы
00:02:53
увидите, что он прижат к нему. края теперь
00:02:55
с отступом, это просто дает нам некоторое
00:02:56
пространство вокруг всех краев, и именно
00:02:58
здесь мы можем добавить простую рамку,
00:02:59
скажем, простую сплошную рамку в один пиксель,
00:03:01
и мы просто собираемся использовать этот
00:03:03
цвет 777, это своего рода
00:03:05
как вы можете видеть, у нас теперь есть
00:03:07
граница вокруг нашей штуки, поэтому она начинает
00:03:09
больше походить на карту, но мы
00:03:10
хотим закруглить эти края, чтобы действительно придать ей
00:03:12
внешний вид карты, поэтому мы просто
00:03:13
скажем радиус границы i я собираюсь сказать 0,25
00:03:16
бэр, например, теперь, когда мы сохраняем, вы можете
00:03:18
видеть, что теперь у него закругленные края, и это
00:03:20
уже очень похоже на карту, если мы
00:03:21
подойдем сюда, прокрутим вниз, и вы
00:03:23
увидите, что она очень похожа на эту карту
00:03:24
прямо здесь. что у нас уже есть, это
00:03:26
выглядит очень похоже, но вы
00:03:28
заметите, что это просто текст
00:03:29
посередине, и обычно, когда у вас есть карточка, у вас будет
00:03:32
раздел заголовка вверху, у вас будет
00:03:33
немного тело, и у вас будет
00:03:35
нижний колонтитул, в котором, возможно, есть несколько кнопок, поэтому
00:03:37
внутри нашего индексного html давайте
00:03:38
создадим заголовок карточки, это
00:03:40
будет для нашего заголовка, например, скажем,
00:03:42
123 Main Street для нашего основного
00:03:45
тогда у нас будет тело карты, и
00:03:47
это тело карты будет просто
00:03:48
текстом, поэтому давайте поместим туда наш текст,
00:03:50
так что теперь у нас есть текст внутри тела
00:03:52
карты, а затем, наконец, мы
00:03:54
собираемся у нас есть нижний колонтитул карточки, и здесь
00:03:55
мы собираемся разместить наши кнопки, поэтому
00:03:57
здесь у нас будет простая кнопка,
00:03:58
и здесь будут просто указаны подробности,
00:04:01
и мы скопируем это, и там будет
00:04:02
написано «Контакт» продавцу, потому что
00:04:04
мы можем представить, что это что-то вроде
00:04:05
сайта типа Zillow, где мы
00:04:06
продаем кучу домов, как вы можете видеть
00:04:08
здесь, у нас есть наши дома, у нас есть
00:04:09
подробная информация и кнопка «Связаться с подвалом», и
00:04:11
эта информация будет более темный
00:04:13
оттенок, поэтому мы собираемся присвоить этому
00:04:15
класс кнопки, чтобы мы могли стилизовать это,
00:04:17
а затем здесь мы собираемся присвоить этому
00:04:18
класс кнопки, но это будет
00:04:21
кнопка с контуром, поэтому мы назовем кнопку
00:04:23
и мы собираемся сделать эту
00:04:24
кнопку контурной, чтобы она не
00:04:26
выделялась так сильно, как вы можете видеть, у нас
00:04:27
здесь есть два разных стиля кнопок, так что
00:04:28
теперь, когда все готово, мы можем пойти
00:04:30
и немного придать этому вид немного лучше,
00:04:31
первое, что я хочу сделать, это зайти
00:04:32
сюда, я выберу заголовок нашей карты
00:04:35
и внутри заголовка карты, я просто
00:04:36
хочу изменить размер шрифта, я хочу
00:04:37
сделать его 1,5 рем, так что это будет
00:04:40
более крупный шрифт для нашего заголовка, а затем я
00:04:41
хочу добавить немного интервала, поэтому мы скажем, что
00:04:43
поле внизу
00:04:45
будет 0,5 rem, это просто
00:04:47
отделит наш заголовок от тела
00:04:49
нашего текста прямо здесь, и я хочу сделать
00:04:51
то же самое и с нашим нижним колонтитулом, поэтому для
00:04:52
нижнего колонтитула нашей карточки все, что я хочу сделать, это
00:04:54
указать поле сверху, я хочу установить
00:04:56
его на одно рем, просто дайте нам немного
00:04:58
дополнительного места между нашим текстом и нашими
00:05:00
кнопками здесь и причина, по которой я
00:05:01
помещаю эти поля в нижний колонтитул и
00:05:03
заголовок, заключается в том, что, скажем, у нас
00:05:04
нет нижнего колонтитула, у нас просто
00:05:06
нет нижнего колонтитула на этой карточке, но
00:05:07
произойдет то, что все эти дополнительные поля
00:05:09
являются частью нижнего колонтитула, поэтому он не будет
00:05:11
увеличивать фактический размер карты,
00:05:13
в то время как если бы вместо этого мы сделали тело карты
00:05:16
и, например, сказали, что наше поле
00:05:18
внизу будет равно одному
00:05:20
рему, и мы удалили бы это поле из нашего
00:05:22
нижний колонтитул, теперь вы увидите, что у нас есть дополнительное
00:05:24
пространство внизу нашей карточки, которого там
00:05:25
не должно быть, и когда у нас есть
00:05:27
нижний колонтитул, он будет выглядеть нормально, как вы
00:05:28
можете видеть здесь, он выглядит нормально, но
00:05:30
проблема в том, что мы этого не делаем. У меня нет нижнего колонтитула
00:05:32
с дополнительным пространством, поэтому я
00:05:33
не размещаю поля на самом теле,
00:05:36
а все, что я хочу сделать внутри тела,
00:05:37
это просто взять
00:05:38
размер шрифта и сделать он немного
00:05:39
меньше, может быть, 0,8 бэр,
00:05:41
и это выглядит немного маленьким, поэтому
00:05:43
давайте на самом деле изменим его на 0,9 бэр, поместите
00:05:45
это поле обратно сюда для нижнего колонтитула, и,
00:05:46
как вы можете видеть, теперь это выглядит довольно хорошо,
00:05:48
следующее, что я хочу сделать, это
00:05:49
на самом деле настройте стиль наших кнопок, чтобы мы могли
00:05:51
просто сказать, что у нас есть кнопка, и у нашей
00:05:52
кнопки будет какой-то
00:05:54
фон, этот фон
00:05:56
будет определенного цвета, который мы
00:05:57
назовем hsl 200 50 и 50, который будет
00:06:01
дайте нам этот интересный синий цвет, как
00:06:02
вы можете видеть, и мы собираемся избавиться
00:06:04
от границы, поэтому мы скажем, что граница отсутствует, и это
00:06:06
будет выглядеть довольно хорошо, и
00:06:07
давайте изменим наш цвет
00:06:09
на белый, поэтому мы скажем, что цвет
00:06:11
белый, чтобы наш текст выделялся немного
00:06:12
лучше, и следующее, что я хочу
00:06:14
сделать, это добавить некоторые отступы, поэтому мы скажем, что
00:06:16
наши отступы здесь будут 0,5 em
00:06:18
и 0,75 em, и вот причина, по которой я
00:06:21
использую em вместо rem, потому что я
00:06:23
хочу, чтобы фактическое отступы масштабировалось в соответствии с
00:06:25
размером моего шрифта, поэтому, когда я меняю размер шрифта
00:06:27
здесь на один ram, вы можете видеть, что
00:06:30
отступы масштабируются вместе с ним, а если бы я использовал
00:06:31
здесь rems, панорамирование не будет
00:06:33
масштабироваться с ним также, поэтому em
00:06:35
почти всегда лучше при работе
00:06:37
с кнопками и тому подобными вещами, когда
00:06:38
вы хотите масштабировать размер шрифта,
00:06:40
и опять же, у меня есть полное видео о
00:06:41
различиях между rem и em, вы можете
00:06:43
проверить карточки и описание теперь
00:06:45
просто для завершения остальных этих
00:06:46
кнопок, которые мы хотим добавить в
00:06:47
радиус границы, поэтому мы скажем, что наш радиус границы
00:06:49
будет снова 0,25 em, используя ems, и
00:06:52
мы собираемся убедиться, что наш
00:06:53
курсор установлен на указатель, поэтому, когда мы
00:06:55
наводим на него курсор, вы можете видеть, что он дает нам
00:06:56
этот симпатичный маленький курсор-указатель, и
00:06:58
следующее, что я хочу сделать, это
00:06:59
установить состояние наведения для нашей кнопки, чтобы
00:07:01
мы могли сказать «кнопка», и когда мы наводим нашу
00:07:03
кнопку или когда мы фокусируемся на нашей кнопке, поэтому,
00:07:05
когда у нас есть дата фокусировки, мы просто хотим
00:07:07
изменить фон, поэтому мы скажем,
00:07:09
что наш фон здесь
00:07:10
будет тем же самым hsl 200 с 50
00:07:13
процентами, и вместо этого мы собираемся
00:07:15
установите для нашей яркости значение 60, чтобы
00:07:17
он был немного светлее
00:07:18
синего цвета, но в остальном он будет таким же,
00:07:20
поэтому, когда мы наводим курсор, вы не видите, что
00:07:21
ничего не меняется,
00:07:23
причина в том, что я забыл поставить
00:07:24
здесь запятую после 200, поэтому теперь, когда я навожу курсор,
00:07:26
вы можете видеть, что он становится более светлым,
00:07:28
и мне нравится использовать hsl, и у меня есть
00:07:30
целое видео на hsl, я прикреплю
00:07:32
для вас ссылки на карточки и описание, но
00:07:33
продолжим, теперь мы хотим сделать нашу
00:07:35
кнопку с контуром, чтобы мы могли кнопка «сказать», это
00:07:37
будет для этого класса структуры, поэтому
00:07:39
здесь все, что мы хотим сделать, это взять наш
00:07:40
фон и удалить его, поэтому мы собираемся
00:07:42
сказать «фон нет», который
00:07:44
избавится от фона, и это здорово,
00:07:45
но теперь нам нужно нам нужно взять
00:07:47
нашу рамку
00:07:48
и добавить рамку, чтобы мы
00:07:49
сказали, что граница представляет собой сплошной элемент в один пиксель, и мы
00:07:52
собираемся использовать здесь тот же цвет, но
00:07:54
вместо того, чтобы копировать этот цвет отсюда
00:07:57
и вставлять его сюда. вместо этого
00:07:58
я собираюсь создать
00:07:59
переменную с именем цвет, и она будет
00:08:01
содержать этот цвет, поэтому мы просто скажем, что
00:08:03
наша цветовая переменная - это этот цвет, а
00:08:05
затем, чтобы получить доступ к этой переменной, мы просто
00:08:06
скажем: var, и мы скажем цвет, теперь мы можем
00:08:09
получить доступ к этому цвету где угодно, то же самое
00:08:10
здесь, я могу сказать var
00:08:13
color, и это будет работать точно так
00:08:15
же, и теперь, если мне нужно изменить
00:08:16
это, например, на зеленый цвет, я могу
00:08:18
сделать это в одно место, и оно будет работать
00:08:20
везде, это действительно здорово,
00:08:21
теперь последнее, что мне нужно сделать, это
00:08:23
добавить сюда наш цвет, который снова будет
00:08:25
использовать эту цветовую переменную,
00:08:26
и сохранить, и теперь вы можете видеть, что у нас есть
00:08:28
контурная версия и твердая версия
00:08:30
нашей кнопки, и если вы не знакомы с
00:08:31
этими переменными CSS, у меня есть полное видео
00:08:33
по ней только в карточках и описании
00:08:34
для вас, и последнее, что мне нужно сделать
00:08:36
для наших кнопок, это просто добавить небольшой
00:08:38
эффект для наше наведение и фокус,
00:08:40
поэтому мы скажем: кнопка «Контур контура кнопки»,
00:08:43
и здесь все, что я хочу сделать, это просто
00:08:45
изменить наш фон.
00:08:47
Я хочу сделать наш фон очень
00:08:48
похожим на этот цвет обложки, но я хочу
00:08:50
сделать его действительно облегченную версию, мы
00:08:51
просто скажем, например, 90,
00:08:53
поэтому теперь, когда я навожу курсор, вы можете видеть, что она
00:08:55
выглядит так, как будто она наведена, потому что
00:08:56
позади нее появляется фон,
00:08:57
который похож по цвету на наш синий,
00:08:59
просто сейчас это очень легкая версия
00:09:01
наконец, я просто хочу добавить немного
00:09:02
дополнительного пространства между нашими кнопками, так что это
00:09:04
действительно изящный трюк, который вы можете сделать: если у
00:09:05
вас есть два элемента, которые вы всегда хотите
00:09:07
отделить друг от друга, если у вас их
00:09:08
больше одного, вы можете сказать кнопку плюс
00:09:10
и затем снова поместите наш класс кнопки, и
00:09:12
здесь мы просто скажем, что поле слева
00:09:14
будет составлять 0,25 бэр,
00:09:16
и, как вы можете видеть, это добавит
00:09:17
немного места, если мы изменим это значение на 0,5 бэр,
00:09:19
вы можете увидеть, что пространство увеличивается на 5 бэр
00:09:21
даже больше, и причина, по которой это
00:09:23
работает, та же самая, если у вас есть кнопка,
00:09:24
за которой следует другая кнопка, поместите
00:09:26
немного места слева от второй
00:09:28
кнопки, это действительно удобный выбор CSS,
00:09:30
который вы можете использовать, и если вы немного
00:09:32
незнакомы с этими причудливыми
00:09:33
селекторами CSS со знаками плюса у меня есть полная
00:09:35
шпаргалка по селекторам CSS, я дам ссылку
00:09:37
в описании для вас, чтобы вы могли
00:09:38
скачать, она охватывает все эти
00:09:39
сложные селекторы, поэтому на этом этапе мы
00:09:42
рассмотрели самые основные стиль карты,
00:09:43
которую вы можете создать, это карта с
00:09:45
заголовком, у нее есть какое-то тело, у нее есть некоторые
00:09:46
вещи, некоторые кнопки, которые вы можете нажимать,
00:09:48
и она имеет сплошную рамку вокруг нее, но,
00:09:50
как правило, это не лучший стиль
00:09:52
карты, которую вы можете подписать, если мы переходим сюда, вы
00:09:54
можете видеть, что у нас есть версия
00:09:55
карты с рамкой прямо здесь, но также и под ней, это
00:09:57
может быть немного трудно увидеть, вы можете
00:09:58
видеть, что у нас есть теневая версия здесь, вы
00:09:59
можете увидеть то же самое, что у нас есть эта карта,
00:10:01
которая вокруг него идет тень,
00:10:02
а не граница, и лично я
00:10:04
думаю, что тень почти всегда выглядит
00:10:06
лучше, поэтому я хочу показать вам, как
00:10:07
ее создать, поэтому давайте перейдем к нашему
00:10:09
index.html, и все, что я собираюсь сделать, это
00:10:10
Я просто возьму эту карту, которая у нас
00:10:12
есть, я просто скопирую ее
00:10:13
ниже, и мы назовем
00:10:16
здесь жесткую тень, это будет
00:10:18
для теневой версии нашей карты и
00:10:20
вместо всего нашего CSS нам нужно
00:10:22
пройти весь путь сюда, и мы можем
00:10:23
выбрать нашу карту с теневой
00:10:26
застежкой, и здесь я хочу удалить нашу
00:10:28
рамку, поэтому мы скажем, что граница отсутствует, что
00:10:30
избавляет от пограничной силы, и вместо этого
00:10:31
я хочу замените это тенью блока,
00:10:33
теперь тень блока немного сбивает с толку, как
00:10:35
она работает. Первое введенное вами число
00:10:36
будет смещением по оси X, поэтому насколько далеко
00:10:38
вправо или влево находится смещение вашей
00:10:40
тени по оси X в нашем случае, мы хотим, чтобы оно было быть
00:10:41
мертвой точкой, поэтому мы собираемся поставить 0. теперь
00:10:43
следующее число - это смещение по оси y, и
00:10:45
обычно, когда вы создаете тень, вы
00:10:46
хотите, чтобы она была темнее внизу и
00:10:48
светлее вверху, поэтому мы собираемся
00:10:49
сместить вниз на два пикселя в направлении y,
00:10:52
затем идет размытие, так что
00:10:54
в нашем случае
00:10:56
мы просто сделаем пять пикселей, довольно хорошее
00:10:58
число, а разброс примерно такой же, как
00:10:59
далеко ваша тень остается того же темного
00:11:01
цвета в нашем случае нам не нужен какой-либо
00:11:03
разброс, потому что разброс добавляет что-то вроде
00:11:04
границы, поэтому мы собираемся установить наш
00:11:06
разброс равным нулю, а затем мы хотим, чтобы
00:11:08
по существу был очень темный цвет, поэтому мы
00:11:10
выберем черный, мы хотим сделать его
00:11:11
в основном прозрачный, поэтому мы собираемся использовать
00:11:13
точку 2 прямо здесь, и если я сохраню, вы
00:11:15
теперь увидите, что у нас есть тень, где она немного
00:11:16
темная внизу, но
00:11:18
вверху она светлее, и это будет легко
00:11:19
увидеть, если я просто закомментируйте эту карту
00:11:21
здесь, вы можете видеть, что теперь у нас есть только наша
00:11:22
теневая карта, где тени совсем не много
00:11:23
сверху, но она намного
00:11:25
темнее внизу, это опять же
00:11:26
потому, что это смещение здесь, если я изменю
00:11:28
его на ноль, вы можете увидеть сейчас моя тень
00:11:30
одинакова сверху и снизу,
00:11:32
и в целом это выглядит не так
00:11:33
хорошо, как если бы больше тени
00:11:34
внизу и меньше сверху,
00:11:37
теперь давайте вернемся к тому моменту, когда
00:11:38
внутри нашей штуки было две разные карты, так что
00:11:40
давайте просто раскомментируем это, и теперь у нас есть
00:11:41
две карты, и я
00:11:42
хочу иметь возможность стилизовать эти карты так,
00:11:44
чтобы они действительно были хорошо расположены,
00:11:45
потому что прямо сейчас, что происходит, давайте
00:11:46
просто немного уменьшим это, вы можете
00:11:47
видеть эти карточки очень широкие, вы знаете,
00:11:49
поскольку я продолжаю уменьшать масштаб, они невероятно
00:11:50
широкие, и я действительно не хочу, чтобы они были
00:11:52
такими широкими, поэтому я мог бы сделать это, вы знаете,
00:11:54
я мог бы войти в свою карточку и
00:11:55
сказать, что максимальная ширина здесь вы знаете 300 пикселей,
00:11:58
и теперь, когда я увеличиваю масштаб, вы можете видеть, что
00:11:59
они всегда имеют ширину 300 пикселей или
00:12:01
заполняют весь экран, если мой экран
00:12:02
меньше 300 пикселей, это работает, но
00:12:04
иногда вам нужно, чтобы ваши карты были
00:12:06
немного больше. меньше, поэтому
00:12:07
вместо этого мне нравится
00:12:08
помещать их внутрь контейнера, поэтому
00:12:10
я собираюсь обернуть
00:12:11
все это внутри контейнера,
00:12:13
называемого сеткой карточек, и мы собираемся
00:12:15
используйте css-сетку, чтобы разметить эти карточки сейчас,
00:12:17
если вы не знакомы с css-сеткой, у меня
00:12:19
есть целое очень подробное руководство, в котором она
00:12:20
рассматривается, я дам ссылку на карточки
00:12:22
и описание ниже для вас, но мы
00:12:23
просто рассмотрим очень основы того,
00:12:25
как это работает, поэтому внутри здесь мы
00:12:26
собираемся выбрать класс сетки карточек. Я
00:12:28
собираюсь установить отображение в сетку. Это
00:12:31
будет расположение элементов в сетке, и
00:12:32
мы собираемся указать наши столбцы и
00:12:34
по сути, мы
00:12:35
хотим иметь автоматическое количество
00:12:36
столбцов, минимальный размер которых будет
00:12:38
составлять 300 пикселей, поэтому мы
00:12:40
скажем «повторить», мы хотим сделать это автоматически,
00:12:42
поэтому мы просто скажем автозаполнение,
00:12:43
мы собираемся сказать мин-максимум, поэтому наш
00:12:45
минимальный размер составляет 300 пикселей, наш максимальный
00:12:47
размер - 1fr, что означает, что он вырастет до такого
00:12:49
размера, который должен быть, поэтому теперь, когда я
00:12:51
сохраняю, вы можете видеть, что наши карты выложены
00:12:53
и по мере того, как мой экран меняется в размере, вы
00:12:56
можете видеть, что они становятся все шире и шире, и у меня
00:12:58
здесь есть проблема, связанная с
00:12:59
автозаполнением, давайте вместо этого изменим это на автоматическое подгонку,
00:13:01
поэтому теперь, если мы увеличим
00:13:03
размер экрана, вы увидите, что мы этого не делаем. есть проблема,
00:13:05
когда он стал меньше, но важно то, что,
00:13:06
поскольку мы становимся действительно очень маленькими,
00:13:08
вы можете видеть, как только мы становимся ниже 300 пикселей,
00:13:10
теперь он переходит на следующую строку, поэтому он
00:13:12
по сути поместит как можно больше пикселей в
00:13:13
одну строку, и если они становятся слишком
00:13:15
маленькими, они переместятся на
00:13:17
следующую строку, и это действительно здорово, теперь
00:13:19
последнее, что я хочу сделать, это просто добавить немного
00:13:20
места, поэтому мы собираемся сказать, что разрыв равен 1 оперативной памяти,
00:13:22
и это просто оставит некоторое пространство
00:13:24
между ними а затем, если наши карточки имеют
00:13:25
разную высоту, например, у нас есть
00:13:27
дополнительный текст внутри этой, позвольте мне
00:13:28
просто добавить кучу дополнительного текста, вы увидите,
00:13:30
что у этой карты есть немного больше
00:13:32
места внизу, если я скопирую это и
00:13:34
вставлю. вниз станет
00:13:35
совершенно очевидно, что вы видите здесь все это дополнительное
00:13:37
пространство, это выглядит как-то плохо, поэтому мы
00:13:38
скажем, выровнять элементы, flex start, и
00:13:41
это просто сделает так, чтобы оно
00:13:42
всегда было вверху и не расширялось
00:13:43
до заполните всю высоту, теперь позвольте мне
00:13:45
удалить весь этот лишний текст, он нам на
00:13:46
самом деле не нужен, и, как вы можете видеть,
00:13:48
эти карточки выглядят довольно хорошо, поэтому на этом
00:13:49
этапе мы рассмотрели, как создать темную
00:13:51
рамку, мы рассмотрели, как ее создать.
00:13:52
затененную границу, и мы также рассмотрели,
00:13:54
как вы можете создать своего рода сетку, чтобы разместить
00:13:55
свои карты. Следующее, о чем я хочу
00:13:57
поговорить, это то, как вы можете на самом деле
00:13:58
создавать карты с изображениями вверху,
00:13:59
как вы можете видеть, что эти карты имеют изображение
00:14:01
вверху, это действительно профессиональный
00:14:02
и чистый вид, и вы будете
00:14:03
видеть его постоянно, и есть
00:14:05
много нюансов в том, как заставить это
00:14:06
работать правильно, так что это
00:14:08
довольно сложно, но я собираюсь рассказать это
00:14:09
именно то, как это должно работать, поэтому
00:14:11
мы хотим прийти
00:14:12
сюда и создать совершенно новую карту, я
00:14:13
просто собираюсь скопировать карту с
00:14:14
тенью, потому что,
00:14:16
на мой взгляд, тени выглядят лучше и вместо этого
00:14:17
заголовка с текстом внутри
00:14:19
мы поместим
00:14:21
сюда изображение, и теперь у этого изображения просто
00:14:22
будет источник, чтобы
00:14:24
получить все эти изображения. Я использую unsplash,
00:14:26
как вы можете видеть здесь мы можем найти
00:14:27
кучу разных изображений домов, и
00:14:29
вам просто нужно взять
00:14:30
URL-адрес, я собираюсь вставить его сюда,
00:14:32
это просто https, двоеточие, обратная косая черта
00:14:35
source.unsplash.com,
00:14:37
и вы просто скопируйте идентификатор Итак, если я нажму
00:14:38
на изображение здесь, вы увидите, что у нас есть
00:14:40
идентификатор, и я могу просто скопировать и вставить
00:14:42
этот идентификатор и поместить его сюда, если
00:14:43
захочу, например, вот этот дом,
00:14:45
например, я просто скопирую
00:14:46
этот идентификатор, вставьте его сюда, когда я
00:14:49
приду сюда, вы увидите, что этот
00:14:50
дом появляется, он довольно большой
00:14:52
сейчас, мы собираемся это исправить, но, как
00:14:53
вы можете видеть, это именно тот дом, который я получил
00:14:55
со своей страницы unsplash прямо здесь и вы
00:14:57
можете выбрать любые дома, которые хотите, сейчас это действительно
00:14:59
не имеет значения, последнее, что я хочу
00:15:00
сделать, чтобы иметь возможность сказать, что это
00:15:02
изображение карты, я собираюсь просто поместить
00:15:03
класс изображения карты в свой заголовок, чтобы я знал что
00:15:05
это заголовок, который содержит изображение,
00:15:07
а не заголовок, содержащий текст,
00:15:09
и теперь я могу войти сюда
00:15:10
и начать стилизовать его, чтобы я мог
00:15:12
сказать изображение карты с точками в заголовке карты, чтобы выбрать
00:15:15
все те заголовки, внутри которых есть изображение.
00:15:16
из них сейчас все, что я хочу сделать,
00:15:18
это установить скрытое переполнение,
00:15:20
и это просто сделает так, чтобы
00:15:21
изображение больше не переполняло свой контейнер,
00:15:23
что действительно важно, и
00:15:25
следующее, что я хочу сделать, это
00:15:26
выбрать заголовок нашей карты. Я хочу выбрать
00:15:28
изображение карты, и на самом деле я хочу
00:15:30
получить изображение непосредственно внутри него, чтобы
00:15:32
мы могли сказать здесь img, чтобы получить этот
00:15:34
тег изображения, и, что важно, я хочу изменить
00:15:36
отображение здесь, чтобы заблокировать, чтобы я мог фактически
00:15:37
изменить ширину и высоту, и я хочу
00:15:39
установить ширину на 100 процентов, чтобы она
00:15:41
была 100-процентной шириной нашего
00:15:43
контейнера, и это уже выглядит намного
00:15:44
лучше, но не совсем то, что мы ищем.
00:15:46
Следующее, что я хочу сделать, это захотеть
00:15:47
чтобы изменить соотношение сторон, поэтому я хочу
00:15:49
убедиться, что наше соотношение сторон составляет 16 на 9.
00:15:51
Это очень крутое свойство CSS, где
00:15:53
теперь наше изображение было изменено на
00:15:55
соотношение сторон 16 на 9, но вы заметите, что оно
00:15:57
выглядит немного сморщенным. дом
00:15:58
как бы сжался вниз, поскольку он
00:16:00
изменил размер изображения, поэтому я
00:16:02
хочу изменить размер моего объекта здесь,
00:16:04
и я хочу изменить это, чтобы охватить то, что
00:16:06
это собирается сделать, это
00:16:07
сделает его таким аспектом соотношение изображения
00:16:09
всегда сохраняется, поэтому, если изображение,
00:16:10
например, 17 на 9,
00:16:13
соотношение сторон будет сохраняться, и оно
00:16:15
просто выйдет за край нашего
00:16:17
контейнера, и это важно, потому что
00:16:18
здесь есть определенные изображения,
00:16:20
например это дом — очень высокое изображение,
00:16:22
а это очень широкое изображение, поэтому,
00:16:23
используя крышку, подходящую объекту, я всегда могу быть
00:16:25
уверен, что фактическое соотношение сторон
00:16:27
изображения сохраняется, чтобы оно не
00:16:28
искажало и не растягивало изображение, оно
00:16:31
уже в основном прямоугольное. так что
00:16:32
искажений не так уж и много,
00:16:33
но благодаря им изображение выглядит
00:16:35
немного лучше. Еще одна вещь, которую я
00:16:37
хочу сделать, это указать
00:16:39
здесь максимальную высоту в 200 пикселей, и
00:16:41
причина этого в том, что, поскольку экран
00:16:43
начинает становиться немного больше и
00:16:44
шире, поэтому по мере того, как мы становимся все шире, шире и
00:16:46
шире, вы можете видеть, что наше изображение
00:16:47
существенно растет, если бы у нас не было этой максимальной
00:16:49
высоты здесь, вы можете видеть, что оно становится очень
00:16:51
высоким, и по мере того, как оно становится шире и шире, вы
00:16:53
можете видеть, что это изображение становится все выше и
00:16:54
выше, короче и короче, но мы
00:16:56
никогда не хотели, чтобы оно было слишком высоким или слишком широким, поэтому
00:16:57
мы сидим на максимальной высоте
00:16:59
нашего изображения 200 процентов, теперь важно еще одно:
00:17:01
я хочу чтобы
00:17:03
убедиться, что мы всегда центрируем наше изображение, чтобы
00:17:04
мы могли указать здесь положение нашего объекта, если
00:17:06
мы просто получим
00:17:08
положение объекта, упс, я хочу изменить его на
00:17:10
центр, и это означает, что он всегда будет
00:17:11
фокусироваться на центре изображения,
00:17:13
независимо от того, насколько он мал или большое наше изображение
00:17:15
всегда фокусируется на центре, где
00:17:16
обычно
00:17:17
будет находиться дом, и пока это выглядит довольно
00:17:19
хорошо, но главная проблема, с которой мы сталкиваемся, - это все
00:17:21
отступы по краям нашей карты,
00:17:23
помните здесь, на нашей карте мы устанавливаем
00:17:25
отступ в один рем, и это отлично работает
00:17:27
для базовых карт, но когда вы хотите, чтобы что-то
00:17:28
дошло до края, как на нашем
00:17:30
изображении здесь, отступ на самом деле не может
00:17:31
быть определен на карте, вместо этого нам нужно
00:17:33
удалить это отступ с нашей карты и
00:17:35
теперь вы можете видеть, что изображение касается
00:17:37
края, но все остальное также
00:17:38
касается края, что выглядит очень плохо,
00:17:40
поэтому вместо этого я собираюсь указать пользовательскую
00:17:42
переменную, называемую отступом, для которой мы установили значение
00:17:44
1 rem, а затем внутри заголовка здесь все, что
00:17:47
я хочу Я хочу сказать, что наше
00:17:48
отступы здесь будут равны
00:17:50
этой переменной отступов,
00:17:51
и если я сохраню, вы заметите, что это
00:17:53
выглядит в основном хорошо, но это
00:17:54
также даст нам немного отступов внизу, так что
00:17:56
я собираюсь сказать, что наши отступы внизу
00:17:58
будут
00:18:00
равны нулю, и это избавит от
00:18:02
лишнего пространства внизу, теперь
00:18:04
важно отметить, хотя это внутри
00:18:05
нашей версии изображения, я хочу, чтобы на самом деле
00:18:07
не было отступов, поэтому здесь наши отступы
00:18:09
будут установлены на ноль, поэтому, если это просто
00:18:11
текстовая версия, у нас есть отступы,
00:18:13
но если это версия изображения, у нас
00:18:15
нет отступов, вы сразу же
00:18:16
заметите одну проблему: наши закругленные углы
00:18:19
теперь больше не здесь, наши изображение не
00:18:21
имеет закругленных углов, чтобы исправить это
00:18:23
на нашей карточке, просто установите для нашего переполнения значение
00:18:24
скрытое, и это будет сделано,
00:18:26
поскольку наша карта имеет закругленные границы, и
00:18:28
изображение перекрывает эти закругленные границы,
00:18:30
вы можете видеть, что теперь у нас есть закругленные
00:18:31
границы на нашей карте. image теперь все, что нам нужно
00:18:33
сделать, это добавить это дополнение к остальной части
00:18:34
нашей страницы, поэтому здесь, на нашем теле, мы
00:18:36
собираемся установить наше дополнение равным
00:18:38
нулю, а затем нашу переменную заполнения,
00:18:40
потому что мы хотим, чтобы наше вертикальное
00:18:41
дополнение было равно нулю. это первое
00:18:43
число, и наше горизонтальное отступ будет
00:18:45
отступом для нашей карты, как вы можете видеть,
00:18:46
он толкает этот текст по бокам, а затем
00:18:48
наша опора. То же самое, что и наш отступ
00:18:50
будет нашей переменной отступа, и мы
00:18:52
просто хотим удалить отступ.
00:18:54
вверху и установите его на ноль только потому, что нам
00:18:56
не нужно дополнительное пространство вверху, и
00:18:58
теперь наша карточка сразу выглядит намного
00:18:59
лучше, но теперь у нас здесь полноразмерное изображение
00:19:01
вместо этого меньшего изображения, теперь
00:19:02
единственное, что осталось сделать это сделать этот
00:19:04
приятный небольшой эффект увеличения, как вы можете
00:19:05
видеть на этих изображениях, мы даем ему
00:19:07
небольшой эффект масштабирования, когда мы наводим курсор на
00:19:08
карточку, это выглядит просто потрясающе и
00:19:10
профессионально, поэтому мы добавим это,
00:19:11
и это на удивление просто. поэтому
00:19:14
выберите заголовок нашей карты, и мы хотим
00:19:15
получить изображение карты, мы хотим получить
00:19:17
изображение внутри него, и
00:19:19
важно то, что мы хотим делать это каждый раз, когда мы наводим курсор
00:19:20
на нашу карту, поэтому мы просто будем говорить «
00:19:23
Наведение карты» и каждый раз, когда мы наводим курсор. наша карточка,
00:19:26
карточка внутри нее с заголовком,
00:19:27
которую мы собираемся масштабировать, и все, что я
00:19:29
хочу сделать, это использовать наше
00:19:30
преобразование
00:19:32
здесь, я хочу взять наш масштаб и
00:19:34
просто сделать очень маленькое масштабирование мы сделаем
00:19:35
как 1.025,
00:19:37
теперь вы можете видеть, когда я навожу курсор, на самом деле сейчас ничего
00:19:39
не происходит, и это
00:19:40
потому, что я поместил здесь точечное изображение вместо
00:19:42
изображения. Если я перейду к этому, вы увидите,
00:19:44
что оно масштабирует наше изображение, которое
00:19:45
выглядит действительно хорошо, но, конечно, мы хотим, чтобы
00:19:47
это был плавный переход, а не
00:19:49
просто эта нервная анимация, поэтому мы
00:19:51
можем сказать «переход», и мы хотим установить
00:19:53
наш переход на 200 миллисекунд, это
00:19:55
приведет к переходу нашего
00:19:56
свойства преобразования, потому что это то, что мы
00:19:58
хотите изменить, и мы собираемся
00:19:59
упростить это, поэтому теперь, когда мы наводим курсор,
00:20:02
вы можете видеть, что у него есть этот приятный, очень медленный
00:20:03
эффект масштабирования, и он просто выглядит очень
00:20:05
хорошо, и теперь он всегда остается в центре
00:20:07
изображения, чтобы доказать Вы знаете, что все
00:20:08
это работает очень хорошо, независимо от
00:20:10
размера изображения.
00:20:11
Я просто скопирую эту карточку
00:20:12
еще раз, вставлю ее, и
00:20:14
я собираюсь изменить наше
00:20:15
изображение, и вот мы мы собираемся получить это
00:20:17
очень высокое вертикальное изображение, давайте скопируем
00:20:19
идентификатор для этого, мы собираемся вставить это,
00:20:21
мы собираемся вернуться на нашу страницу
00:20:23
и ура, эта страница, и вы
00:20:25
увидите, хотя это было очень высокое
00:20:26
изображение, оно идеально подходит, оно того
00:20:28
же размера, что и другое изображение, и оно
00:20:30
по-прежнему имеет действительно крутой эффект масштабирования,
00:20:31
оно сосредоточено на реальном доме, и
00:20:33
в целом выглядит очень хорошо,
00:20:35
так как вы дошли до конца, вы получаете
00:20:36
бонусный снимок спящая собака, но это также
00:20:38
означает, что вам, вероятно, действительно нравится CSS,
00:20:40
а это значит, что вам понравится моя
00:20:42
шпаргалка по селектору CSS, которая научит вас
00:20:43
всему, что вам нужно знать о каждом
00:20:45
селекторе CSS. Это совершенно бесплатно,
00:20:47
я прикрепляю ее к описание
00:20:48
ниже, и на этом спасибо
00:20:50
большое за просмотр и хорошего дня.

Описание:

FREE CSS Selector Cheat Sheet: https://webdevsimplified.com/specificity-cheat-sheet.html CSS cards are one of the most popular design patterns on the web. There are hundreds of different styles of cards, but they all share a few things in common. In this video I will show you how to create 4 different card styles and most importantly explain how you can expand upon these card styles to create your very own card designs. 📚 Materials/References: FREE CSS Selector Cheat Sheet: https://webdevsimplified.com/specificity-cheat-sheet.html Open Sans Font: https://fonts.google.com/specimen/Open+Sans GitHub Code: https://github.com/WebDevSimplified/css-cards Emmet Video: https://www.youtube.com/watch?v=V8vizNQKtx0 CSS Units Video: https://www.youtube.com/watch?v=-GR52czEd-0 HSL Video: https://www.youtube.com/watch?v=EJtmfkKulNA CSS Variables Video: https://www.youtube.com/watch?v=oZPR_78wCnY CSS Variables Article: https://blog.webdevsimplified.com//2020-02/css-custom-properties/ CSS Grid Video: https://www.youtube.com/watch?v=9zBsdzdE4sM 🌎 Find Me Here: My Blog: https://blog.webdevsimplified.com My Courses: https://courses.webdevsimplified.com/ Patreon: https://www.patreon.com/WebDevSimplified Twitter: https://twitter.com/DevSimplified Discord: https://discord.com/invite/7StTjnR GitHub: https://github.com/WebDevSimplified CodePen: https://codepen.io/WebDevSimplified ⏱️ Timestamps: 00:00 - Introduction 00:30 - Card Basics 03:30 - Header/Footer Card 09:45 - Shadow Card 11:40 - Card Grid 13:50 - Image Card 19:04 - Animated Image Card

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

popular icon
Популярные
hd icon
HD видео
audio icon
Только звук
total icon
Все форматы
* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."
** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

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

mobile menu iconКак можно скачать видео "How To Create Animated CSS Cards"?mobile menu icon

  • Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.

  • Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.

  • UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

mobile menu iconКакой формат видео "How To Create Animated CSS Cards" выбрать?mobile menu icon

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

mobile menu iconПочему компьютер зависает при загрузке видео "How To Create Animated CSS Cards"?mobile menu icon

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

mobile menu iconКак скачать видео "How To Create Animated CSS Cards" на телефон?mobile menu icon

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

mobile menu iconКак скачать аудиодорожку (музыку) в MP3 "How To Create Animated CSS Cards"?mobile menu icon

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

mobile menu iconКак сохранить кадр из видео "How To Create Animated CSS Cards"?mobile menu icon

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

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

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