Custom Overlapping Video Card With Modal Video Player in Oxygen [FULL TUTORIAL]
Автор: Kevin Geary
Загружено: 2022-01-14
Просмотров: 4142
In this tutorial, you'll learn how to create a custom overlapping video card that plays your video in a modal. This is perfect for situations where you want a super clean on-page presentation with the actual video playing in a lightbox on-click.
Techniques you'll learn:
– Creating a full screen section properly (Oxygen bug)
– Using GRID to overlap elements
– Using multi-layer box shadows.
– Creating an interior border with ::after
– Easily adding a pulsate animation to an icon
– Creating an on-click modal with video embed
– Adding a close icon to the modal
Get my CSS utility class framework: https://automaticcss.com
Join my Inner Circle: https://digitalambition.co/inner-circle/
Make sure you subscribe and hit the notification bell and drop a comment! Love hearing from you!
0:00 Intro
02:20 Example Design
04:20 Getting started
08:00 Creating the Grid
14:39 Creating the Cards
18:02 Adding the Play Icon
23:02 Adding the Pulsate Animation
24:55 Adding the 2-Layer Box Shadow
26:30 Adding the Red Inset Border
28:20 Adjusting the Overlap
30:00 Adding the Modal
31:32 Adding the Close Icon
35:03 Wrapping Up
![Custom Overlapping Video Card With Modal Video Player in Oxygen [FULL TUTORIAL]](https://ricktube.ru/thumbnail/RhUeov5SytI/hq720.jpg)
Доступные форматы для скачивания:
Скачать видео mp4
-
Информация по загрузке:
