-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.css
144 lines (131 loc) · 10.3 KB
/
index.css
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
*, *::before, *::after { /* For Default values*/
box-sizing: border-box; /* Includes padding and border in elements total width an d height */
font-family: 'Poppins', sans-serif; /* font used (with metalink in HTML) */
}
body { /* body (essentially the background) */
background: linear-gradient(to right, rgb(177, 178, 189), rgb(165, 168, 149)); /* gradient from right grey to yellow*/
display: flex; /* to center the clock, first display to flex*/
min-height: 100vh; /* set the minimum height to 100vh so we can position the clock*/
justify-content: center; /* center the clock in the middle of the screen (at top before align-items */
align-items: center; /* then align-items center to put the clock exactly in the middle of the screen. */
overflow: hidden; /* and get rid of the scrollbar*/
}
.clock { /* for the clock itself*/
position: relative; /* by setting the clock to relative, the numbers and hands will be set absolute to this parent*/
width: 300px; /* shape of clock = equal width and height and 50% border radius*/
height: 300px;
border-radius: 50%;
border: 2px solid rgba(94, 96, 102, 0.5);
box-shadow: 0 10px 20px -6px rgba(175, 175, 175, .5); /* shadow |Horiz offset|vert offset|blur|spread|color(rgba for transparentcy|*/
background-color: rgba(255,255,255, .90); /* partially transparent white*/
}
.clock > .number { /* For each number in the clock (note that this is a child of .clock for positioning*/
position: absolute; /* for each number the position will be position absolutely relative to the parent .clock which we want number positions*/
/* For alignment of numbers around the clock: */
width: 100%; /* with width and height set to 100%, it is 100% of the parent .clock... */
height: 100%; /* ... so this will be a square over the parent clock element which we can rotate for each number */
text-align: center; /* center the text in the middle of the clock so when the square rotates, it will position correctly in a circle*/
/* for rotation of numbers: (example: transform: rotate(90deg)*/
/* However, because we have 12 numbers and we dont want to do each individually, you can use a variable */
transform: rotate(var(--rotation)); /* so we use transform, and rotate using a --rotation variable....*/
--rotation: 0; /*... and set that variable to 0 to make sure we start at the 12 o'clock point...*/
/*...from this point, we can set each number to the correct degree around the clock!*/
}
.clock > .number1 { /* so when you select .number1, you will be able*/
--rotation: 30deg;
font-size: 1rem;
padding-top: 10px;
}
.clock > .number2 {
--rotation: 60deg;
font-size: 1rem;
padding-top: 10px;
}
.clock > .number3 {
--rotation: 90deg;
font-size: 1.5rem;
}
.clock > .number4 {
--rotation: 120deg;
font-size: 1rem;
padding-top: 10px;
}
.clock > .number5 {
--rotation: 150deg;
font-size: 1rem;
padding-top: 10px;
}
.clock > .number6 {
--rotation: 180deg;
font-size: 1.5rem;
}
.clock > .number7 {
--rotation: 210deg;
font-size: 1rem;
padding-top: 10px;
}
.clock > .number8 {
--rotation: 240deg;
font-size: 1rem;
padding-top: 10px;
}
.clock > .number9 {
--rotation: 270deg;
font-size: 1.5rem;
}
.clock > .number10 {
--rotation: 300deg;
font-size: 1rem;
padding-top: 10px;
}
.clock > .number11 {
--rotation: 330deg;
font-size: 1rem;
padding-top: 10px;
}
.clock > .number12 {
--rotation: 0;
font-size: 1.5rem;
}
.clock > .hand { /* For each hand (hour, minute, second... */
position: absolute; /* hands will be positioned absolute to the clock */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
bottom: 50%; /* for each hand, the bottom will be at the bottom*/
left: 50%; /* and set left to 50% for center alignment*/
/* for how we want each hand to rotate: */
transform: translateX(-50%) rotate(calc(var(--rotation) * 1deg)); /* Because at this point the hand will show off-center, you transform using translateX, it translates the object by */
/* ...50% of its width backwards. To make sure it rotates, we want to use the rotation variable and use calc * 1deg */
--rotation: 0; /* rotation set default to 0 so it shows...*/
transform-origin: bottom; /* to establish a point for the hands to rotate around, use transform-origin to say where you want the transform to be applied to, namely the bottom*/
z-index: 10; /* to ake sure the hands are always on top of the other elements, set to 10.*/
}
.clock > .hand.hour {
width: 6px; /* hour hand width*/
height: 25%;
background: black; /* hour hand height (i.e. length from center to outer clock) */
}
.clock > .hand.second {
width: 2px; /* second hand width*/
height: 35%; /* second hand height (i.e. length from center to outer clock) */
z-index: 1; /* set z-index over minute, under hour*/
background: rgb(97, 104, 119);
}
.clock > .hand.minute {
width: 4px; /* minute hand width*/
height: 40%; /* minute hand height (i.e. length from center to outer clock) */
z-index: 0; /* set z-index under hour and second*/
background: rgb(153, 125, 0);
}
.clock::after { /* to create a circular element at the middle of the clock:*/
content: ''; /* add a new empty element to the DOM that can be styled */
position: absolute;
background-color: black;
z-index: 11; /* setting z-index to 11 makes sure that this shows above all hands */
height: 12px; /* height, width, and border radius create the circle */
width: 12px;
border-radius: 50%;
top: 50%; /* top and left 50% center the new element in the middle of the clock */
left: 50%;
transform: translate(-50%, -50%); /* centers the round element so that it is perfectly center */
}