DEV Community

Cover image for Code snippets to recreate those cool effects seen on famous(ish) sites
π•Šπ•’π•šπ•›π•  π”Ύπ•–π• π•£π•˜π•–
π•Šπ•’π•šπ•›π•  π”Ύπ•–π• π•£π•˜π•–

Posted on

Code snippets to recreate those cool effects seen on famous(ish) sites

#html #css #design

Today we will be looking at some snippets you can use to recreate those awesome effects you see on other sites.

Reebok Promo Image Transition - Codepen

R1ebok Promo Image Transition

The gradient pull quote as seen on Polygon - Codepen

The gradient pull quote as seen on Polygon

Facebook's scroll down to show sticky video popup - Codepen

Facebook's scroll down to show sticky video popup

Soldout Window sign from Electronic Object - Codepen

Soldout Window sign from Electronic Object

Stripe's navigation header - Codepen

Stripe's navigation header

The squiggle link effect as seen on TheOutline - Codepen

The squiggle link effect as seen on TheOutline

MomentsApp Video Loading - Codrops

MomentsApp Video Loading

Want more check out the deconstruction gallery on CodeMyUI.

Top comments (2)

Collapse
 
niyasrahman profile image
niyasrahman •

happy to see you in dev.to .a big fan of your side-projects

Collapse
 
saijogeorge profile image
π•Šπ•’π•šπ•›π•  π”Ύπ•–π• π•£π•˜π•– •

Thanks Niyas.

Read next

srwaditya profile image

Understanding Lifecycle Events in React and Performance Optimization

Aditya Shrivastava -

eyalestrin profile image

Poor architecture decisions when migrating to the cloud

Eyal Estrin -

d3vlopes profile image

UI Patterns

Leandro Lopes -

thepracticaldev profile image

Congrats to our Frontend Challenge Winners!

dev.to staff -