CLOSE

CSS
Boxes

(14 submissions)

A nice hand-picked selection of snippets and sets of CSS boxes featuring different shadows, designs, and compositions.

CLOSE
  • A CSS filter-less technique for creating a box that blurs the background image on the area that the box occupies as you drag it around the viewport, it has the two images (normal and blurred) loaded on the website, only showing the part of the blurred one wherever the box is.

  • A beautifully crafted usage example for legomushroom's paper peel effect that features animations for SVG illustrations emulating the exciting sensation of peeling of a gift box.

  • A code snippet that generates 8 stitched bordered boxes featuring different types of shadows each supporting full responsiveness, styled in pure CSS individually.

  • A beautiful pure CSS crafted login box responsive to always be centered that features an SVG gaussian blur filter from w3.org set to not create any visual distortion or inaccuracies of the video background modified by CSS blur filters and set translucid by RGBA parameters.

  • A smoothly transformable Material Design card styled with basic styles and card modifiers Less that are triggered with JavaScipt as you click on each of the titles, smoothly changing the card shape and layout, as well as the viewport's background color.

  • A 3D box built with pure CSS that is animated to roll-over and show all of its six faces which can hold completely different content.

  • A simple but appealing pure CSS technique that allows you to flip over divs with different content on each side on hover events, in this snippet the flipping is triggered on hover or tapping events with JavaScript, although it can also be done without JS.

  • A set of 8 different pure CSS shadow effects for boxes created by mere usage of CSS WebKit box shadow and transform properties.

  • An amazing CSS lay outing technique for div boxes styled with Sass that lets them be split by a slight slant that can be modified by its width in pixels and a few calculations of offset to bring it back to the center.

  • A set of Material Design cards and buttons that feature shadows built with Less Hat which provides the buttons with the functionality of being raised and their shadows fade bigger as you tap and hold on them.

  • A set of shadows purely crafted in CSS with the box-shadow property and RGBA parameters. They were created based on Google's Material Design living style guide where 5 different z-depth levels are specified for Android OS cards.

  • A set of 3 nice outline animations for boxes crafted with pure CSS featuring an underlining, a wiggled bottom line box, and a transition to a marked checkbox.

  • A set of 9 Less made shadows for boxes created with the shadow, radius, transform, and origin functions and applying custom values to each of the div classes.

  • A great collection of 45 different HTML box folding and shadow effects and sticky tape-like ribbons created with pure CSS including a bonus of sliding doors.

Leave a comment

0 comments for CSS Boxes
This a test message in global notification
Your download will start shortly.

Done!

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Browse
Done

Thank You!

Your post has been received, and will be reviewed by a curator

|