The latest articles on DEV Community by Brookes (@brookesb91). https://dev.to/brookesb91 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%2F108959%2Ff2148275-f10e-4f69-bc72-711dd47035f9.jpg https://dev.to/brookesb91 en Brookes Mon, 10 Jun 2024 14:53:35 +0000 https://dev.to/brookesb91/css-only-cards-carousel-950 https://dev.to/brookesb91/css-only-cards-carousel-950 <p>Smooth scrolling carousel, without JS.</p> <p><iframe height="600" src="https://codepen.io/brookesb91/embed/PovjwEp?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen Brookes Sat, 18 May 2024 11:25:28 +0000 https://dev.to/brookesb91/wave-function-collapse-2mo0 https://dev.to/brookesb91/wave-function-collapse-2mo0 <p>A wave function collapse demo.</p> <p><iframe height="600" src="https://codepen.io/brookesb91/embed/YzbyBRE?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen javascript webdev Brookes Tue, 09 Apr 2024 11:50:00 +0000 https://dev.to/brookesb91/bouncy-loader-3pc4 https://dev.to/brookesb91/bouncy-loader-3pc4 <p>A bouncy loading indicator.</p> <p><iframe height="600" src="https://codepen.io/brookesb91/embed/xxMwZbJ?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen css webdev Brookes Tue, 09 Apr 2024 11:48:35 +0000 https://dev.to/brookesb91/arced-text-on-canvas-3acn https://dev.to/brookesb91/arced-text-on-canvas-3acn <p>Drawing text around an arc on a canvas.</p> <p><iframe height="600" src="https://codepen.io/brookesb91/embed/wvZqOJr?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen javascript canvas webdev Brookes Thu, 04 Apr 2024 16:52:19 +0000 https://dev.to/brookesb91/css-only-3d-navigation-cube-3fhi https://dev.to/brookesb91/css-only-3d-navigation-cube-3fhi <p>A 3D navigation cube made without JavaScript.</p> <p><iframe height="600" src="https://codepen.io/brookesb91/embed/VwgZxZj?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen css webdev 3dcss Brookes Tue, 09 Aug 2022 14:42:00 +0000 https://dev.to/brookesb91/gradient-border-button-1j87 https://dev.to/brookesb91/gradient-border-button-1j87 <p>A demonstration of creating gradient borders using pseudo elements. </p> <p><iframe height="600" src="https://codepen.io/brookesb91/embed/vYRrEQg?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen css showdev webdev Brookes Thu, 28 Jul 2022 13:42:00 +0000 https://dev.to/brookesb91/3d-drawing-on-2d-canvas-3e51 https://dev.to/brookesb91/3d-drawing-on-2d-canvas-3e51 <p>A demonstration of creating and projecting a 3D space onto a 2D canvas.</p> <p><iframe height="600" src="https://codepen.io/brookesb91/embed/wvmqXMe?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> <h2> Controls </h2> <ul> <li> <code>w</code>: move forwards</li> <li> <code>s</code>: move backwards</li> <li> <code>a</code>: rotate left</li> <li> <code>d</code>: rotate right</li> <li> <code>z</code>: move up</li> <li> <code>x</code>: move down</li> <li> <code>q</code>: strafe left</li> <li> <code>e</code>: strafe right</li> <li> <code>o</code>: pitch up</li> <li> <code>p</code>: pitch down</li> </ul> codepen webdev javascript showdev Brookes Sun, 17 Jul 2022 14:40:37 +0000 https://dev.to/brookesb91/native-html-dialog-animations-5fd2 https://dev.to/brookesb91/native-html-dialog-animations-5fd2 <p><iframe height="600" src="https://codepen.io/brookesb91/embed/rNdVgVE?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen webdev dialog css Brookes Sun, 17 Jul 2022 12:07:41 +0000 https://dev.to/brookesb91/css-only-nested-context-menu-2ih9 https://dev.to/brookesb91/css-only-nested-context-menu-2ih9 <p><iframe height="600" src="https://codepen.io/brookesb91/embed/BarQpoQ?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen css webdev beginners Brookes Mon, 01 Mar 2021 13:32:59 +0000 https://dev.to/brookesb91/html-css-449g https://dev.to/brookesb91/html-css-449g <p>Ever feel like your rendered page doesn't truly reflect your mark-up? Worry no more.</p> <p><iframe height="600" src="https://codepen.io/brookesb91/embed/mdOqZjQ?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen css webdev Brookes Wed, 10 Feb 2021 21:16:03 +0000 https://dev.to/brookesb91/fab-mega-menu-575j https://dev.to/brookesb91/fab-mega-menu-575j <p>Floating action button with mega menu and backdrop effect.</p> <p><iframe height="600" src="https://codepen.io/brookesb91/embed/WNoGZYK?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen showdev webdev css Brookes Sat, 05 Dec 2020 15:01:36 +0000 https://dev.to/brookesb91/material-cut-out-sidenav-5b2l https://dev.to/brookesb91/material-cut-out-sidenav-5b2l <p><iframe height="600" src="https://codepen.io/brookesb91/embed/abmNmaY?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen css webdev showdev