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/

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

Adding 'inert' HTML attribute does not speed up animations

Image
Adding an 'inert' attribute to the document body does not seem to speed up animations. The 'inert' attributes stops any interaction from the user. I thought animations started from 'view transitions' looked faster.  I noticed these transitions stop all user interaction. In fact, adding 'inert' does not seem to make much diference. My old page transitions using regular CSS animations look jerky on old computers. Maybe it is the complex HTML that slows them down  
Read more

Online HTML minifiers

Image
 I started by using an online HTML minifier at:     toptal.com/developers/html-minifier This minifier squashes up spaces and removes unnecessary quotes around attribute names. However, this minifier gives an error with my 'tips' page which is quite long with lots of HTML elements. The online minifier ranked highest by Google removes whitespace that is significant and thus changes the layout of my page. This minifier is at:       codebeautify.org/minify-html One way other minifiers give smaller output is by changing HTML entities to single UTF-8 characters. These characters appeared as weird characters until I saved the minified HTML with 'Notepad' with 'Save as' with the 'encoding' as 'UTF-8'. I then tried the minifier at:     10015.io/tools/html-minifier I noticed that this minifier also leaves out closing '</p>' tags for paragraphs. This causes my 15-year old browser to incorrectly show spacing between lines. However, this works f...
Read more