CSS

[Pages:319]CSS

#css

Table of Contents

About

1

Chapter 1: Getting started with CSS

2

Remarks

2

Versions

2

Examples

2

External Stylesheet

2

Example

2

Internal Styles

4

Inline Styles

4

CSS @import rule (one of CSS at-rule)

4

How to use @import

5

Changing CSS with JavaScript

5

Pure JavaScript

5

jQuery

5

See also

6

Styling Lists with CSS

6

Chapter 2: 2D Transforms

8

Syntax

8

Parameters

8

Remarks

9

2D Coordiante system

9

Browser support and prefixes

10

Example of prefixed transform:

10

Examples

10

Rotate

10

Scale

10

Translate

11

Skew

11

Multiple transforms

12

Transform Origin

13

Chapter 3: 3D Transforms

15

Remarks

15

Coordinate system

15

Examples

15

3D cube

16

backface-visibility

17

Compass pointer or needle shape using 3D transforms

18

CSS

18

HTML

18

3D text effect with shadow

19

Chapter 4: Animations

22

Syntax

22

Parameters

22

Examples

22

Animations with the transition property

22

Example

22

Cross-Browser Compatibility

23

Increasing Animation Performance Using the `will-change` Attribute

24

Animations with keyframes

24

Basic Example

24

Cross-browser compatibility

26

Syntax Examples

26

Chapter 5: Backgrounds

27

Introduction

27

Syntax

27

Remarks

27

Examples

27

Background Color

27

Color names

28

Hex color codes

28

RGB / RGBa

28

HSL / HSLa

29

Interaction with background-image

29

Background Image

30

Background Gradients

31

linear-gradient()

31

radial-gradient()

31

Repeating gradients

32

Background Shorthand

33

Syntax

33

Examples

33

Background Position

34

Longhand Background Position Properties

35

Background Attachment

35

Examples

35

background-attachment: scroll

35

background-attachment: fixed

36

background-attachment: local

36

Background Repeat

36

Background Color with Opacity

37

Multiple Background Image

37

The background-origin property

38

Background Clip

40

Background Size

41

General overview

41

Keeping the aspect ratio

43

Eggsplanation for contain and cover

43

contain

44

cover

44

Demonstration with actual code

45

background-blend-mode Property

46

Chapter 6: Block Formatting Contexts

47

Remarks

47

Examples

47

Using the overflow property with a value different to visible

47

Chapter 7: Border

49

Syntax

49

Remarks

49

Examples

51

border-radius

51

border-style

52

border (shorthands)

53

border-image

53

border-[left|right|top|bottom]

54

border-collapse

54

Multiple Borders

54

Creating a multi-colored border using border-image

55

CSS

55

HTML

56

Chapter 8: box-shadow

58

Syntax

58

Parameters

58

Remarks

58

Examples

58

drop shadow

58

inner drop shadow

59

bottom-only drop shadow using a pseudo-element

59

multiple shadows

60

Chapter 9: Browser Support & Prefixes

62

Parameters

62

Remarks

62

Examples

62

Transitions

62

Transform

63

Chapter 10: Cascading and Specificity

64

Remarks

64

Examples

64

Cascading

64

CSS Loading order

64

How are conflicts resolved?

64

Example 1 - Specificity rules

64

Example 2 - Cascade rules with identical selectors

65

Example 3 - Cascade rules after Specificity rules

65

A final note

65

The !important declaration

66

Calculating Selector Specificity

66

Example 1: Specificity of various selector sequences

67

Example 2: How specificity is used by the browser

67

Example 3: How to manipulate specificity

68

!important and inline style declarations

69

A final note

69

More complex specificity example

69

Chapter 11: Centering

71

Examples

71

Using CSS transform

71

CROSS BROWSER COMPATIBILITY

71

MORE INFORMATION

72

Using Flexbox

72

Using position: absolute

73

Ghost element technique (Micha Czernow's hack)

74

Using text-align

74

Centering in relation to another item

75

Vertical align anything with 3 lines of code

76

Vertically align an image inside div

76

Horizontal and Vertical centering using table layout

77

Using calc()

77

Vertically align dynamic height elements

78

Using line-height

79

Centering vertically and horizontally without worrying about height or width

79

The outer container

79

The inner container

79

The content box

79

Demo

80

Centering with fixed size

80

Horizontal centering with only fixed width

81

Vertical centering with fixed height

81

Using margin: 0 auto;

82

Chapter 12: Clipping and Masking

84

Syntax

84

Parameters

84

Remarks

85

Masks:

85

Clip-path:

85

Examples

86

Clipping (Polygon)

86

CSS:

86

HTML:

86

Clipping (Circle)

87

CSS:

87

HTML

87

Clipping and Masking: Overview and Difference

88

Clipping

88

Masking

88

Simple mask that fades an image from solid to transparent

89

CSS

89

HTML

89

Using masks to cut a hole in the middle of an image

90

CSS

90

HTML

90

Using masks to create images with irregular shapes

91

CSS

91

HTML

91

Chapter 13: Colors

93

Syntax

93

Examples

93

Color Keywords

93

Color Keywords

93

Hexadecimal Value

100

Background

100

Syntax

101

rgb() Notation

101

Syntax

102

hsl() Notation

102

Syntax

102

Notes

102

currentColor

103

Use in same element

103

Inherited from parent element

103

rgba() Notation

104

Syntax

104

hsla() Notation

105

Syntax

105

Chapter 14: Columns

106

Syntax

106

Examples

106

Simple Example (column-count)

106

Column Width

107

Chapter 15: Comments

109

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download