Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

been thinking of making this since i saw Seb Cornelius's post. the static hover book is a pure css approach. no javascript used here. each page has a fixed rotation defined to it. pages are stacked with absolute positioning and all rotate from `origin-left` (the spine).

Soren

7,152 subscribers

146,070 views • 7 months ago •via X (Twitter)

Arts Education Science & Technology

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Here's a fun concept - Filtering tags made with only pure #CSS (with no #javascript at all) using the :has selector 👍 Here's the CodePen.IO:

Here's a fun concept - Filtering tags made with only pure #CSS (with no #javascript at all) using the :has selector 👍 Here's the CodePen.IO:

AdirCode

66,735 views • 3 years ago

CSS Tip! 🤙 You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥 article { anchor-name: --develop; } ul:has(li:hover) { --anchor: --develop; } ul::after { inset: anchor(var(--anchor) top) anchor(var(--anchor) right) ... ; } How do you keep it clean when entering/exiting the list? Use transition-delay ⭐️ ul:has(li:hover) { --active: 1; } ul::after { opacity: var(--active, 0); transition: opacity 0.2s, inset 0.2s 0.2s; } ul:hover::after { transition: opacity 0.2s 0.2s, inset 0.2s; } This is a cool trick you can use. Delay the opacity on enter and then delay the position on exit. That way you don't get a weird effect on enter/exit 🙏 This one's a "Future" CSS tip 🔮 But, the demo will work in all browsers in some way. The idea is to progressively enhance it. 1. No JavaScript and no Anchor Positioning? Highlight on hover ✏️ 2. No Anchor Positioning? Use JavaScript with a single event listener to update the inset values using elementFromPoint and .closest 🫶 3. If there is Anchor Positioning support, use that and don't fire the JavaScript. You can check with CSS.supports('anchor-name: --anchor') ✨ That's it! CodePen.IO link below! 👇

CSS Tip! 🤙 You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥 article { anchor-name: --develop; } ul:has(li:hover) { --anchor: --develop; } ul::after { inset: anchor(var(--anchor) top) anchor(var(--anchor) right) ... ; } How do you keep it clean when entering/exiting the list? Use transition-delay ⭐️ ul:has(li:hover) { --active: 1; } ul::after { opacity: var(--active, 0); transition: opacity 0.2s, inset 0.2s 0.2s; } ul:hover::after { transition: opacity 0.2s 0.2s, inset 0.2s; } This is a cool trick you can use. Delay the opacity on enter and then delay the position on exit. That way you don't get a weird effect on enter/exit 🙏 This one's a "Future" CSS tip 🔮 But, the demo will work in all browsers in some way. The idea is to progressively enhance it. 1. No JavaScript and no Anchor Positioning? Highlight on hover ✏️ 2. No Anchor Positioning? Use JavaScript with a single event listener to update the inset values using elementFromPoint and .closest 🫶 3. If there is Anchor Positioning support, use that and don't fire the JavaScript. You can check with CSS.supports('anchor-name: --anchor') ✨ That's it! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

729,241 views • 2 years ago

3d hover effect made only using css. no javascript or framer motion used here. im utilizing css `preserve-3d` transform-style. the parent tilts 55deg (X-axis) and spins -45deg (Z-axis). and on hover, im translating cards' Z 20px to have that elevation. with proper easing.

3d hover effect made only using css. no javascript or framer motion used here. im utilizing css `preserve-3d` transform-style. the parent tilts 55deg (X-axis) and spins -45deg (Z-axis). and on hover, im translating cards' Z 20px to have that elevation. with proper easing.

Soren

21,757 views • 7 months ago

CSS-only magnetic link effect 🤯 li:has(a:is(:hover, :focus-visible)) {anchor-name: --a; } ul::before { left: anchor(--a left); width: anchor-size(--a width); } using CSS anchor positioning, declare an anchor on hover for the indicator 🚀

CSS-only magnetic link effect 🤯 li:has(a:is(:hover, :focus-visible)) {anchor-name: --a; } ul::before { left: anchor(--a left); width: anchor-size(--a width); } using CSS anchor positioning, declare an anchor on hover for the indicator 🚀

jhey ʕ•ᴥ•ʔ

234,286 views • 1 year ago

sliding hover tip effect with CSS :has() and anchor positioning ✨ :root:has(li:nth-of-type(3):hover) { --i: 3; } .track { translate: 0 calc(var(--i) * -1lh); nav { anchor-name: --nav; } .tip { position-anchor: --nav; left: calc(anchor(right) + 1rem); }

sliding hover tip effect with CSS :has() and anchor positioning ✨ :root:has(li:nth-of-type(3):hover) { --i: 3; } .track { translate: 0 calc(var(--i) * -1lh); nav { anchor-name: --nav; } .tip { position-anchor: --nav; left: calc(anchor(right) + 1rem); }

jhey ʕ•ᴥ•ʔ

164,722 views • 1 year ago

Very special day for me! Today is the release date for my new book called A Bow of Bronze I am thrilled to release this project and share with you all! This book has been years in the making with hardships and roadblocks along the way but God saw me through! I’m excited to share this with you and pray that it blesses you as it did me! Here’s where you can find the book, LOVE YOU ALL!

Very special day for me! Today is the release date for my new book called A Bow of Bronze I am thrilled to release this project and share with you all! This book has been years in the making with hardships and roadblocks along the way but God saw me through! I’m excited to share this with you and pray that it blesses you as it did me! Here’s where you can find the book, LOVE YOU ALL!

Nate Norman

140,234 views • 1 year ago

I read a few pages of the Gita every day and it's amazing how each time the same page has a new meaning. I try my best to apply lessons from the Gita to my personal and professional life. Was thinking why not share these learnings here. Every Monday I will share a few lines. #GitaMyWayOfLife

I read a few pages of the Gita every day and it's amazing how each time the same page has a new meaning. I try my best to apply lessons from the Gita to my personal and professional life. Was thinking why not share these learnings here. Every Monday I will share a few lines. #GitaMyWayOfLife

Anil Agarwal

18,604 views • 1 year ago

I designed and built this simple landing page from scratch using HTML, CSS, and JavaScript. Unto the next chapter REACT 💪

I designed and built this simple landing page from scratch using HTML, CSS, and JavaScript. Unto the next chapter REACT 💪

Benita Mbulu

14,430 views • 6 months ago

I think the left is blowing this Signal issue out of proportion. Was it perfect? No. Is it as big of a deal as the left is making it out to be? No. I think there is a higher chance the left is just desperate to get a “win”, so they are going all in on this because they see a bit of daylight.

I think the left is blowing this Signal issue out of proportion. Was it perfect? No. Is it as big of a deal as the left is making it out to be? No. I think there is a higher chance the left is just desperate to get a “win”, so they are going all in on this because they see a bit of daylight.

Jeffery Mead

36,781 views • 1 year ago

Our origin story is divine and so is our destiny. I was reminded of this today as I visited with students at BYU–Hawaii. Each of us left heaven to come here—but heaven has never left us! These young people—and all of you—are blessed beings of light, the spirit children of an infinite God! And you bear within you a potential beyond your own capacity to imagine.

Our origin story is divine and so is our destiny. I was reminded of this today as I visited with students at BYU–Hawaii. Each of us left heaven to come here—but heaven has never left us! These young people—and all of you—are blessed beings of light, the spirit children of an infinite God! And you bear within you a potential beyond your own capacity to imagine.

Dieter F. Uchtdorf

22,262 views • 4 months ago

it's finally time... this is css clicker, a fully-featured incremental game where your goal is to design your own personal website and get as many views on it as possible the fun part? it's a pure-css game, meaning it has zero javascript or server-side code. have fun!

it's finally time... this is css clicker, a fully-featured incremental game where your goal is to design your own personal website and get as many views on it as possible the fun part? it's a pure-css game, meaning it has zero javascript or server-side code. have fun!

Rebane

128,452 views • 1 year ago

'I Am Jazz,' the book McBride is showing to these innocent babies, is based on a true story. Here is a clip from the reality show it is based on. Yes, we are thinking exactly what you are thinking: this sounds like r*pe.

Sensitive content

'I Am Jazz,' the book McBride is showing to these innocent babies, is based on a true story. Here is a clip from the reality show it is based on. Yes, we are thinking exactly what you are thinking: this sounds like r*pe.

Rep. Nancy Mace

172,183 views • 1 year ago

STOP using absolute positioning in Framer... comment "FRAMER" and i'll send you the project with the CORRECT page structure (used by all framer experts)

STOP using absolute positioning in Framer... comment "FRAMER" and i'll send you the project with the CORRECT page structure (used by all framer experts)

Framer University

11,480 views • 1 year ago

When I saw this post from this Obidiot Chijioke, I knew this is not true. So I reached out to a friend, who is one of the engineers working on this project & he denied it outrightly. According to him, the project has been sectionalised, and it has never stopped since it started. As seen in the videos below, Section2,3,4 and 5 are at 90% completion, while sections 1, 6, 7, 8, & 9 are ongoing, also almost 60% completed. Bury your empty head filled with alcohol and fake soft drinks in shame.

When I saw this post from this Obidiot Chijioke, I knew this is not true. So I reached out to a friend, who is one of the engineers working on this project & he denied it outrightly. According to him, the project has been sectionalised, and it has never stopped since it started. As seen in the videos below, Section2,3,4 and 5 are at 90% completion, while sections 1, 6, 7, 8, & 9 are ongoing, also almost 60% completed. Bury your empty head filled with alcohol and fake soft drinks in shame.

𝐇𝐢𝐝𝐢𝐦𝐚, 𝐏𝐡.𝐃.

16,591 views • 27 days ago

Making a beautiful card effects with HTML & CSS No JavaScript ❌ CodePen 👇

Making a beautiful card effects with HTML & CSS No JavaScript ❌ CodePen 👇

Ali Reza

103,241 views • 3 years ago

It’s been one week since the greatest impromptu winners reprise of all time and I haven’t stopped thinking about it since. Every single bit of it. Dara is a superstar, and so are her dancers #Eurovision

It’s been one week since the greatest impromptu winners reprise of all time and I haven’t stopped thinking about it since. Every single bit of it. Dara is a superstar, and so are her dancers #Eurovision

sᴜᴘᴇʀ ᴛᴠ

136,589 views • 1 month ago

An overlooked key for creating separation: Trunk posture at landing.🔑 The spine will give you more motion during the rotation phase when in a relatively stacked position. If the pelvis and spine are already jammed in end ranges (especially uphill or in extension), rotation becomes heavily limited. Keeping the ribs down & hips underneath you allows for a cleaner unwinding of this rotation up the spine.🌪️

An overlooked key for creating separation: Trunk posture at landing.🔑 The spine will give you more motion during the rotation phase when in a relatively stacked position. If the pelvis and spine are already jammed in end ranges (especially uphill or in extension), rotation becomes heavily limited. Keeping the ribs down & hips underneath you allows for a cleaner unwinding of this rotation up the spine.🌪️

Ben Brewster

22,289 views • 1 year ago

Page templates are *here* — plus a preview of page building mode. 👀 Now you can speed up static page creation by templatizing pages you build often, plus an update on progress towards page building mode. Learn more in the update post:

Page templates are here — plus a preview of page building mode. 👀 Now you can speed up static page creation by templatizing pages you build often, plus an update on progress towards page building mode. Learn more in the update post:

Webflow

33,811 views • 2 years ago

Created this fully "accessible" dropdown using pure Tailwind CSS 🤩 × No javascript × No custom styles Can you guess which CSS property is this?

Created this fully "accessible" dropdown using pure Tailwind CSS 🤩 × No javascript × No custom styles Can you guess which CSS property is this?

Surjith S M ✪

169,682 views • 3 years ago