正在加载视频...

视频加载失败

返回首页

This? Completed it ✨ HTML, CSS, and JavaScript can take you to fun places 🚀 You might spot some added extras in this version! ┬┴┬┴┤•ᴥ•ʔ├┬┴┬┴ CodePen.IO link below 👇

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,349 subscribers

1,187,482 次观看 • 3 年前 •via X (Twitter)

教育科学技术
LIVE

Anya Rossi• Live Now

Private livecam show

10 条评论

jhey ▲🐻🎈 的头像
jhey ▲🐻🎈3 年前

Here's that @CodePen link! 👋

Joie Chung 的头像
Joie Chung3 年前

@CodePen I love this! 👩🏻‍🚀

jhey ▲🐻🎈 的头像
jhey ▲🐻🎈3 年前

@CodePen It was in my notes after seeing it pop up a few weeks ago and then I saw your tweet. I had to make it 😅 Thanks for the push! 🙏

Cosmic Red 的头像
Cosmic Red3 年前

@CodePen YOU ROCK! 🙌

Kenshi 🍉 的头像
Kenshi 🍉3 年前

@CodePen holy shit lol

@jamessocol.com #solidarity 的头像
@jamessocol.com #solidarity3 年前

@CodePen For some reason the stars and clouds aren't appearing in Firefox but I cannot for the life of me figure out what or where the gap is

jhey ▲🐻🎈 的头像
jhey ▲🐻🎈3 年前

@CodePen Fixed 🛠️ Sometimes an issue when copying things out of Figma. If any Id's match in the SVG, etc. things stop rendering 🫠

ChartJockey 的头像
ChartJockey3 年前

@CodePen I'm struggling just to get the basic CSS working for my website. This is just beyond be, good work!

A Real !Bot 的头像
A Real !Bot3 年前

@CodePen you're having too much fun.

YohanesRay 的头像
YohanesRay3 年前

@CodePen so cool 🔥 🐻

相关视频

Responsive funny Credit Card form ✨ Using HTML, CSS and JavaScript CodePen link below 👇
0:29

Responsive funny Credit Card form ✨ Using HTML, CSS and JavaScript CodePen link below 👇

Viki ✨

908,853 次观看 • 2 年前

Responsive login form with fun animation ✨ Using HTML, CSS and JS. CodePen link below 👇
0:20

Responsive login form with fun animation ✨ Using HTML, CSS and JS. CodePen link below 👇

Viki ✨

401,492 次观看 • 2 年前

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇
0:37

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

149,809 次观看 • 2 年前

I completed building this X-clone with HTML and CSS. It took me two sleepless nights to hardcode the clone.🥹🚀
0:30

I completed building this X-clone with HTML and CSS. It took me two sleepless nights to hardcode the clone.🥹🚀

Vaishnavi Patil🌻

148,457 次观看 • 2 年前

Responsive HTML table with sticky columns and mobile view created using only CSS and HTML ✨ CodePen link below 👇
0:33

Responsive HTML table with sticky columns and mobile view created using only CSS and HTML ✨ CodePen link below 👇

Viki ✨

385,849 次观看 • 2 年前

Future CSS Tip! 🔮 You could combine anchor positioning + :has to create this kinda iPad style follow effect ✨ [href=blog]{anchor-name:--bl;} :root:has([href=blog]:hover){--a: --bl;} .cursor{left:anchor(var(--a) left);} You can transition anchors! 😎 CodePen.IO link below! 👇
0:21

Future CSS Tip! 🔮 You could combine anchor positioning + :has to create this kinda iPad style follow effect ✨ [href=blog]{anchor-name:--bl;} :root:has([href=blog]:hover){--a: --bl;} .cursor{left:anchor(var(--a) left);} You can transition anchors! 😎 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

201,063 次观看 • 3 年前

Ready for the first cool demo of the year? A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀 Demo: via CodePen.IO ✔️ 100% CSS Magic ✔️ Minimal HTML ❌ 0% JavaScript A Chrome-only experimentation using modern CSS.
0:25

Ready for the first cool demo of the year? A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀 Demo: via CodePen.IO ✔️ 100% CSS Magic ✔️ Minimal HTML ❌ 0% JavaScript A Chrome-only experimentation using modern CSS.

CSS by T. Afif

36,193 次观看 • 5 个月前

Future CSS Tip! 🔮 You can power list animations like you would using IntersectionObserver with CSS scroll-driven animations and zero JS 🤯 el { animation: show; animation-timeline: view(); animation-range: entry; } keyframes show {0%{translate:0 50%;}} CodePen.IO link below! 👇
0:54

Future CSS Tip! 🔮 You can power list animations like you would using IntersectionObserver with CSS scroll-driven animations and zero JS 🤯 el { animation: show; animation-timeline: view(); animation-range: entry; } keyframes show {0%{translate:0 50%;}} CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

433,664 次观看 • 2 年前

Today I completed Somewhat this application Inkaa chala undi anukunta Eppati varaku e features chesa HTML , CSS , Javascript ekkuva use chesa Chepandi elaa undi? How is it
1:02

Today I completed Somewhat this application Inkaa chala undi anukunta Eppati varaku e features chesa HTML , CSS , Javascript ekkuva use chesa Chepandi elaa undi? How is it

Surya

113,347 次观看 • 1 年前

Future CSS Tip! 🔮 You can combine scroll-driven animation and anchor positioning to create a CSS only nav indicator 🤯 .el { animation: move; animation-timeline: --blog; } keyframes move {to { left: anchor(--blog left); }} Adapts to long text! 😎 CodePen.IO link below! 👇
0:34

Future CSS Tip! 🔮 You can combine scroll-driven animation and anchor positioning to create a CSS only nav indicator 🤯 .el { animation: move; animation-timeline: --blog; } keyframes move {to { left: anchor(--blog left); }} Adapts to long text! 😎 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

129,237 次观看 • 2 年前

It's a CSS Maze!! 🌽 Unless Safari... In which case it's some random shapes 🙃 🚳 No images 📵 No JavaScript 👨‍💻 Just CSS + a sprinkling of HTML First one to screenshot the end wins... Go!! 🎉 CodePen.IO #nojavascript #purecss #cssonly #cssart #ccsgame
0:22

It's a CSS Maze!! 🌽 Unless Safari... In which case it's some random shapes 🙃 🚳 No images 📵 No JavaScript 👨‍💻 Just CSS + a sprinkling of HTML First one to screenshot the end wins... Go!! 🎉 CodePen.IO #nojavascript #purecss #cssonly #cssart #ccsgame

Ben Evans

12,744 次观看 • 2 年前

Claude 3.7 Sonnet is insane... just one prompt, and you get these animated cards in HTML, JS, and CSS. You can try it for free in VSCode using the CodeGPT extension. Sharing the prompt in this thread 👇
0:20

Claude 3.7 Sonnet is insane... just one prompt, and you get these animated cards in HTML, JS, and CSS. You can try it for free in VSCode using the CodeGPT extension. Sharing the prompt in this thread 👇

Daniel San

117,693 次观看 • 1 年前

Gravity with JavaScript && deviceorientation ʕ´•ᴥ•`ʔ
0:32

Gravity with JavaScript && deviceorientation ʕ´•ᴥ•`ʔ

jhey ʕ•ᴥ•ʔ

139,353 次观看 • 1 年前

Take any Python code and build a dynamic GUI on top of it by dragging and dropping components. Python is already the most popular language in the world. This makes it even better! The attached video is only 45 seconds. It will show you how it works. Here is the important part: You can now build an interface for your Python code without learning HTML, JavaScript, or CSS. Go to this link to try this: Remember to work smarter, not harder! Thanks to the team behind Taipy for partnering with me on this post.
0:45

Take any Python code and build a dynamic GUI on top of it by dragging and dropping components. Python is already the most popular language in the world. This makes it even better! The attached video is only 45 seconds. It will show you how it works. Here is the important part: You can now build an interface for your Python code without learning HTML, JavaScript, or CSS. Go to this link to try this: Remember to work smarter, not harder! Thanks to the team behind Taipy for partnering with me on this post.

Santiago

155,179 次观看 • 1 年前

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! 👇
0:25

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

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

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

Ali Reza

103,241 次观看 • 3 年前

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

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

CSS Tip! ✨ You can use background-attachment to fix backgrounds to the viewport 🤙 card { background:radial-gradient(circle at var(--x) var(--y), ...); background-attachment:fixed; } JS to get the cursor position but use the same bg for a spotlight 🔦 CodePen.IO link below 👇
0:20

CSS Tip! ✨ You can use background-attachment to fix backgrounds to the viewport 🤙 card { background:radial-gradient(circle at var(--x) var(--y), ...); background-attachment:fixed; } JS to get the cursor position but use the same bg for a spotlight 🔦 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

489,839 次观看 • 3 年前

Thought it might be fun to dub some Tenna comics? You should share some below if you have any you'd like to suggest! 👇
1:32

Thought it might be fun to dub some Tenna comics? You should share some below if you have any you'd like to suggest! 👇

Robin Nelson

44,806 次观看 • 2 天前