The latest articles on DEV Community by Paul van Dinther (@dinther). https://dev.to/dinther https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F394076%2F1fe9e3c0-40ae-4cd9-9bc9-f1d03a29341c.png https://dev.to/dinther en Paul van Dinther Tue, 01 Sep 2020 09:39:39 +0000 https://dev.to/dinther/flip-line-1ffc https://dev.to/dinther/flip-line-1ffc <p>This Multi State button is perfect to toggle through a limited set of modes as needs little space and avoids distracting popups or panels. The satisfying toggle is quite addictive.</p> <p>All you need is a handful of div elements and include a tiny but of javascript and CSS in your project.</p> <p>You can style this any way you want. The control is fully responsive.</p> <p>Although there are 4 sides to this 3D control, you can have as few or as many options as you want.</p> <p>Even the color shade changes as the light angle changes on the surfaces.</p> <p>Even though it looks like a cube, there are only ever two div's being animated. No point to mess around with elements you can't see.</p> <p>optional element attributes:</p> <p>direction - defines rotation direction "up", "down,""left" or "right"<br> shading - defines in % how much % the base color is made lighter and darker as the cube rotates (Default is 60%)<br> time - time it takes for a 90 degree turn. Expressed in ms. Default is 300ms.</p> <p><iframe height="600" src="https://codepen.io/dinther/embed/OJNgQRw?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen Paul van Dinther Tue, 01 Sep 2020 04:56:05 +0000 https://dev.to/dinther/flip-line-lpl https://dev.to/dinther/flip-line-lpl <p>This Multi State button is perfect to toggle through a limited set of modes as needs little space and avoids distracting popups or panels. The satisfying toggle is quite addictive.</p> <p>All you need is a handful of div elements and include a tiny but of javascript and CSS in your project.</p> <p>You can style this any way you want. The control is fully responsive.</p> <p>although there are 4 sides to this 3D control, you can have as few or as many options as you want.</p> <p>Even the shade changes as the light angle changes on the surfaces. I can't wait to see what a more artistic designer can do with these.</p> <p>Even though it looks like a cube, there are only ever two div's being animated. No point to mess around with elements you can't see.</p> <p>optional element attributes: list - References the ID of a datalist direction - defines rotation direction "up", "down,""left" or "right" shading - defines in % how much % the base color is made lighter and darker as the cube rotates (Default is 60%) time - time it takes for a 90 degree turn. Expressed in ms. Default is 300ms.</p> <p><iframe height="600" src="https://codepen.io/dinther/embed/OJNgQRw?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen