- Overview
- Transcript
5.2 Create a CSS-Only Slider (Part 1)
Over the course of the final two lessons in this course, we’re going to dive into keyframe animations! To illustrate some of the abilities that animations provide us, we’ll build a fun CSS3-only slider. As you might imagine, this sort of functionality is generally delegated to JavaScript (and it still should), but we’re going to have some fun and see if we can accomplish the same effect with 100% CSS!
1.Introduction
1.1Introduction00:53
1.1
Introduction
00:53
2.The Basics
2.1Border-Radius04:53
2.1
Border-Radius
04:53
2.2Box-Shadow06:32
2.2
Box-Shadow
06:32
2.3Prefixr03:11
2.3
Prefixr
03:11
2.4Text-Shadow03:43
2.4
Text-Shadow
03:43
2.5Gradients10:39
2.5
Gradients
10:39
2.6Columns04:51
2.6
Columns
04:51
2.7An Introduction to Media Queries06:24
2.7
An Introduction to Media Queries
06:24
2.8Transition Basics04:44
2.8
Transition Basics
04:44
2.9Custom Fonts with @font-face05:33
2.9
Custom Fonts with @font-face
05:33
3.CSS Selectors
3.1Selector Basics06:47
3.1
Selector Basics
06:47
3.2Adjacent Selectors02:32
3.2
Adjacent Selectors
02:32
3.3Sibling Combinators02:23
3.3
Sibling Combinators
02:23
3.4Attribute Selectors06:39
3.4
Attribute Selectors
06:39
3.5First-Line and First-Letter04:04
3.5
First-Line and First-Letter
04:04
4.Transformations
4.1Introduction to Transformations03:50
4.1
Introduction to Transformations
03:50
4.2Build a 3D Flipping Card14:48
4.2
Build a 3D Flipping Card
14:48
4.3Advanced Shadows and CSS Counters05:49
4.3
Advanced Shadows and CSS Counters
05:49
4.4Sequential Animations and Image Captions19:27
4.4
Sequential Animations and Image Captions
19:27
5.Advanced Topics and Projects
5.1Repeating Gradients and Shuffled Paper16:35
5.1
Repeating Gradients and Shuffled Paper
16:35
5.2Create a CSS-Only Slider (Part 1)09:01
5.2
Create a CSS-Only Slider (Part 1)
09:01
5.3Create a CSS-Only Slider (Part 2)15:51
5.3
Create a CSS-Only Slider (Part 2)
15:51
6.Conclusion
6.1Conclusion00:42
6.1
Conclusion
00:42
