@@ -5,13 +5,14 @@ Recreating all the flags of the nations of the world in pure CSS, using only one
5
5
6
6
You can see it live on [ https://pixelastic.github.io/css-flags/ ] ( https://pixelastic.github.io/css-flags/ )
7
7
8
- This side-project has no real-world application, it was just an exercice to push
8
+ This side-project has no real-world application, it was just an exercise to push
9
9
the boundaries of what I know about CSS. Trying to use the language to do things
10
- it wasn't meant to do in the first place teached me a lot about the language.
10
+ it wasn't meant to do in the first place taught me a lot about the language.
11
11
12
12
## Running the project locally
13
13
14
14
``` sh
15
+ bundle install
15
16
npm install
16
17
npm run serve
17
18
```
@@ -54,7 +55,7 @@ already exists in the UTF8 table, so I just have to grab them from existing
54
55
fonts (or use [ utf8icons.com] [ 7 ] ).
55
56
56
57
But more often, I had to use Vexilla Mundi. The website provides nice png images
57
- of all the symbols. Unfortunatly , the symbols they provide are already colored,
58
+ of all the symbols. Unfortunately , the symbols they provide are already colored,
58
59
and I needed them black to use in the font so I was able to define the color
59
60
myself.
60
61
@@ -103,7 +104,7 @@ longer user percentage values, I need real, absolute, pixel values.
103
104
104
105
[ http://github.com/pixelastic/img2css/ ] ( http://github.com/pixelastic/img2css/ )
105
106
106
- Commanline tool to convert any image (jpg or png) to full CSS. This will
107
+ Commandline tool to convert any image (jpg or png) to full CSS. This will
107
108
replicate all pixels of the initial image using numerous ` box-shadows ` .
108
109
109
110
This works wel but results in really heavy generated CSS (several MB), so
@@ -130,7 +131,7 @@ Here is an incomplete list of the tricks I had to use:
130
131
### Invisible text-shadow
131
132
132
133
I sometimes put an invisible symbol in an ` after ` or ` before ` element (through
133
- ` color: transparent ` ) and positionned it at ` top:0; left: 0 ` .
134
+ ` color: transparent ` ) and positioned it at ` top:0; left: 0 ` .
134
135
135
136
Then I added several ` text-shadow ` to it, with a full color. Doing so helped in
136
137
getting the coordinates right because everything is then relative to the origin
159
160
- Link to codepen to let users play with the code
160
161
- Making it work on more browsers...
161
162
- ...which implies that I need to add a visual testing framework on top if it
162
- - Adding the missings flags
163
+ - Adding the missing flags
163
164
- Using a clip-path when only one star instead of a font
164
165
- Building the font with npm instead of icomoon.io
165
166
- Adding stars to Brazil
0 commit comments