forked from learning-zone/css-basics
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmiscellaneous.html
92 lines (75 loc) · 2.66 KB
/
miscellaneous.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html>
<head>
<title>Miscellaneous features in CSS</title>
<style>
/**
Tweening in CSS
Short for in-betweening, the process of generating intermediate frames between two images
to give the appearance that the first image evolves smoothly into the second image. Tweening
is a key process in all types of animation, including computer animation. Sophisticated animation
software enables you to identify specific objects in an image and define how they should move and
change during the tweening process.
**/
p {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
/**
Counters ( Counters in CSS are basically variables which can be used for numbering and values of
CSS counters may be incremented by CSS rules. )
1) counter-reset -- Creates or resets a counter
2) counter-increment -- Increments a counter value
3) content -- Inserts generated content
4) counter()/counters() -- function - Adds the value of a counter to an element
**/
body {
counter-reset: section;
}
h3::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
/**
Specificity
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element.
Specificity is based on the matching rules which are composed of different sorts of CSS selectors.
Specificity Hierarchy
1) Inline styles
2) IDs
3) Classes, attributes and pseudo-classes
4) Elements and pseudo-elements
**/
/** Specificity Example **/
#container { /* prority goes to ID selector */
background-color: gold;
padding: 20px;
width: 10%;
}
div {
background-color: red;
padding: 20px;
width: 10%;
}
</style>
</head>
<body>
<!-- CSS Counters -->
<h2>Using CSS Counters:</h1>
<h3>HTML Tutorial</h2>
<h3>CSS Tutorial</h2>
<h3>JavaScript Tutorial</h2>
<div id="container">CSS Specificity Example</div>
<p>Tweening Example</p>
</body>
</html>