Complete first mockup and improve name board
It's really hard to find sprites that works exactly the way you need it. It's even tougher when you need to deal with multiple resolutions.
The issues with using CSS sprites technique is that you predefined a definite height and width. For the sprites. So in the case of the bridge, this is not going to work if the screen resolution changes and the bridge will not be fully connected.
To overcome this issue, I created my own "sprite" technique using absolute image tag in a container with overflow hidden and manually adjust the position of the image I want. So if the container height increased, more portion of the bridge can be seen. This way, I manage to achieve resolution friendly sprites regardless of how many levels are the wooden planks.
After adding the sand background, I realize the fonts are quite hard to read, so decided to throw in more wooden design to bring out the text. It turn out quite well I must say. Manage to find most of the standalone PNG at https://www.pngfind.com/ Thank God!
Also improved the name board. The Team heading is now sticky. So the team header will stay even when scrolling down the name list and a second team header will take over when scrolling to the next team. Felt quite empty with just names. So added robohash https://robohash.org avatars for some freshness.
I'm very happy with how the whole thing turned out. Next week. It's time to start writing the code!
The issues with using CSS sprites technique is that you predefined a definite height and width. For the sprites. So in the case of the bridge, this is not going to work if the screen resolution changes and the bridge will not be fully connected.
To overcome this issue, I created my own "sprite" technique using absolute image tag in a container with overflow hidden and manually adjust the position of the image I want. So if the container height increased, more portion of the bridge can be seen. This way, I manage to achieve resolution friendly sprites regardless of how many levels are the wooden planks.
After adding the sand background, I realize the fonts are quite hard to read, so decided to throw in more wooden design to bring out the text. It turn out quite well I must say. Manage to find most of the standalone PNG at https://www.pngfind.com/ Thank God!
Also improved the name board. The Team heading is now sticky. So the team header will stay even when scrolling down the name list and a second team header will take over when scrolling to the next team. Felt quite empty with just names. So added robohash https://robohash.org avatars for some freshness.
I'm very happy with how the whole thing turned out. Next week. It's time to start writing the code!
