Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

alirdev's profile picture

Ali Reza

35,520 subscribers

103,241 Aufrufe • vor 3 Jahren •via X (Twitter)

KunstWissenschaft & TechnologieBildung
LIVE

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von Origamista de papel de trouxa
Origamista de papel de trouxavor 3 Jahren

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

Profilbild von Coder girl 👩‍💻
Coder girl 👩‍💻vor 3 Jahren

@Ali_Developer05 Wow this is nice

Profilbild von Ejaj Ahmed
Ejaj Ahmedvor 3 Jahren

@Ali_Developer05 Next level Ali🔥

Profilbild von RicOnTech
RicOnTechvor 3 Jahren

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

Profilbild von Ali Reza
Ali Rezavor 3 Jahren

From YouTube.

Profilbild von Ali Sufian
Ali Sufianvor 3 Jahren

@Ali_Developer05 Nice 👍

Profilbild von Shivansh Bhatnagar
Shivansh Bhatnagarvor 3 Jahren

@Ali_Developer05 dude that amazing

Profilbild von Hrushikesh Kokardekar
Hrushikesh Kokardekarvor 3 Jahren

@Ali_Developer05 That's great work @Ali_Developer05

Profilbild von Stephen
Stephenvor 3 Jahren

@Ali_Developer05 Awesome bruh!

Profilbild von Tahir Hussain
Tahir Hussainvor 3 Jahren

@Ali_Developer05 Css geek

Ä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 ✨

908,753 Aufrufe • vor 2 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 ✨

385,849 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,482 Aufrufe • vor 2 Jahren

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

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

Dhanian 🗯️

13,672 Aufrufe • vor 1 Jahr

😎👋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
0:26

😎👋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 Aufrufe • vor 3 Jahren

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 👇
1:34

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

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. 👇
0:36

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

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

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

Lord Doomer Protector of the Omniverse

27,028 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 5 Monaten

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

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

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

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

Brais Moure

20,938 Aufrufe • vor 8 Monaten

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. 👇
0:40

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

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! 🔖
2:08

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

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

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

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

Benita Mbulu

14,430 Aufrufe • vor 5 Monaten

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 👇
0:42

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

用 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.
0:45

用 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 Aufrufe • vor 10 Monaten

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. 👇
0:48

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

🖤 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
0:22

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

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

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

F.O.L.A

48,759 Aufrufe • vor 3 Monaten