Skip to content

Commit 85fd61a

Browse files
author
Ahmad Nassri
committed
feat(performance): include performance examples
1 parent ca1e7ea commit 85fd61a

21 files changed

+42
-43
lines changed

‎README.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
- ✔ Simple CSS
1010
- ✔ Generated Content
1111
- ✔ Cross Browser Support
12-
- ❓ Performance
12+
- ✖ Performance
1313
1414
### [CSS Shapes](shapes)
1515
@@ -20,7 +20,7 @@
2020
- ✖ Simple CSS
2121
- ✖ Generated Content
2222
- ✖ Cross Browser Support
23-
- ❓ Performance
23+
- ✖ Performance
2424
2525
### [Gradient Background Image](gradient)
2626
@@ -31,7 +31,7 @@
3131
- ✔ Simple CSS
3232
- ✔ Generated Content
3333
- ✖ Cross Browser Support
34-
- ❓ Performance
34+
- ✔ Performance
3535
3636
### [SVG Background Image](svg)
3737
@@ -42,7 +42,7 @@
4242
- ❓ Simple CSS
4343
- ✔ Generated Content
4444
- ✔ Cross Browser Support
45-
- ❓ Performance
45+
- ✔ Performance
4646
4747
### [SVG Mask](svg-mask)
4848
@@ -53,7 +53,7 @@
5353
- ✖ Simple CSS
5454
- ✖ Generated Content
5555
- ✖ Cross Browser Support
56-
- ❓ Performance
56+
- ✖ Performance
5757
5858
### [CSS3 2D Transforms](transforms)
5959
@@ -64,4 +64,4 @@
6464
- ✖ Simple CSS
6565
- ✖ Generated Content
6666
- ✖ Cross Browser Support
67-
- ❓ Performance
67+
- ✖ Performance

‎assets/image.jpg

42.2 KB
Loading

‎layout.css renamed to ‎assets/layout.css

+10-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
body {
22
background-color: #607D8B;
3+
color: white;
4+
font-family: "Lucida Console", Monaco, monospace;
35
}
46

5-
h1, h2 {
6-
color: white;
7+
a, a:visited {
8+
color: inherit;
9+
text-decoration: none;
10+
}
11+
12+
h1, h2, h3 {
713
text-align: center;
814
font-weight: 400;
9-
font-family: "Lucida Console", Monaco, monospace;
1015
}
1116

1217
.demo {
@@ -54,7 +59,7 @@ section footer {
5459
.image.above section header,
5560
.image.below section footer {
5661
height: calc(var(--height) * 2);
57-
background-image: url(https://unsplash.it/500/500?image=1030);
62+
background-image: url(image.jpg);
5863
background-size: cover;
5964
background-position: bottom;
6065
}
@@ -91,4 +96,4 @@ section footer {
9196
.vertical {
9297
--height: 300px;
9398
--width: 100px;
94-
}
99+
}

‎borders/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -85,9 +85,9 @@ section::after {
8585

8686
[Supported on all browsers](http://caniuse.com/#search=border-color)
8787

88-
## ❓ Performance
88+
## ✖ Performance
8989

90-
> **TODO**
90+
![](performance.png)
9191

9292
## Demo
9393

‎borders/index.html

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
21
<!DOCTYPE html>
32
<html>
43
<head>
54
<meta charset="UTF-8"/>
65
<title>Diagonal Separator [Borders]</title>
76

87
<link rel="stylesheet" href="style.css"/>
9-
<link rel="stylesheet" href="../layout.css"/>
8+
<link rel="stylesheet" href="../assets/layout.css"/>
109
</head>
1110

1211
<body>
13-
<h1>Diagonal Separator [Borders]</h1>
12+
<h2>Diagonal Separator [Borders]</h2>
1413

1514
<div class="demo plain">
1615
<section>

‎borders/performance.png

74.3 KB
Loading

‎gradient/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,9 @@ section::after {
7070

7171
> Supported in all major browsers, with the exception of `Opera Mini`.
7272
73-
## ❓ Performance
73+
## ✔ Performance
7474

75-
> **TODO**
75+
![](performance.png)
7676

7777
## Demo
7878

‎gradient/index.html

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
21
<!DOCTYPE html>
32
<html>
43
<head>
54
<meta charset="UTF-8"/>
65
<title>Diagonal Separator [Gradient Background Image]</title>
76

87
<link rel="stylesheet" href="style.css"/>
9-
<link rel="stylesheet" href="../layout.css"/>
8+
<link rel="stylesheet" href="../assets/layout.css"/>
109
</head>
1110

1211
<body>
13-
<h1>Diagonal Separator [Gradient Background Image]</h1>
12+
<h2>Diagonal Separator [Gradient Background Image]</h2>
1413

1514
<div class="demo plain">
1615
<section>

‎gradient/performance.png

69.7 KB
Loading

‎shapes/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979

8080
[Partial support](http://caniuse.com/#feat=css-clip-path)
8181

82-
## ❓ Performance
82+
## ✖ Performance
8383

8484
> **TODO**
8585

‎shapes/index.html

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
21
<!DOCTYPE html>
32
<html>
43
<head>
54
<meta charset="UTF-8"/>
65
<title>Diagonal Separator [CSS Shapes]</title>
76

87
<link rel="stylesheet" href="style.css"/>
9-
<link rel="stylesheet" href="../layout.css"/>
8+
<link rel="stylesheet" href="../assets/layout.css"/>
109
</head>
1110

1211
<body>
13-
<h1>Diagonal Separator [CSS Shapes]</h1>
12+
<h2>Diagonal Separator [CSS Shapes]</h2>
1413

1514
<div class="demo plain">
1615
<section>

‎shapes/performance.png

70.7 KB
Loading

‎svg-mask/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -79,9 +79,9 @@
7979
- consult the [browser support matrix](http://caniuse.com/#feat=svg-fragment) before using.
8080
- alternatively, you can just use one triangle svg and manualy control the position of the transparent separator
8181

82-
## ❓ Performance
82+
## ✖ Performance
8383

84-
> **TODO**
84+
![](performance.png)
8585

8686
## Demo
8787

‎svg-mask/index.html

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
21
<!DOCTYPE html>
32
<html>
43
<head>
54
<meta charset="UTF-8"/>
65
<title>Diagonal Separator [SVG Mask]</title>
76

87
<link rel="stylesheet" href="style.css"/>
9-
<link rel="stylesheet" href="../layout.css"/>
8+
<link rel="stylesheet" href="../assets/layout.css"/>
109
</head>
1110

1211
<body>
13-
<h1>Diagonal Separator [SVG Mask]</h1>
12+
<h2>Diagonal Separator [SVG Mask]</h2>
1413

1514
<div class="demo plain">
1615
<section>

‎svg-mask/performance.png

80.6 KB
Loading

‎svg/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -86,9 +86,9 @@ section::after {
8686

8787
[Supported on all browsers](http://caniuse.com/#feat=svg-css)
8888

89-
## ❓ Performance
89+
## ✔ Performance
9090

91-
> **TODO**
91+
![](performance.png)
9292

9393
## Demo
9494

‎svg/index.html

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
1-
21
<!DOCTYPE html>
32
<html>
43
<head>
54
<meta charset="UTF-8"/>
65
<title>Diagonal Separator [SVG Background Image]</title>
76

87
<link rel="stylesheet" href="style.css"/>
9-
<link rel="stylesheet" href="../layout.css"/>
8+
<link rel="stylesheet" href="../assets/layout.css"/>
109
</head>
1110

1211
<body>
13-
<h1>Diagonal Separator [SVG Background Image]</h1>
12+
<h2>Diagonal Separator [SVG Background Image]</h2>
1413

15-
<h2>(External)</h2>
14+
<h3>(External)</h3>
1615

1716
<div class="demo plain">
1817
<section>
@@ -28,7 +27,7 @@ <h2>(External)</h2>
2827
</section>
2928
</div>
3029

31-
<h2>(SVG Shadow)</h2>
30+
<h3>(SVG Shadow)</h3>
3231

3332
<div class="demo plain">
3433
<section>
@@ -44,7 +43,7 @@ <h2>(SVG Shadow)</h2>
4443
</section>
4544
</div>
4645

47-
<h2>(Data URI)</h2>
46+
<h3>(Data URI)</h3>
4847

4948
<div class="demo plain">
5049
<section>

‎svg/performance.png

81.9 KB
Loading

‎transforms/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -101,9 +101,9 @@
101101

102102
> Supported in all major browsers, with the exception of `Opera Mini`.
103103
104-
## ❓ Performance
104+
## ✖ Performance
105105

106-
> **TODO**
106+
![](performance.png)
107107

108108
## Demo
109109

‎transforms/index.html

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
21
<!DOCTYPE html>
32
<html>
43
<head>
54
<meta charset="UTF-8"/>
65
<title>Diagonal Separator [CSS3 2D Transforms]</title>
76

87
<link rel="stylesheet" href="style.css"/>
9-
<link rel="stylesheet" href="../layout.css"/>
8+
<link rel="stylesheet" href="../assets/layout.css"/>
109
</head>
1110

1211
<body>
13-
<h1>Diagonal Separator [CSS3 2D Transforms]</h1>
12+
<h2>Diagonal Separator [CSS3 2D Transforms]</h2>
1413

1514
<div class="demo plain">
1615
<section>

‎transforms/performance.png

70.6 KB
Loading

0 commit comments

Comments
 (0)