DEV Community

Cover image for πŸš€ Futuristic Sci-Fi Card with Mind-Blowing Hover Effects using HTML and SCSS 🌌
Smit Prajapati
Smit Prajapati

Posted on

πŸš€ Futuristic Sci-Fi Card with Mind-Blowing Hover Effects using HTML and SCSS 🌌

I've always been attracted to the futuristic and science-fiction aesthetic. The sleek lines, bold colors and interactive elements in sci-fi movies and games hold an irresistible allure. I wanted to capture that essence in a web component.

Using clip-path for the Futuristic Design
The futuristic design of the card is achieved through the clip-path property. The polygon value of clip-path allows us to create custom shapes. In this case, it's used to give the card its unique, angled appearance.

Feel free to check out the full code and a live demo of the sci-fi card on CodePen.

Top comments (5)

Collapse
 
sadeeqabu90 profile image
sadeeq

Good

Collapse
 
smitprajapati profile image
Smit Prajapati

Thanks

Collapse
 
mohiyaddeen7 profile image
mohiyaddeen7

Nice idea. Loved itπŸ‘

Collapse
 
smitprajapati profile image
Smit Prajapati

Thanks 🀝

Collapse
 
viditgoel profile image
Vidit Goel

Great Design πŸ‘Œ