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.

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

Ali Reza

35,520 subscribers

103,241 views • 3 years ago •via X (Twitter)

Arts Science & Technology Education

Anya Rossi• Live Now

Private livecam show

10 Comments

Origamista de papel de trouxa3 years ago

@Ali_Developer05 Dude I have a question, what that "~" on ".container. items:hover ~ .items" means ?

Coder girl 👩‍💻3 years ago

@Ali_Developer05 Wow this is nice

Ejaj Ahmed3 years ago

@Ali_Developer05 Next level Ali🔥

RicOnTech3 years ago

@Ali_Developer05 Dude! How do you create this animations? Any online course available?

Ali Reza3 years ago

From YouTube.

Ali Sufian3 years ago

@Ali_Developer05 Nice 👍

Shivansh Bhatnagar3 years ago

@Ali_Developer05 dude that amazing

Hrushikesh Kokardekar3 years ago

@Ali_Developer05 That's great work @Ali_Developer05

Stephen3 years ago

@Ali_Developer05 Awesome bruh!

Tahir Hussain3 years ago

@Ali_Developer05 Css geek

Related Videos

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

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

Viki ✨

908,753 views • 2 years ago

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

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

Viki ✨

385,849 views • 2 years ago

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

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

Viki ✨

401,482 views • 2 years ago

Building a Nike E-commerce Website using HTML, CSS, JavaScript with Stripe Payment Integration

Building a Nike E-commerce Website using HTML, CSS, JavaScript with Stripe Payment Integration

Dhanian 🗯️

13,672 views • 1 year ago

😎👋As promised, I've recreated it on @codepen ✨ I loved making it & animating the gradients🌈 Using: - CSS keyframes ✅ - CSS custom properties ✅ - CSS variables ✅ - NO JS ❌ Link: CrossBrowser incoming ➡️ #css #FrontEndDev

😎👋As promised, I've recreated it on @codepen ✨ I loved making it & animating the gradients🌈 Using: - CSS keyframes ✅ - CSS custom properties ✅ - CSS variables ✅ - NO JS ❌ Link: CrossBrowser incoming ➡️ #css #FrontEndDev

Luky - A$AP Luky

103,204 views • 3 years ago

FINALLY!!! Built this Exclusive Fully Responsive Animated Multifunctional Portfolio Website with Light/Dark mode using HTML, CSS & Javascript How's it? Drop your comments 😊 SOURCE CODE 👇

FINALLY!!! Built this Exclusive Fully Responsive Animated Multifunctional Portfolio Website with Light/Dark mode using HTML, CSS & Javascript How's it? Drop your comments 😊 SOURCE CODE 👇

Raja - impeccify.com 🚀

192,258 views • 3 years ago

Particle visualization with shockwaves and themes. Uses JavaScript, Three.js for WebGL, and GLSL shaders for visual effects. Source code/CodePen link in the comment below. 👇

Particle visualization with shockwaves and themes. Uses JavaScript, Three.js for WebGL, and GLSL shaders for visual effects. Source code/CodePen link in the comment below. 👇

Puneet | Techartist

13,326 views • 1 year ago

How my games are going... #javascript #HTML #CSS #IndieGameDev #indiegame #indiedev #NodeJS #mysql

How my games are going... #javascript #HTML #CSS #IndieGameDev #indiegame #indiedev #NodeJS #mysql

Lord Doomer Protector of the Omniverse

27,028 views • 1 year ago

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.

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 views • 5 months ago

GPT-4 de un boceto hecho a mano en papel a una página completamente funcional, html, css y javascript.

GPT-4 de un boceto hecho a mano en papel a una página completamente funcional, html, css y javascript.

Damián Catanzaro ☕️

152,590 views • 3 years ago

Los 3 cursos de Google para aprender desarrollo web desde cero: HTML, CSS y JavaScript ↓

Los 3 cursos de Google para aprender desarrollo web desde cero: HTML, CSS y JavaScript ↓

Brais Moure

20,946 views • 8 months ago

A 3D scene built with Three.js, WebGL, and JavaScript. Features shape changing with a click/tap, camera navigation via dragging and scrolling, and adjustable bloom effects and animation properties. Source code/CodePen link in the comment below. 👇

A 3D scene built with Three.js, WebGL, and JavaScript. Features shape changing with a click/tap, camera navigation via dragging and scrolling, and adjustable bloom effects and animation properties. Source code/CodePen link in the comment below. 👇

Techartist

11,390 views • 1 year ago

Struggling to make your UI stand out? CSSnippets – A collection of modern, reusable UI components! ✨Ready-to-use with HTML, CSS, React & Tailwind CSS ✨No frameworks, just pure CSS ✨Clean, minimal, and beautiful 🔗 Explore now: Save it for later! 🔖

Struggling to make your UI stand out? CSSnippets – A collection of modern, reusable UI components! ✨Ready-to-use with HTML, CSS, React & Tailwind CSS ✨No frameworks, just pure CSS ✨Clean, minimal, and beautiful 🔗 Explore now: Save it for later! 🔖

Shefali

22,953 views • 1 year ago

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

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 views • 2 years 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 • 5 months ago

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 👇

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 👇

jhey ʕ•ᴥ•ʔ

1,187,422 views • 3 years ago

用 GPT-5 Thinking 做了天气卡片的经典测试，只能说拉中之拉，这都啥啊 Prompt：Create a single HTML file containing CSS and JavaScript to generate an animated weather card. The card should visually represent the following weather conditions with distinct animations: Wind: (e.g., moving clouds, swaying trees, or wind lines) Rain: (e.g., falling raindrops, puddles forming) Sun: (e.g., shining rays, bright background) Snow: (e.g., falling snowflakes, snow accumulating) Show all the weather card side by side The card should have a dark background. Provide all the HTML, CSS, and JavaScript code within this single file. The JavaScript should include a way to switch between the different weather conditions (e.g., a function or a set of buttons) to demonstrate the animations for each.

用 GPT-5 Thinking 做了天气卡片的经典测试，只能说拉中之拉，这都啥啊 Prompt：Create a single HTML file containing CSS and JavaScript to generate an animated weather card. The card should visually represent the following weather conditions with distinct animations: Wind: (e.g., moving clouds, swaying trees, or wind lines) Rain: (e.g., falling raindrops, puddles forming) Sun: (e.g., shining rays, bright background) Snow: (e.g., falling snowflakes, snow accumulating) Show all the weather card side by side The card should have a dark background. Provide all the HTML, CSS, and JavaScript code within this single file. The JavaScript should include a way to switch between the different weather conditions (e.g., a function or a set of buttons) to demonstrate the animations for each.

-Zho-

20,344 views • 10 months ago

An interactive 3D electric sphere rendered via JavaScript, Three.js, and WebGL. Custom GLSL shaders generate dynamic lightning and particle effects that react to user interaction. Source code/CodePen link in the comment below. 👇

An interactive 3D electric sphere rendered via JavaScript, Three.js, and WebGL. Custom GLSL shaders generate dynamic lightning and particle effects that react to user interaction. Source code/CodePen link in the comment below. 👇

Techartist

13,955 views • 1 year ago

🖤 UI-verse 👉 851 open-source UI elements for any project ◆ 100% free for personal or commercial use ◆ Made with HTML & CSS ◆ Created by a community of over 10,000 contributors #design #uxui #ui #html #css #uidesign #components

🖤 UI-verse 👉 851 open-source UI elements for any project ◆ 100% free for personal or commercial use ◆ Made with HTML & CSS ◆ Created by a community of over 10,000 contributors #design #uxui #ui #html #css #uidesign #components

Adham Dannaway

72,032 views • 3 years ago

A cute lamp login page, made with HTML, CSS, JS😱🥹

A cute lamp login page, made with HTML, CSS, JS😱🥹

F.O.L.A

48,759 views • 3 months ago