Posts

Showing posts from June, 2023

webkit-tap-highlight-color in CSS

 I almost used '-webkit-tap-highlight-color' to remove the blue highlight when you tap an item on a mobile with Chrome.  My item had an odd shape. But it seems you also need to set 'outline: none' on recent versions of Chrome. But this causes an accessibility problem. So I just gave my item a regular shape and kept the blue highlight There are more tips at:  bbingo.xyz/techtips/

Funnel shape with CSS

 You can make a 'funnel' shape in CSS with 'perspective' and 'rotateY'. The 'volume' and 'camera' icons at 'css.gg' use this. There are more tips at:  bbingo.xyz/techtips/

More 'css.gg' tips

 I search the icons at 'css.gg' using Google's search. For example, I search for 'button icon cas.gg'. But after a while Google puts up a check to see if you are a human and not a bot. There seem to be more icons at 'css.gg' than those listed in the categories. Sometimes I have to align the icons by adding a 'top' or 'left' property to the parent element which is positioned 'relative'. Sometimes I have to add a 'top:0' or 'left:0' property to the ':before' or ':after' elements when I add the icons to a real webpage. There is no 'cog' or 'gear' icon as this is difficult to do with the 3 elements used: the parent, the ':before' and the ':after'. I found a cog icon in an answer on 'stackoverflow.com'. I converted the icons to 'em' units but a few icons do not scale completely perfectly. It is probably best to use inline SVG's, but I am learing a lot about

Scaling icons at 'css.gg' and more

 I convert the CSS icons at 'css.gg' to units of 'ems' so they scale well. I assume one 'em' is 16px. 'css.gg' uses a 'scale' transform, but I have found this produces 'blocked steps' for the curves when scaled up. 'css.gg' removes unnecessary semi-colons at the end of a list of CSS properties for a CSS rule. But, I always get bugs when I add another property at the end of a list and forget to add a semi-colon at the end of the previous property. It may be better to use inline SVG icons, but I learn about CSS when I modify the icons at 'css.gg' and I do not know much about modifying SVG's. There is probably less code if I use the icons from 'css.gg' rather than SVG's. I do not want to include a big online icon library. I convert the icons at 'css.gg' from '2px'-wide lines to '1px'. I am using icons like illustrations and I do not want them to be too bold. There is a little confusion

Best to log in regularly to Facebook etc

 My account at 'freeshostingeu.com' was removed because I did not log in for a year. When I next logged in, my account was reinstated, but I got errors when using the file manager. So I just created another account using another of my email addresses. I visit all my pages at least once a week, but I must remember to log in too. There are more tips at:  bbingo.xyz/techtips/