cyberweb 0.7.9 → 0.8.17
Sign up to get free protection for your applications and to get access to all the features.
Potentially problematic release.
This version of cyberweb might be problematic. Click here for more details.
- checksums.yaml +4 -4
- data/README.md +242 -141
- data/cyberweb.gemspec +6 -6
- data/doc/README.gen +242 -142
- data/doc/todo/todo_for_the_cyberweb_project.md +13 -0
- data/examples/advanced/animated_colourful_border/animated_colourful_border.cgi +149 -0
- data/examples/advanced/no_right_click.cgi +1 -2
- data/examples/css/changing_border_colours_animation/changing_border_colours_animation.html +134 -0
- data/examples/css/editable_boxes_example/editable_boxes_example.html +75 -0
- data/examples/css/flexbox_example/flexbox_example.html +39 -0
- data/examples/css/keyboard_example/keyboard_example.html +238 -0
- data/examples/css/magic_card/magic_card.html +110 -0
- data/examples/css/overflow_example/overflow_example.html +125 -0
- data/examples/css/planet_example/planet_example.html +34 -0
- data/examples/css/progress_bar_examples/progress_bar_examples.html +316 -0
- data/examples/css/single_row_glow/single_row_glow.html +91 -0
- data/examples/css/slinky_animation/slinky_animation.html +292 -0
- data/examples/html/hbox_and_vbox_example.html +5 -5
- data/examples/javascript_and_jquery/all_in_one_example/all_in_one_example.cgi +38 -0
- data/lib/cyberweb/base/misc.rb +63 -25
- data/lib/cyberweb/cascading_style_sheets/border.css +61 -24
- data/lib/cyberweb/cascading_style_sheets/colours.css +2 -0
- data/lib/cyberweb/cascading_style_sheets/default.css +102 -89
- data/lib/cyberweb/cascading_style_sheets/glow_effects.css +36 -0
- data/lib/cyberweb/cascading_style_sheets/margin.css +11 -7
- data/lib/cyberweb/cascading_style_sheets/misc.css +7 -0
- data/lib/cyberweb/cascading_style_sheets/text_shadow.css +6 -1
- data/lib/cyberweb/generator/cgi.rb +9 -1
- data/lib/cyberweb/html_template/html_template.rb +7 -2
- data/lib/cyberweb/javascript_code/custom_functions.js +33 -2
- data/lib/cyberweb/javascript_code/math.js +0 -0
- data/lib/cyberweb/objectified/html_tags/progress.rb +8 -8
- data/lib/cyberweb/skeleton/README.md +2 -0
- data/lib/cyberweb/skeleton/html_keyboard.md +140 -0
- data/lib/cyberweb/toplevel_methods/is_an_image.rb +18 -0
- data/lib/cyberweb/toplevel_methods/listing.rb +2 -3
- data/lib/cyberweb/toplevel_methods/misc.rb +1 -57
- data/lib/cyberweb/toplevel_methods/registered_ids.rb +53 -37
- data/lib/cyberweb/toplevel_methods/sort_this_array_by_time.rb +65 -0
- data/lib/cyberweb/toplevel_methods/video.rb +32 -19
- data/lib/cyberweb/utility_scripts/images_to_html/images_to_html.rb +78 -49
- data/lib/cyberweb/utility_scripts/remove_this_image_from_that_webpage.rb +125 -0
- data/lib/cyberweb/version/version.rb +2 -2
- data/lib/cyberweb/web_images/map_symbol_to_image_location.rb +28 -8
- data/lib/cyberweb/web_object/effects.rb +19 -0
- data/lib/cyberweb/web_object/html_tags.rb +199 -196
- data/lib/cyberweb/web_object/images.rb +83 -26
- data/lib/cyberweb/web_object/misc.rb +1048 -529
- data/lib/cyberweb/web_object/reset.rb +47 -29
- data/lib/cyberweb/yaml/custom_tags.yml +2 -0
- metadata +52 -52
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<head>
|
|
3
|
+
<title>Overflow examples in CSS</title>
|
|
4
|
+
|
|
5
|
+
<style>
|
|
6
|
+
#overflow1 {
|
|
7
|
+
background: #4CAF50;
|
|
8
|
+
color: white;
|
|
9
|
+
padding: 15px;
|
|
10
|
+
width: 300px;
|
|
11
|
+
height: 120px;
|
|
12
|
+
border: 1px solid #ccc;
|
|
13
|
+
overflow: hidden;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
#overflow2 {
|
|
17
|
+
background: #4CAF50;
|
|
18
|
+
color: white;
|
|
19
|
+
padding: 15px;
|
|
20
|
+
width: 300px;
|
|
21
|
+
height: 120px;
|
|
22
|
+
border: 1px solid #ccc;
|
|
23
|
+
overflow: scroll;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
#overflow3 {
|
|
27
|
+
background: #4CAF50;
|
|
28
|
+
color: white;
|
|
29
|
+
padding: 15px;
|
|
30
|
+
width: 300px;
|
|
31
|
+
height: 120px;
|
|
32
|
+
border: 1px solid #ccc;
|
|
33
|
+
overflow: auto;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
</style>
|
|
38
|
+
</head>
|
|
39
|
+
<body style="padding: 10px; margin: 5px; font-size: 1.5em">
|
|
40
|
+
<h2 style="margin-top: 3px">Overflow examples in CSS</h2>
|
|
41
|
+
|
|
42
|
+
<p>The overflow property controls what happens to content
|
|
43
|
+
that is too big to fit into an area.</p>
|
|
44
|
+
|
|
45
|
+
<div id="overflow1">
|
|
46
|
+
This text is really long and the height of its container is only
|
|
47
|
+
120 pixels. The lower part of this div is simply cut off - the
|
|
48
|
+
overflow is prevented, via the attribute called <b>hidden</b>.
|
|
49
|
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
|
|
50
|
+
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
|
|
51
|
+
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud
|
|
52
|
+
exerci tation ullamcorper suscipit lobortis nisl ut
|
|
53
|
+
aliquip ex ea commodo consequat. Duis autem vel eum
|
|
54
|
+
iriure dolor in hendrerit in vulputate velit esse
|
|
55
|
+
molestie consequat, vel illum dolore eu feugiat nulla
|
|
56
|
+
facilisis at vero eros et accumsan et iusto odio
|
|
57
|
+
dignissim qui blandit praesent luptatum zzril delenit
|
|
58
|
+
augue duis dolore te feugait nulla facilisi. Nam liber
|
|
59
|
+
tempor cum soluta nobis eleifend option congue nihil
|
|
60
|
+
imperdiet doming id quod mazim placerat facer possim
|
|
61
|
+
assum. Typi non habent claritatem insitam; est usus
|
|
62
|
+
legentis in iis qui facit eorum claritatem.
|
|
63
|
+
</div>
|
|
64
|
+
|
|
65
|
+
<div>
|
|
66
|
+
The following values are possible for the
|
|
67
|
+
<b>overflow</b> property:<br><br>
|
|
68
|
+
|
|
69
|
+
visible - This is the default. The overflow is not
|
|
70
|
+
clipped. The content renders outside the element's box
|
|
71
|
+
<br>
|
|
72
|
+
|
|
73
|
+
hidden - The overflow is clipped, and the rest of the content will be invisible
|
|
74
|
+
<br>
|
|
75
|
+
|
|
76
|
+
scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
|
|
77
|
+
<br>
|
|
78
|
+
|
|
79
|
+
auto - Similar to scroll, but it adds scrollbars only when necessary
|
|
80
|
+
<br>
|
|
81
|
+
|
|
82
|
+
</div>
|
|
83
|
+
|
|
84
|
+
<div id="overflow2">
|
|
85
|
+
This text is really long and the height of its container is only
|
|
86
|
+
120 pixels. The lower part of this div is simply cut off - the
|
|
87
|
+
overflow is prevented, via the attribute called <b>hidden</b>.
|
|
88
|
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
|
|
89
|
+
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
|
|
90
|
+
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud
|
|
91
|
+
exerci tation ullamcorper suscipit lobortis nisl ut
|
|
92
|
+
aliquip ex ea commodo consequat. Duis autem vel eum
|
|
93
|
+
iriure dolor in hendrerit in vulputate velit esse
|
|
94
|
+
molestie consequat, vel illum dolore eu feugiat nulla
|
|
95
|
+
facilisis at vero eros et accumsan et iusto odio
|
|
96
|
+
dignissim qui blandit praesent luptatum zzril delenit
|
|
97
|
+
augue duis dolore te feugait nulla facilisi. Nam liber
|
|
98
|
+
tempor cum soluta nobis eleifend option congue nihil
|
|
99
|
+
imperdiet doming id quod mazim placerat facer possim
|
|
100
|
+
assum. Typi non habent claritatem insitam; est usus
|
|
101
|
+
legentis in iis qui facit eorum claritatem.
|
|
102
|
+
</div>
|
|
103
|
+
|
|
104
|
+
<div id="overflow3">
|
|
105
|
+
This text is really long and the height of its container is only
|
|
106
|
+
120 pixels. The lower part of this div is simply cut off - the
|
|
107
|
+
overflow is prevented, via the attribute called <b>hidden</b>.
|
|
108
|
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
|
|
109
|
+
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
|
|
110
|
+
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud
|
|
111
|
+
exerci tation ullamcorper suscipit lobortis nisl ut
|
|
112
|
+
aliquip ex ea commodo consequat. Duis autem vel eum
|
|
113
|
+
iriure dolor in hendrerit in vulputate velit esse
|
|
114
|
+
molestie consequat, vel illum dolore eu feugiat nulla
|
|
115
|
+
facilisis at vero eros et accumsan et iusto odio
|
|
116
|
+
dignissim qui blandit praesent luptatum zzril delenit
|
|
117
|
+
augue duis dolore te feugait nulla facilisi. Nam liber
|
|
118
|
+
tempor cum soluta nobis eleifend option congue nihil
|
|
119
|
+
imperdiet doming id quod mazim placerat facer possim
|
|
120
|
+
assum. Typi non habent claritatem insitam; est usus
|
|
121
|
+
legentis in iis qui facit eorum claritatem.
|
|
122
|
+
</div>
|
|
123
|
+
|
|
124
|
+
</body>
|
|
125
|
+
</html>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<title>A planet</title>
|
|
4
|
+
<style>
|
|
5
|
+
|
|
6
|
+
body {
|
|
7
|
+
background-color: #000;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
div {
|
|
11
|
+
position: absolute;
|
|
12
|
+
top: calc(50% - 150px);
|
|
13
|
+
left: calc(50% - 250px);
|
|
14
|
+
width: 300px;
|
|
15
|
+
height: 300px;
|
|
16
|
+
border-radius: 50%;
|
|
17
|
+
box-shadow:
|
|
18
|
+
inset 0 0 50px #fff,
|
|
19
|
+
inset 20px 0 80px #f0f,
|
|
20
|
+
inset -20px 0 80px #0ff,
|
|
21
|
+
inset 20px 0 300px #f0f,
|
|
22
|
+
inset -20px 0 300px #0ff,
|
|
23
|
+
0 0 50px #fff,
|
|
24
|
+
-10px 0 80px #f0f,
|
|
25
|
+
10px 0 80px #0ff;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
</style>
|
|
29
|
+
</head>
|
|
30
|
+
<body>
|
|
31
|
+
|
|
32
|
+
<div class="fancy_glow"></div>
|
|
33
|
+
</body>
|
|
34
|
+
</html>
|
|
@@ -0,0 +1,316 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<title>Progress Bar Examples</title>
|
|
4
|
+
<style>
|
|
5
|
+
* {
|
|
6
|
+
margin:0; padding:0;
|
|
7
|
+
box-sizing: border-box;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
body {
|
|
11
|
+
margin: 50px auto 0;
|
|
12
|
+
max-width: 800px;
|
|
13
|
+
|
|
14
|
+
font-family: "Expletus Sans", sans-serif;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
li {
|
|
18
|
+
width: 50%;
|
|
19
|
+
float: left;
|
|
20
|
+
list-style-type: none;
|
|
21
|
+
padding-right: 5.3333333%;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
li:nth-child(even) { margin-bottom: 5em;}
|
|
25
|
+
|
|
26
|
+
h2 {
|
|
27
|
+
margin: 0 0 1.5em;
|
|
28
|
+
border-bottom: 1px solid #ccc;
|
|
29
|
+
|
|
30
|
+
padding: 0 0 .25em;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* Styling an indeterminate progress bar */
|
|
34
|
+
|
|
35
|
+
progress:not(value) {
|
|
36
|
+
/* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* Styling the determinate progress element */
|
|
40
|
+
|
|
41
|
+
progress[value] {
|
|
42
|
+
/* Get rid of the default appearance */
|
|
43
|
+
appearance: none;
|
|
44
|
+
|
|
45
|
+
/* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
|
|
46
|
+
border: none;
|
|
47
|
+
|
|
48
|
+
/* Add dimensions */
|
|
49
|
+
width: 100%; height: 20px;
|
|
50
|
+
|
|
51
|
+
/* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */
|
|
52
|
+
background-color: whiteSmoke;
|
|
53
|
+
border-radius: 3px;
|
|
54
|
+
box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
|
|
55
|
+
|
|
56
|
+
/* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
|
|
57
|
+
color: royalblue;
|
|
58
|
+
|
|
59
|
+
position: relative;
|
|
60
|
+
margin: 0 0 1.5em;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
progress[value]::-webkit-progress_bar {
|
|
64
|
+
background-color: whiteSmoke;
|
|
65
|
+
border-radius: 3px;
|
|
66
|
+
box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
progress[value]::-webkit-progress-value {
|
|
70
|
+
position: relative;
|
|
71
|
+
|
|
72
|
+
background-size: 35px 20px, 100% 100%, 100% 100%;
|
|
73
|
+
border-radius:3px;
|
|
74
|
+
|
|
75
|
+
/* Let's animate this */
|
|
76
|
+
animation: animate-stripes 5s linear infinite;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
@keyframes animate-stripes { 100% { background-position: -100px 0; } }
|
|
80
|
+
|
|
81
|
+
/* Let's spice up things little bit by using pseudo elements. */
|
|
82
|
+
|
|
83
|
+
progress[value]::-webkit-progress-value:after {
|
|
84
|
+
/* Only webkit/blink browsers understand pseudo elements on pseudo classes. A rare phenomenon! */
|
|
85
|
+
content: '';
|
|
86
|
+
position: absolute;
|
|
87
|
+
|
|
88
|
+
width:5px; height:5px;
|
|
89
|
+
top:7px; right:7px;
|
|
90
|
+
|
|
91
|
+
background-color: white;
|
|
92
|
+
border-radius: 100%;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
progress[value]::-moz-progress_bar {
|
|
97
|
+
/* Gradient background with Stripes */
|
|
98
|
+
background-image:
|
|
99
|
+
-moz-linear-gradient( 135deg,
|
|
100
|
+
transparent,
|
|
101
|
+
transparent 33%,
|
|
102
|
+
rgba(0,0,0,.1) 33%,
|
|
103
|
+
rgba(0,0,0,.1) 66%,
|
|
104
|
+
transparent 66%),
|
|
105
|
+
-moz-linear-gradient( top,
|
|
106
|
+
rgba(255, 255, 255, .25),
|
|
107
|
+
rgba(0,0,0,.2)),
|
|
108
|
+
-moz-linear-gradient( left, #09c, #f44);
|
|
109
|
+
|
|
110
|
+
background-size: 35px 20px, 100% 100%, 100% 100%;
|
|
111
|
+
border-radius:3px;
|
|
112
|
+
|
|
113
|
+
/* Firefox doesn't support CSS3 keyframe animations on progress element. Hence, we did not include animate-stripes in this code block */
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
/* Fallback technique styles */
|
|
117
|
+
.progress_bar {
|
|
118
|
+
background-color: whiteSmoke;
|
|
119
|
+
border-radius: 3px;
|
|
120
|
+
box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
|
|
121
|
+
|
|
122
|
+
/* Dimensions should be similar to the parent progress element. */
|
|
123
|
+
width: 100%; height:20px;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.progress_bar span {
|
|
127
|
+
background-color: royalblue;
|
|
128
|
+
border-radius: 3px;
|
|
129
|
+
|
|
130
|
+
display: block;
|
|
131
|
+
text-indent: -9999px;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
p[data-value] {
|
|
135
|
+
|
|
136
|
+
position: relative;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/* The percentage will automatically fall in place as soon as we make the width fluid. Now making widths fluid. */
|
|
140
|
+
|
|
141
|
+
p[data-value]:after {
|
|
142
|
+
content: attr(data-value) '%';
|
|
143
|
+
position: absolute; right:0;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
.html5::-webkit-progress-value,
|
|
151
|
+
.python::-webkit-progress-value {
|
|
152
|
+
/* Gradient background with Stripes */
|
|
153
|
+
background-image:
|
|
154
|
+
-webkit-linear-gradient( 135deg,
|
|
155
|
+
transparent,
|
|
156
|
+
transparent 33%,
|
|
157
|
+
rgba(0,0,0,.1) 33%,
|
|
158
|
+
rgba(0,0,0,.1) 66%,
|
|
159
|
+
transparent 66%),
|
|
160
|
+
-webkit-linear-gradient( top,
|
|
161
|
+
rgba(255, 255, 255, .25),
|
|
162
|
+
rgba(0,0,0,.2)),
|
|
163
|
+
-webkit-linear-gradient( left, #09c, #f44);
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.css3::-webkit-progress-value,
|
|
167
|
+
.php::-webkit-progress-value
|
|
168
|
+
{
|
|
169
|
+
/* Gradient background with Stripes */
|
|
170
|
+
background-image:
|
|
171
|
+
-webkit-linear-gradient( 135deg,
|
|
172
|
+
transparent,
|
|
173
|
+
transparent 33%,
|
|
174
|
+
rgba(0,0,0,.1) 33%,
|
|
175
|
+
rgba(0,0,0,.1) 66%,
|
|
176
|
+
transparent 66%),
|
|
177
|
+
-webkit-linear-gradient( top,
|
|
178
|
+
rgba(255, 255, 255, .25),
|
|
179
|
+
rgba(0,0,0,.2)),
|
|
180
|
+
-webkit-linear-gradient( left, #09c, #ff0);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.jquery::-webkit-progress-value,
|
|
184
|
+
.node-js::-webkit-progress-value
|
|
185
|
+
{
|
|
186
|
+
/* Gradient background with Stripes */
|
|
187
|
+
background-image:
|
|
188
|
+
-webkit-linear-gradient( 135deg,
|
|
189
|
+
transparent,
|
|
190
|
+
transparent 33%,
|
|
191
|
+
rgba(0,0,0,.1) 33%,
|
|
192
|
+
rgba(0,0,0,.1) 66%,
|
|
193
|
+
transparent 66%),
|
|
194
|
+
-webkit-linear-gradient( top,
|
|
195
|
+
rgba(255, 255, 255, .25),
|
|
196
|
+
rgba(0,0,0,.2)),
|
|
197
|
+
-webkit-linear-gradient( left, #09c, #690);
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
/* Similarly, for Mozillaa. Unfortunately combining the styles for different browsers will break every other browser. Hence, we need a separate block. */
|
|
201
|
+
|
|
202
|
+
.html5::-moz-progress_bar,
|
|
203
|
+
.php::-moz-progress_bar {
|
|
204
|
+
/* Gradient background with Stripes */
|
|
205
|
+
background-image:
|
|
206
|
+
-moz-linear-gradient( 135deg,
|
|
207
|
+
transparent,
|
|
208
|
+
transparent 33%,
|
|
209
|
+
rgba(0,0,0,.1) 33%,
|
|
210
|
+
rgba(0,0,0,.1) 66%,
|
|
211
|
+
transparent 66%),
|
|
212
|
+
-moz-linear-gradient( top,
|
|
213
|
+
rgba(255, 255, 255, .25),
|
|
214
|
+
rgba(0,0,0,.2)),
|
|
215
|
+
-moz-linear-gradient( left, #09c, #f44);
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.css3::-moz-progress_bar,
|
|
219
|
+
.php::-moz-progress_bar {
|
|
220
|
+
{
|
|
221
|
+
/* Gradient background with Stripes */
|
|
222
|
+
background-image:
|
|
223
|
+
-moz-linear-gradient( 135deg,
|
|
224
|
+
transparent,
|
|
225
|
+
transparent 33%,
|
|
226
|
+
rgba(0,0,0,.1) 33%,
|
|
227
|
+
rgba(0,0,0,.1) 66%,
|
|
228
|
+
transparent 66%),
|
|
229
|
+
-moz-linear-gradient( top,
|
|
230
|
+
rgba(255, 255, 255, .25),
|
|
231
|
+
rgba(0,0,0,.2)),
|
|
232
|
+
-moz-linear-gradient( left, #09c, #ff0);
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.jquery::-moz-progress_bar,
|
|
236
|
+
.node-js::-moz-progress_bar {
|
|
237
|
+
/* Gradient background with Stripes */
|
|
238
|
+
background-image:
|
|
239
|
+
-moz-linear-gradient( 135deg,
|
|
240
|
+
transparent,
|
|
241
|
+
transparent 33%,
|
|
242
|
+
rgba(0,0,0,.1) 33%,
|
|
243
|
+
rgba(0,0,0,.1) 66%,
|
|
244
|
+
transparent 66%),
|
|
245
|
+
-moz-linear-gradient( top,
|
|
246
|
+
rgba(255, 255, 255, .25),
|
|
247
|
+
rgba(0,0,0,.2)),
|
|
248
|
+
-moz-linear-gradient( left, #09c, #690);
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
</style>
|
|
252
|
+
</head>
|
|
253
|
+
<body>
|
|
254
|
+
|
|
255
|
+
<ul>
|
|
256
|
+
<li>
|
|
257
|
+
<h2>Left Side</h2>
|
|
258
|
+
|
|
259
|
+
<p style="width: 80%" data-value="80">HTML5</p>
|
|
260
|
+
<progress max="100" value="80" class="html5">
|
|
261
|
+
<div class="progress_bar">
|
|
262
|
+
<span style="width: 80%">80%</span>
|
|
263
|
+
</div>
|
|
264
|
+
</progress>
|
|
265
|
+
|
|
266
|
+
<p style="width:60%" data-value="60">CSS3</p>
|
|
267
|
+
<progress max="100" value="60" class="css3">
|
|
268
|
+
<div class="progress_bar">
|
|
269
|
+
<span style="width: 60%">60%</span>
|
|
270
|
+
</div>
|
|
271
|
+
</progress>
|
|
272
|
+
|
|
273
|
+
<!-- jQuery -->
|
|
274
|
+
<p style="width:50%" data-value="50">jQuery</p>
|
|
275
|
+
<progress max="100" value="50" class="jquery">
|
|
276
|
+
|
|
277
|
+
<div class="progress_bar">
|
|
278
|
+
<span style="width: 50%">50%</span>
|
|
279
|
+
</div>
|
|
280
|
+
</progress>
|
|
281
|
+
|
|
282
|
+
</li>
|
|
283
|
+
<li>
|
|
284
|
+
<h2>Right Side</h2>
|
|
285
|
+
|
|
286
|
+
<!-- Python -->
|
|
287
|
+
<p style="width:75%" data-value="75">Python</p>
|
|
288
|
+
<progress max="100" value="75" class="python">
|
|
289
|
+
<div class="progress_bar">
|
|
290
|
+
<span style="width: 75%">75%</span>
|
|
291
|
+
</div>
|
|
292
|
+
</progress>
|
|
293
|
+
|
|
294
|
+
<!-- PHP -->
|
|
295
|
+
<p style="width:65%" data-value="65">PHP</p>
|
|
296
|
+
<progress max="100" value="65" class="php">
|
|
297
|
+
|
|
298
|
+
<div class="progress_bar">
|
|
299
|
+
<span style="width: 65%">65%</span>
|
|
300
|
+
</div>
|
|
301
|
+
</progress>
|
|
302
|
+
|
|
303
|
+
<!-- Node.js -->
|
|
304
|
+
<p style="width:35%" data-value="35">Node.js</p>
|
|
305
|
+
<progress max="100" value="35" class="node-js">
|
|
306
|
+
|
|
307
|
+
<div class="progress_bar">
|
|
308
|
+
<span style="width: 35%">35%</span>
|
|
309
|
+
</div>
|
|
310
|
+
</progress>
|
|
311
|
+
|
|
312
|
+
</li>
|
|
313
|
+
</ul>
|
|
314
|
+
|
|
315
|
+
</body>
|
|
316
|
+
</html>
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<title>Single Row Glow</title>
|
|
4
|
+
<style>
|
|
5
|
+
|
|
6
|
+
body{
|
|
7
|
+
margin:0;
|
|
8
|
+
padding:0;
|
|
9
|
+
background:rgba(0,0,0,.9);
|
|
10
|
+
}
|
|
11
|
+
ul{
|
|
12
|
+
position:absolute;
|
|
13
|
+
top: 50%;
|
|
14
|
+
left:50%;
|
|
15
|
+
transform: translate(-50%,-50%);
|
|
16
|
+
margin:0;
|
|
17
|
+
padding:0;
|
|
18
|
+
display:flex;
|
|
19
|
+
}
|
|
20
|
+
ul li{
|
|
21
|
+
list-style:none;
|
|
22
|
+
width: 40px;
|
|
23
|
+
height: 40px;
|
|
24
|
+
background:#fff;
|
|
25
|
+
border-radius: 50%;
|
|
26
|
+
animation: single_row_glow_animation 3.5s ease-in-out infinite;
|
|
27
|
+
}
|
|
28
|
+
@keyframes single_row_glow_animation
|
|
29
|
+
{
|
|
30
|
+
0% , 40% , 100%
|
|
31
|
+
{
|
|
32
|
+
transform:scale(0.2);
|
|
33
|
+
}
|
|
34
|
+
20%{
|
|
35
|
+
transform:scale(0.5);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
ul li:nth-child(1){
|
|
40
|
+
animation-delay:-1.4s;
|
|
41
|
+
background:#ffff00;
|
|
42
|
+
box-shadow:0 0 50px #ffff00;
|
|
43
|
+
}
|
|
44
|
+
ul li:nth-child(2){
|
|
45
|
+
animation-delay:-1.2s;
|
|
46
|
+
background:#76ff03;
|
|
47
|
+
box-shadow:0 0 50px #76ff03;
|
|
48
|
+
}
|
|
49
|
+
ul li:nth-child(3){
|
|
50
|
+
animation-delay:-1s;
|
|
51
|
+
background:#f06292;
|
|
52
|
+
box-shadow:0 0 50px #f06292;
|
|
53
|
+
}
|
|
54
|
+
ul li:nth-child(4){
|
|
55
|
+
animation-delay:-0.8s;
|
|
56
|
+
background:#4fc3f7;
|
|
57
|
+
box-shadow:0 0 50px #4fc3f7;
|
|
58
|
+
|
|
59
|
+
}
|
|
60
|
+
ul li:nth-child(5){
|
|
61
|
+
animation-delay:-0.6s;
|
|
62
|
+
background:#ba68c8;
|
|
63
|
+
box-shadow:0 0 50px #ba68c8;
|
|
64
|
+
}
|
|
65
|
+
ul li:nth-child(6){
|
|
66
|
+
animation-delay:-0.4s;
|
|
67
|
+
background:#f57c00;
|
|
68
|
+
box-shadow:0 0 50px #f57c00;
|
|
69
|
+
}
|
|
70
|
+
ul li:nth-child(7){
|
|
71
|
+
animation-delay:-0.2s;
|
|
72
|
+
background:#673ab7;
|
|
73
|
+
box-shadow:0 0 50px #673ab7;
|
|
74
|
+
}
|
|
75
|
+
</style>
|
|
76
|
+
</head>
|
|
77
|
+
<body>
|
|
78
|
+
|
|
79
|
+
<div>
|
|
80
|
+
<ul>
|
|
81
|
+
<li></li>
|
|
82
|
+
<li></li>
|
|
83
|
+
<li></li>
|
|
84
|
+
<li></li>
|
|
85
|
+
<li></li>
|
|
86
|
+
<li></li>
|
|
87
|
+
<li></li>
|
|
88
|
+
</ul>
|
|
89
|
+
</div>
|
|
90
|
+
</body>
|
|
91
|
+
</html>
|