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

Simple animation spacing out letters in an centred phrase

Image
 Animating the 'letter-spacing' of a centred piece of text is simple and looks nice. There is an example on 'codepen.io':     'codepen.io/Bert-Beckwith/pen/myVBZdw' This was one of my first animations for my game. I used JavaScript to do the animation. This looks a bit jerky but uses much less resources than the smoother simple CSS animation above. 
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