正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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 次观看 • 9 个月前 •via X (Twitter)

艺术教育科学技术

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

My next passion project is going to be a culmination of some of my projects this month. The scope is a bit larger than a weekend so in the meantime, I wanted to share an animation for it since I like making landing pages 🙂 This is all pure CSS! I'll deploy it on Vercel soon.

My next passion project is going to be a culmination of some of my projects this month. The scope is a bit larger than a weekend so in the meantime, I wanted to share an animation for it since I like making landing pages 🙂 This is all pure CSS! I'll deploy it on Vercel soon.

Jesse Zhang

83,441 次观看 • 3 年前

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,560 次观看 • 2 年前

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 次观看 • 1 年前

I built a book. Not a PDF viewer. A real, skeuomorphic hardcover book that lives in the browser. The idea started with a simple question: What if reading a digital book actually felt like reading a real one? Since I've worked on book app designs before, I was curious to see how Claude would respond to one of those ideas that starts out sounding a little unrealistic. At first, I only wanted to recreate the experience of opening a book and flipping through its pages. Then one idea became another. I added: • Real page-flipping interactions with sound • Text highlighting in multiple colors • A voice reader • Reading reminders that continue from where you left off • Bookmarks to save important pages to share with friends later Then I thought about one of the biggest frustrations with large books. Flipping through hundreds of pages just to find page 287 isn't fun. So I added a page entry feature. Type a page number, and the book automatically flips through the pages until it gets there, just like a real book in motion. There are still more ideas I want to explore, but this was one of those projects where I kept building as the ideas came to mind. Curiosity led me here, and I like where it is taking me! Built with Claude. Designed by me. Livelink: Do let me know what you think!

I built a book. Not a PDF viewer. A real, skeuomorphic hardcover book that lives in the browser. The idea started with a simple question: What if reading a digital book actually felt like reading a real one? Since I've worked on book app designs before, I was curious to see how Claude would respond to one of those ideas that starts out sounding a little unrealistic. At first, I only wanted to recreate the experience of opening a book and flipping through its pages. Then one idea became another. I added: • Real page-flipping interactions with sound • Text highlighting in multiple colors • A voice reader • Reading reminders that continue from where you left off • Bookmarks to save important pages to share with friends later Then I thought about one of the biggest frustrations with large books. Flipping through hundreds of pages just to find page 287 isn't fun. So I added a page entry feature. Type a page number, and the book automatically flips through the pages until it gets there, just like a real book in motion. There are still more ideas I want to explore, but this was one of those projects where I kept building as the ideas came to mind. Curiosity led me here, and I like where it is taking me! Built with Claude. Designed by me. Livelink: Do let me know what you think!

Biba

29,273 次观看 • 1 个月前

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,335 次观看 • 6 个月前

'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,236 次观看 • 1 年前

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,661 次观看 • 2 个月前

This has really been a pure shit show btw… With a working left DRL and a checked off checklist before the work, only to claim that we handed over faulty left DRL is really below the standard I expected from these guys. ForPitsSake not the kind of person I expected!

Sensitive content

This has really been a pure shit show btw… With a working left DRL and a checked off checklist before the work, only to claim that we handed over faulty left DRL is really below the standard I expected from these guys. ForPitsSake not the kind of person I expected!

Ms. Sunshine ™

212,432 次观看 • 10 天前

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ᴜᴘᴇʀ ᴛᴠ

137,017 次观看 • 3 个月前

I'm so proud of this (wip) code! It's modular in a way I've not done before, making it easier to create different species for the ecosystem and assign them behaviours that interact with one another. Also I have removed p5js and all of this is pure javascript 🪄🎨

I'm so proud of this (wip) code! It's modular in a way I've not done before, making it easier to create different species for the ecosystem and assign them behaviours that interact with one another. Also I have removed p5js and all of this is pure javascript 🪄🎨

Amy Goodchild

30,086 次观看 • 3 年前

Jarred Vanderbilt: "I think a lot of the stuff we lack, I think I can help provide on that end." (Has there been a direct conversation with the coaching staff about what led to you not being in the rotation?) "Kind of here and there, I guess." (Was it a surprise to be in the rotation at Philly?) "Yeah, it was a surprise." (How are you handling all this?) "Good. Controlling what I can control. Keep showing up to work, doing my part, supporting the team."

Jarred Vanderbilt: "I think a lot of the stuff we lack, I think I can help provide on that end." (Has there been a direct conversation with the coaching staff about what led to you not being in the rotation?) "Kind of here and there, I guess." (Was it a surprise to be in the rotation at Philly?) "Yeah, it was a surprise." (How are you handling all this?) "Good. Controlling what I can control. Keep showing up to work, doing my part, supporting the team."

Khobi Price

196,706 次观看 • 8 个月前

I used to spend hours trying to think of what to post next. Most of the time, I ended up guessing what my audience might like. This time, I tried a different approach. I used atypica.AI to watch real conversations happening on X, see what people were really talking about, and create AI personas that behave like my readers. From all of this, I got a clear 3-month content plan - full of ideas that people are actually interested in, not just random guesses. Planning feels so much easier now because I’m not starting from a blank page. It’s like responding to what people are already thinking, instead of forcing content. Check it out here:

I used to spend hours trying to think of what to post next. Most of the time, I ended up guessing what my audience might like. This time, I tried a different approach. I used atypica.AI to watch real conversations happening on X, see what people were really talking about, and create AI personas that behave like my readers. From all of this, I got a clear 3-month content plan - full of ideas that people are actually interested in, not just random guesses. Planning feels so much easier now because I’m not starting from a blank page. It’s like responding to what people are already thinking, instead of forcing content. Check it out here:

Chidanand Tripathi

42,115 次观看 • 7 个月前

Hear what Iranians in Karaj have to say: Man says: "There are 3 banks down there: Refah, Iran Zamin, and Sepah. Right there is an eyewear shop, a supermarket, and a Police center, I’m a shopkeeper from here, the rioters (terrorists) set all of them on fire….! Firefighter: “This is called a riot; this is no longer a protest. What is this situation?!" Man says: “This is nothing but an attempt to create a situation that portrays the system and the government as weak. However, naturally, our people have proven that the path of those creating these riots is separate from the legal and real protests of the people.” Man says: "I’ve been going to this mosque since I was a kid; I grew up here and they came and set it on fire. These are not 'the people'; these are rioters!" A municipal worker says: "I beg you, don't do this. We are human too. I've been here since 5:00 AM and I’d have to work until tomorrow. I’m here day and night. All because of the riots.”

Hear what Iranians in Karaj have to say: Man says: "There are 3 banks down there: Refah, Iran Zamin, and Sepah. Right there is an eyewear shop, a supermarket, and a Police center, I’m a shopkeeper from here, the rioters (terrorists) set all of them on fire….! Firefighter: “This is called a riot; this is no longer a protest. What is this situation?!" Man says: “This is nothing but an attempt to create a situation that portrays the system and the government as weak. However, naturally, our people have proven that the path of those creating these riots is separate from the legal and real protests of the people.” Man says: "I’ve been going to this mosque since I was a kid; I grew up here and they came and set it on fire. These are not 'the people'; these are rioters!" A municipal worker says: "I beg you, don't do this. We are human too. I've been here since 5:00 AM and I’d have to work until tomorrow. I’m here day and night. All because of the riots.”

Arya - آریا

54,641 次观看 • 7 个月前

Seungkwan of SEVENTEEN: Since I've been a big fan of that song from the start, I gave out a lot of shout-outs. I used to wander alone listening to Dreamcatcher JUSTICE, BONVOYAGE & Dejavu, thinking "This is K-pop! This is Music!" 👍🙏 🔗

Seungkwan of SEVENTEEN: Since I've been a big fan of that song from the start, I gave out a lot of shout-outs. I used to wander alone listening to Dreamcatcher JUSTICE, BONVOYAGE & Dejavu, thinking "This is K-pop! This is Music!" 👍🙏 🔗

kit 킷 🐺

81,336 次观看 • 1 年前

out of left field for my posts but I know I have a big reach here and this could be to someone with information since a lot of my followers are from Scotland like me - a lassie, I went to school with back in the day, alana, has went missing and hasn’t been seen since Friday, she was last seen in the city centre around 7pm. If you’re Glasgow/UK based please give this a share for me

out of left field for my posts but I know I have a big reach here and this could be to someone with information since a lot of my followers are from Scotland like me - a lassie, I went to school with back in the day, alana, has went missing and hasn’t been seen since Friday, she was last seen in the city centre around 7pm. If you’re Glasgow/UK based please give this a share for me

ﾟ✧ﾟ mothemi ﾟ✧ﾟ

42,388 次观看 • 1 个月前

Murray Hill Guy's alt accounts Jamie he used to say fucked up shit to us, and @peachypixie111, a fake egirl account he used to interact with men. The bottom left picture is a screenshot of the chat between MHG and a friend of his, where he sent him the notification screen of himself logged into the Jamie account. This account has been replying to only the Murray Hill Guy account the past month and has been doing so within 3 minutes of the MHG post. Prior to that he used it to attack people. The video to the bottom right is a complete screen recording of the all replies the account has made ever made as of October 1 at 4am. I did this as he will likely delete this account, and it will be needed in the future.

Murray Hill Guy's alt accounts Jamie he used to say fucked up shit to us, and @peachypixie111, a fake egirl account he used to interact with men. The bottom left picture is a screenshot of the chat between MHG and a friend of his, where he sent him the notification screen of himself logged into the Jamie account. This account has been replying to only the Murray Hill Guy account the past month and has been doing so within 3 minutes of the MHG post. Prior to that he used it to attack people. The video to the bottom right is a complete screen recording of the all replies the account has made ever made as of October 1 at 4am. I did this as he will likely delete this account, and it will be needed in the future.

Degen, CPA

47,831 次观看 • 10 个月前