Close

Pure CSS masonry layout w/ Flexbox

This is another example of a CSS card layout with animations, designed using CSS and HTML. The cards are given focus animations, flipping animations and pulse animations in a hover events. The images are added into the form with their URLs. The font family for the body is set as 'Open Sans', sans-serif. The color palette for the form is set as $black = #000, $red = #e74c3c, $green = #26a65b, $grey = #6c7a89, $purple= #8e44ad, $blue = #1e8bc3, $white= #ecf0f1 and $darkred = #cf000f. The flipping panel is given a style of backface-visibility as hidden to hide the backface of the panel, a transform-style of preserve-3d, a transition of .25s, and a transform style of transform rotateY(180deg). The pulse animated panel is given a style set of transform-style as preserve-3d, perspective of 1000, transition of transform .25s ease 0s and a hover transformation style of transform scale(1.02). Source: https://codepen.io/jh3y/full/mPgyqw/

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.