- Overview
- Transcript
3.2 Create Awesome States on Form Elements
Forms are a big part of any user interface. The default styling — the one generated by the browser — doesn’t look so good that’s why developers almost always style them somehow. However, one thing they tend to forget is to style the hover and focus states of the text inputs. Doing this properly will create a good looking form and also improve the user experience.
So let me show you how you can do that by experimenting on some text inputs and a text area.
1.Introduction
1.1Welcome00:41
1.1
Welcome
00:41
2.Typography
2.1Use CSS Shorthand04:05
2.1
Use CSS Shorthand
04:05
2.2Change Text Selection Color01:50
2.2
Change Text Selection Color
01:50
2.3Awesome Font Stacks04:10
2.3
Awesome Font Stacks
04:10
2.4Drop Caps03:00
2.4
Drop Caps
03:00
2.5Style Placeholder Text02:15
2.5
Style Placeholder Text
02:15
2.6Remove Dotted Outline on Links02:03
2.6
Remove Dotted Outline on Links
02:03
3.Forms
3.1Create Custom Radio Buttons and Checkboxes06:38
3.1
Create Custom Radio Buttons and Checkboxes
06:38
3.2Create Awesome States on Form Elements04:14
3.2
Create Awesome States on Form Elements
04:14
4.Positioning
4.1Horizontal and Vertical Centering03:48
4.1
Horizontal and Vertical Centering
03:48
4.2Absolutely Center an Image03:41
4.2
Absolutely Center an Image
03:41
4.3Properly Clear and Contain Floats05:00
4.3
Properly Clear and Contain Floats
05:00
5.CSS Generated Elements
5.1CSS Triangles05:14
5.1
CSS Triangles
05:14
5.2CSS Circles01:36
5.2
CSS Circles
01:36
5.3Create a Layered Paper Effect05:30
5.3
Create a Layered Paper Effect
05:30
5.4Get Creative With the List Bullets05:24
5.4
Get Creative With the List Bullets
05:24
6.Useful Techniques
6.1Create a Fixed Back to Top Button03:35
6.1
Create a Fixed Back to Top Button
03:35
6.2Even and Odd Rows03:36
6.2
Even and Odd Rows
03:36
6.3Create Fluid Images01:41
6.3
Create Fluid Images
01:41
7.Conclusion
7.1Recap01:47
7.1
Recap
01:47
