CSS icons

 I make my search icon using CSS from the 'css.gg' website.


There are lots of nice CSS icons at 'css.gg'.


An SVG icon might be simpler but my old browser does not show SVG images in HTML.


There are more tips at: bbingo.xyz/t

Comments

Post a Comment

Popular posts from this blog

Violating Flickr's terms of service

Image
 Flickr said I had violated their terms of service by having non-photographic content. Another user had reported this. I had not been using my Flickr account much so I experimented by adding images with captions containing tips and news.  The images were drawings from 'openclipart.org'. I also made a gallery of screenshots of my game. I removed these images. I left some graphs showing probability distributions of getting a 'line' or 'house' in bingo. I had no more trouble for a few months. But now, I cannot login. Flickr says my username is not valid. If I use a link to my images, then I get a a '410' HTTP code meaning the content was intentionally removed. Yahoo! acquired Flickr in 2005. Yahoo! let you store lots of images, and even videos. In 2018, Yahoo! (now owned by Verizon) sold Flickr to SmugMug. Now Flickr tries to be a community of photographers. I still have all the same images on Pinterest together with the captions Pinterest only allows short...
Read more

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...
Read more

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...
Read more