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

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

Selecting adjacent elements on :hover with CSS

Image
 I wanted to lighten and shrink buttons adjacent to the button that I am hovering over. But some of the buttons are inside a containing 'div'. For example, I have 2 'div' elements with CSS class 'outer', and each 'div' contains 'input' elements which have a CSS class 'inner'. So I first say:     .inner:hover  ~ .inner,      .inner:has(~ .inner:hover) {         opacity: 0.7;         transform: scale3d(0.9,0.9,1);     }  The above works for 'inner' elements within the same 'outer' element. The '~' is the 'sibling selector'. Then for the 'hover' to affect following 'outer' elements:     .outer:has(.inner:hover)  ~ .outer .inner {         opacity: 0.7;         transform: scale3d(0.9,0.9,1);     }  The above saya: "if an 'outer' element has an 'inner' child that is being hovered over, and is followed by an 'outer' element then apply t...
Read more

Giving PWA icons transparent backgrounds

Image
 I changed some of my icons to have transparent backgrounds. These were the icons mentioned in the 'manifest' files of my Progressive Web Apps (PWA). I had given the icons white backgrounds to make them clearer as recommended by the PWA tutorial on Google's 'web.dev'. But these looked strange next to other icons on a Windows desktop. I made all my web pages PWA's by adding a 'manifest' file and starting a 'do-nothing' service worker. Chrome warns that loading these service workers slows things down. There are more tips at: bbingo.xyz/techtips/
Read more