Posts

Showing posts from July, 2025

Starting to use a CSS minifier

Image
 I have started using the 'CSSO' CSS minifier It only reduces the size of my game by 2%. I already used shell and Perl scripts to remove comments and remove some spaces. 'CSSO' additionally removes spaces around '{' and '}' and removes semi-colons after the last property in a rule. Sometimes 'CSSO' combines similar rules and combines properties into a 'shorthand' rule. CSS makes up about 20% of my game. (JavaScripts makes up about 65%). This is after my game is minimised. The size of the CSS is halved when minimised. The minified JavaScript is about 15% of the original size. JavaScript variable names can be shortened but CSS property names cannot be easily shortened. I remove some vendor-prefixed properties. 'CSSO' wrongly changes a small stylesheet to nothing. The stylesheet is:     #navigationSettings {         display: block;     } I had to hide some empty CSS rules from 'CSSO' as it removes them. These rules have prope...

How a CSS fish animation works

Image
 I have been adapting an animation of fish circling as in a bowl with bubbles rising in the middle. The original is by Yusuke Nakaya. See:      'codepen.io/YusukeNakaya/pen/WNopRwX' The fish are made of CSS triangles:     .pfshFish-body .pfshScale {         width: 0;         height: 0;         border-width: 0 0 3.125em 6.25em;     @keyframes fishColor {       0% {         border-color: transparent transparent #6C99C6 transparent; The triangles are reflected around the 'x' and 'y' axes to make one side of the body of the fish:     .pfshFish-body .pfshScale.-pfshTop.-pfshFront {         transform: scale(1, 1) skewX(4.5deg) rotateY(-11deg) rotateX(23deg)                    translate(0.09375em, 0.15625em);     }     .pfshFish-body .pfshScale.-pfshTop.-pfshBack...