Post by Tartle Games in Examples of Great Game Pages

Viewing post in Examples of Great Game Pages

A little while back the itch staff put out a whole list of customized game pages that they liked. I can't find the link to that collection, but it had some great examples.

I've put a lot of work into most of mine: https://tartlegames.itch.io/

Like Reply

NightBlade7 years ago(+1)

That looks really great. Do you mind sharing some of your methodology to get it to look like this (or maybe your CSS)?

Like Reply

Tartle Games7 years ago (1 edit) (+1)

.game_grid_widget .game_cell .game_thumb .gif_overlay {
background-color: transparent !important;
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0s;
-ms-transition: opacity 0s;
transition: opacity 0s;
animation: wobble 1s;   display: none;
}
@-webkit-keyframes wobble  {
  0%  { -webkit-transform:  rotate(0deg); }
  20%  { -webkit-transform:  rotate(2deg); }
  50%  { -webkit-transform:  rotate(-2deg); }
  100%  { -webkit-transform:  rotate(0deg); }
}
@keyframes wobble  {
  0%  { transform:  rotate(0deg); }
  20%  {transform:  rotate(2deg); }
  50%  { transform:  rotate(-2deg); }
  100%  { transform:  rotate(0deg); }
}
.image_header :hover {
animation: wobble 1s;   }
.game_cell_data :hover {
animation: wobble 1s;   }
.game_grid_widget .game_cell .game_thumb {
   box-shadow: 0 0 0 3px white;
}
.game_grid_widget .game_cell .game_thumb :hover  {
   box-shadow: 1px 0px 5px 6px white;
}
.game_grid_widget .game_cell {
    text-align: center;
}

Like Reply

Tartle Games7 years ago(+1)

the gif images on the page are gif captures using Licecap. The first frame I place in with gimp so that it has some cover art before you hover over the image.

Like Reply

NightBlade7 years ago

Thanks for sharing this! I also use LICEcap for gifs. The GIMP trick is a good one. I didn't notice any of the effects, but I really like the grid layout (I have something identical on my site home page right now).

That gives me an idea -- I can generate the CSS/images for the home page automatically like I do for my static site today ...

Thanks for this, it really helps.

Like Reply