CSS Full-Bleed Scroll-Snapping Carousel with Centered Content and Visible Overflow
Scroll-Linked Animations with CSS Scroll-Timeline (CSS Café)
Recreating the Apple Keynote Event animation using SVG, Canvas, and GreenSock
Louis Hoebregts recreated the animation of last Apple’s recent Keynote Event using SVG, Canvas, and GreenSock: See the Pen Apple Keynote animation by Louis Hoebregts (@Mamboleoo) on CodePen. Crazy! 🤯 If you’re curious to see how he’s done it, in the demo below he breaks it down step by step: See the Pen Apple Keynote …
Continue reading “Recreating the Apple Keynote Event animation using SVG, Canvas, and GreenSock”
Create a color theme with CSS Relative Color Syntax, CSS color-mix(), and CSS color-contrast()
Fabio Giolito explores three new CSS color features that landed in Safari Technology Preview: Relative color syntax, e.g. .bg-primary-100 { background-color: hsl(from var(–theme-primary) h s 90%); } .bg-primary-200 { background-color: hsl(from var(–theme-primary) h s 80%); } .bg-primary-300 { background-color: hsl(from var(–theme-primary) h s 70%); } … CSS color-contrast, e.g. .text-contrast-primary { color: color-contrast(var(–theme-primary) vs white, …
A first look at CQFill, a Polyfill for CSS Container Queries
BRONSON
One of the albums that made it into my “2020 – Best Of” playlist on Apple Music is this lesser known gem by BRONSON. For the fans of Apparat, The Blaze, Bicep, etc.
Light Years Ahead | The 1969 Apollo Guidance Computer
Half a century ago, on 20 July 1969, Neil Armstrong was in the final stages of the lunar descent, just a few thousand feet above the surface, when suddenly his on-board computer indicated a critical alarm. For three nail-biting seconds it looked as if the mission would have to be aborted. However, Armstrong was given …
Continue reading “Light Years Ahead | The 1969 Apollo Guidance Computer”
A Beginner’s Guide To Proxies in JavaScript
In JavaScript one of the most important data types is Object. Sometimes we want to have more control over certain objects, such as being able to listen to who is reading the object property or updating. One of the best ways to control an object is with a Proxy. You can do a lot of …
Continue reading “A Beginner’s Guide To Proxies in JavaScript”
CSS: Float an Element to the Bottom Corner
Temani Afif shares this clever trick to float an element to the bottom corner of a container. The solution is threefold: Float a full-height wrapper (which contains the image) to the right Use flexbox to place the image at the bottom inside that wrapper Use shape-outside to clip the wrapper Clever! Float an Element to …
Continue reading “CSS: Float an Element to the Bottom Corner”
PHP Cloud Functions on Google Cloud Platform with “Functions Framework for PHP”
Google Cloud Platform has launched official support for PHP Cloud Functions using Functions Framework for PHP. With it, an HTTP Cloud Function becomes as simple as this: use Psr\Http\Message\ServerRequestInterface; function helloHttp(ServerRequestInterface $request): string { $queryString = $request->getQueryParams(); $name = $queryString['name'] ?? $name; return sprintf('Hello, %s!', $name); } Functions that respond to Cloud Events can work …
Continue reading “PHP Cloud Functions on Google Cloud Platform with “Functions Framework for PHP””