Animating checkboxes and radio button

 I make my checkboxes and radio buttons rotate when they are clicked.


If the checkbox is clicked ('active') then the checkbox is immediately rotated 180 degrees.  When the click is over, then the checkbox slowly rotates back to its original position.


    input[type="checkbox"] {

        transition: transform 1s;

        display: inline-block;

    }

    input[type="checkbox"]:active {

        transform: rotate3d(0,0,1,180deg);

        transition: 0s;

    }


This is on 'codepen' at:  codepen.io/Bert-Beckwith/pen/OJrYLLN

There are more tips at: bbingo.xyz/techtips/




Comments

Post a Comment

Popular posts from this blog

Smooth scrolling

Image
 I have been adding 'smooth scrolling' to my pages which have internal links. I add this to my CSS:     :root { scroll-behavior:smooth; }  The browser now shows moving through the page to get to the link. This even works on Firefox and on the old Chrome for Windows7. Sometimes the page scrolls very quickly when I come 'back' to a page where I had gone to a link. I turn 'smooth scrolling' off when the user has asked for 'reduced motion'. I learnt about this from reading the book: 'Responsive Web Design with HTML and CSS' by Ben Frain. I found the book in a branch of my local library. I find different books in the different branches.
Read more

Problem with mobile testing tool

Image
 My game looked strange when I tested it on mobile phones run by 'appetize.io'. There was a thick border around the boards of players. And the game seemed to hang when I pressed a button. I thought maybe Chrome was adding an outline when an 'input' element got the focus. So I tried setting 'outline: 0'. This did not fix the problem. However, when I tested my game on mobile phones at 'browserstack.com' then everything looked fine. I realised that maybe there was a problem at 'appetize.io'. However, 'browserstack.com' only gives you one free minute per device.  Whereas 'appetize.io' gives you 30 free minutes a month. 'appetize.io' worked fine for tablets. This was a few months ago. Now my game looks fine on mobiles run by 'appetize.io'.
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