19 CSS Frames
This collection offers creative ways to build decorative frames that go beyond the standard border property. It explores the power of border-image combined with gradients to create complex patterns without external files, alongside the use of clip-path and masks for non-standard geometric frames. Special attention is paid to animated effects: ::before and ::after pseudo-elements are leveraged to create “drawing” borders and moving contours, adding dynamics and interactivity to the interface.
Last updated:
Art Deco Card
An elegant Art Deco style card created purely with CSS/SCSS, utilizing a sophisticated technique with pseudo-elements to construct complex, multi-layered geometric borders and corners.
Fancy Title with CSS Responsive Frame
Creating a complex decorative title where breaks in the border are elegantly implemented using CSS Grid and pseudo-elements. Padding sizes adapt dynamically thanks to a CSS variable calculated by a mixin.
CSS3 Picture Frame
A pure CSS image styling technique that creates a realistic framed effect using concentric pseudo-elements.
