Adapting a 'codepen' icon made with CSS

 I adapted a 'codepen' icon made with CSS made of rectangles made with 'clip-path', with the sides rotated to form a cube.


Some of the sides are moved to the front with 'translateZ'.


I colored the sides to see how it works:


    'codepen.io/Bert-Beckwith/pen/jENyyaK'


This is a different way of making a cube. Another way is to rotate 'div' elements.


Maybe there is a bug with Chrome: sometimes the sides of the cube disappear if I change the background color of their container. The sides reappear if I click the icon. I tried reflowing the cube, adding 'z-index' and adding '!important' but these did not fix the bug.


It is best to use SVG's for icons but I learn about CSS and my old browser does not show SVG's in HTML pages.



Comments

Post a Comment

Popular posts from this blog

Running minifiers twice

Image
 I ran UglifyJS twice and got a small further reduction in size. I now set the 'passes' option of 'UglifyJS' to '3'. This further reduces the size of the JavaScript in my game by 0.5%. I do not get much reduction in size when I run the 'CSSO' minifier twice or run the HTML minifier at 'jsonformatter.org' twice. The 'terser' JavaScript minifier is much faster than 'UglifyJS' but produces slightly bigger results with the default options.
Read more

Using 'JSMin' to remove commented-out code from JavaScript

Image
 I use Douglas Crockford's 'JSMin' minifier a lot. I modified it to keep newlines so I can look through the results. You can find it at:       ' https://github.com/Bert-Beckwith/myjsmin ' 'jsmin.c' is a small C program that removes JavaScript comments and excess whitespace. I often comment out old code rather than remove the code, so I use 'JSMin' to look at what is left. Afterwards I say ':g/^$/d' in 'vim' to remove blank lines. I really should just remove the old code and learn to use my source control system better. I also use 'JSMin' to minify my game, partly so that the input to 'UglifyJS' is smaller. I use an online version of 'UglifyJS' as my Linux system at home is a bit too old to run it. 'JSMin' is small and fast - I can run it in the background whilst playing my game.
Read more

Coding in small steps can be boring

Image
 Breaking coding down into small steps can make coding boring. People sometimes say you should break down programming into small steps so as to 'keep it simple'. I have got into the habit of coding in very small steps because I am often tired in the evenings when I am coding. I spent several weeks adding an option to the settings page of my game.  Previously I might have done the whole thing in one evening. However, I work on around 7 or 8 improvements to my game at any one time. I use a very old browser at home where I have no connection to the Internet, so I need to visit my local library to test on modern browsers.  Also my game takes several minutes to load on my 25-year old Pentium computer.
Read more