René's URL Explorer Experiment


Title: CSS Physics · May 31, 2024

Open Graph Title: CSS Physics · May 31, 2024

X Title: CSS Physics · May 31, 2024

Description: Physics in CSS! I transferred a JS physics function into CSS thanks to sqrt() , exp() , sin() , cos() and @property . :root { --mass : 1 ; --stiffness : 100 ; --damping : 5 ; --start-velocity : 0 ; } Check it out on Codepen . Change the properties and see a different animation.

Open Graph Description: Physics in CSS! I transferred a JS physics function into CSS thanks to sqrt() , exp() , sin() , cos() and @property . :root { --mass : 1 ; --stiffness : 100 ; --damping : 5 ; --start-velocity : 0 ; } Check it out on Codepen . Change the properties and see a different animation.

X Description: Physics in CSS! I transferred a JS physics function into CSS thanks to sqrt() , exp() , sin() , cos() and @property . :root { --mass : 1 ; --stiffness : 100 ; --damping : 5 ; --start-velocity : 0 ; } Check it out on Codepen . Change the properties and see a different animation.

Opengraph URL: https://nerdy.dev/css-physics

X: @argyleink

direct link

Domain: nerdy.dev

Hey, it has json ld scripts: 
{"@context":"https://schema.org","@type":"Person","name":"Adam Argyle","url":"https://nerdy.dev","sameAs":["https://twitter.com/argyleink","https://github.com/argyleink","https://front-end.social/@argyleink","https://codepen.io/argyleink"],"jobTitle":"CSS Expert, Developer Advocate, CSSWG Member","description":"CSS Working Group member, creator of Open Props and VisBug, teacher and speaker on web development","knowsAbout":["CSS","Web Development","JavaScript","HTML","Web Design","UX","Accessibility","Performance","Design Systems","Web Standards"]}
 
{"@context":"https://schema.org","@type":"WebSite","name":"nerdy.dev","url":"https://nerdy.dev","author":{"@type":"Person","name":"Adam Argyle"},"description":"Web development blog featuring CSS, JavaScript, HTML, design, and UX content by Adam Argyle"}
fediverse:creator@argyleink@front-end.social
Nonesec-ch-viewport-width https://api.pirsch.io; sec-ch-dpr https://api.pirsch.io; sec-ch-width https://api.pirsch.io; sec-ch-downlink https://api.pirsch.io;
mobile-web-app-capableyes
apple-mobile-web-app-status-bar-styledefault
theme-color#030507
color-schemedark light
og:typearticle
og:localeen_US
og:imagehttps://nerdy.dev/media/skull-card.png
og:image:width1366
og:image:height768
og:image:typeimage/png
og:image:altAdam Argyle's skull logo wearing a pink cap
og:videohttps://nerdy.dev/media/skull-card.mp4
og:video:secure_urlhttps://nerdy.dev/media/skull-card.mp4
og:video:typevideo/mp4
og:video:width1200
og:video:height630
twitter:player:streamhttps://nerdy.dev/media/skull-card.mp4
twitter:player:stream:content_typevideo/mp4
og:site_namenerdy.dev
article:published_time2024-05-31T03:57:40.976Z
article:authorhttps://nerdy.dev/
article:tagcss
twitter:cardsummary_large_image
twitter:imagehttps://nerdy.dev/media/skull-card.png
twitter:image:altAdam Argyle's skull logo wearing a pink cap
twitter:creator@argyleink

Links:

Homehttps://nerdy.dev/
Follow my RSS feedhttps://nerdy.dev/rss.xml
Nerdy Notebookhttps://nerdy.dev/notebook/index.html
physics function into CSShttps://codepen.io/argyleink/pen/KKLaNdd
sqrt()https://developer.mozilla.org/en-US/docs/Web/CSS/sqrt
exp()https://developer.mozilla.org/en-US/docs/Web/CSS/exp
sin()https://developer.mozilla.org/en-US/docs/Web/CSS/sin
cos()https://developer.mozilla.org/en-US/docs/Web/CSS/cos
@propertyhttps://developer.mozilla.org/en-US/docs/Web/CSS/@property
Check it out on Codepenhttps://codepen.io/argyleink/pen/KKLaNdd
Linkhttps://nerdy.dev/css-physics
Share a direct link to this postjavascript: (() => { const url = window.location.origin + "/css-physics"; if (navigator.share) { navigator.share({url}).catch(() => {}); } else { navigator.clipboard.writeText(url); Toast("Link copied!"); } })()
Previously #218a Note1 day earlierhttps://nerdy.dev/next-level-css-centering-headed-your-way
Next #220a NoteSame dayhttps://nerdy.dev/single-keyframe-tricks-are-magic
Follow me on Twitterhttps://twitter.com/argyleink
Follow me on Mastodonhttps://front-end.social/@argyleink
Follow me on Blueskyhttps://bsky.app/profile/nerdy.dev
Follow me on YouTubehttps://www.youtube.com/@nerdiestdev
Follow me on Githubhttps://github.com/argyleink
Shopifyhttps://shopify.com
ex-Googlehttps://developer.chrome.com/authors/adam-argyle
ex-CSSWGhttps://www.w3.org/users/112669/
CSS Podcasthttps://thecsspodcast.libsyn.com/
GUI Challengeshttps://github.com/argyleink/gui-challenges
Whiskey.FMhttps://whiskey.fm/
Open Propshttps://open-props.style/
Prop For Thathttps://prop-for-that.netlify.app/
HD Color Pickerhttps://color-input.netlify.app/
Gradient Editorhttps://gradient.style/
VisBughttps://github.com/GoogleChromeLabs/ProjectVisBug
transition.stylehttps://www.transition.style/
RSShttps://nerdy.dev/rss
notebookhttps://nerdy.dev/notebook
followshttps://nerdy.dev/follows
404https://nerdy.dev/nothing-here
contacthttps://nerdy.dev/contact
privacyhttps://nerdy.dev/privacy
CSS Webringhttps://CS.Sjoy.lol
https://webri.ng/webring/cssjoy/previous?via=https%3A%2F%2Fnerdy.dev
https://webri.ng/webring/cssjoy/random?via=https%3A%2F%2Fnerdy.dev
https://webri.ng/webring/cssjoy/next?via=https%3A%2F%2Fnerdy.dev
nerdy.devhttps://nerdy.dev
CSS DevRelhttps://web.dev/authors/adamargyle/
@CSSWGhttps://w3.org/groups/wg/css/participants/
@CSS Podcasthttps://pod.link/thecsspodcast
Bad @ CSShttps://badatcss.com
@GUI Challengeshttps://goo.gle/GUIchallenges

Viewport: width=device-width, initial-scale=1, viewport-fit=cover

URLs of crawlers that visited me.