Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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 ʕ•ᴥ•ʔ

147,717 subscribers

1,187,670 Aufrufe • vor 3 Jahren •via X (Twitter)

BildungWissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von jhey ▲🐻🎈
jhey ▲🐻🎈vor 3 Jahren

Here's that @CodePen link! 👋

Profilbild von Joie Chung
Joie Chungvor 3 Jahren

@CodePen I love this! 👩🏻‍🚀

Profilbild von jhey ▲🐻🎈
jhey ▲🐻🎈vor 3 Jahren

@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! 🙏

Profilbild von Cosmic Red
Cosmic Redvor 3 Jahren

@CodePen YOU ROCK! 🙌

Profilbild von Kenshi 🍉
Kenshi 🍉vor 3 Jahren

@CodePen holy shit lol

Profilbild von @jamessocol.com #solidarity
@jamessocol.com #solidarityvor 3 Jahren

@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

Profilbild von jhey ▲🐻🎈
jhey ▲🐻🎈vor 3 Jahren

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

Profilbild von ChartJockey
ChartJockeyvor 3 Jahren

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

Profilbild von A Real !Bot
A Real !Botvor 3 Jahren

@CodePen you're having too much fun.

Profilbild von YohanesRay
YohanesRayvor 3 Jahren

@CodePen so cool 🔥 🐻

Ähnliche Videos

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 ✨

909,399 Aufrufe • vor 2 Jahren

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,728 Aufrufe • vor 3 Jahren

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,877 Aufrufe • vor 3 Jahren

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,472 Aufrufe • vor 3 Jahren

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 ✨

386,084 Aufrufe • vor 3 Jahren

Today I completed this Fully Responsive X Clone Made this with just HTML and CSS. It took me 3 days to complete it and I am very happy with the results. 😁 I think its time to move on to bigger challenges now! JavaScript here I come 🚀
1:49

Today I completed this Fully Responsive X Clone Made this with just HTML and CSS. It took me 3 days to complete it and I am very happy with the results. 😁 I think its time to move on to bigger challenges now! JavaScript here I come 🚀

Shubh Sharma

87,251 Aufrufe • vor 3 Jahren

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,244 Aufrufe • vor 3 Jahren

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,412 Aufrufe • vor 9 Monaten

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,359 Aufrufe • vor 1 Jahr

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 ʕ•ᴥ•ʔ

434,072 Aufrufe • vor 3 Jahren

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,299 Aufrufe • vor 3 Jahren

Here it is... ✨Added some extra lil details, but these exercises are so much fun! You learn a ton. 😅 You can find the finished icon in the tweet below this...
7:23

Here it is... ✨Added some extra lil details, but these exercises are so much fun! You learn a ton. 😅 You can find the finished icon in the tweet below this...

James McDonald

13,692 Aufrufe • vor 2 Monaten

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 ʕ•ᴥ•ʔ

730,951 Aufrufe • vor 3 Jahren

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,764 Aufrufe • vor 1 Jahr

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,254 Aufrufe • vor 2 Jahren

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

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

jhey ʕ•ᴥ•ʔ

143,262 Aufrufe • vor 2 Jahren

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,711 Aufrufe • vor 3 Jahren

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

104,174 Aufrufe • vor 3 Jahren