examples

CSS Examples

Basic Concepts

• Backgrounds Notes on background images, gradients, layers
• The box-model Basic box-model used by CSS for each element’s layout
• Positioning Elements Examples of how elements behave in various positioning contexts
• Sizing a Page or Element A look at default sizing, standard size resets, and setting the size of a page or element
• Transformations using the transform property
• z-index and Stacking Contexts

CSS Shape Examples

• Circle Shapes from radial-gradient()
• Shapes from Borders and Box Shadows
• Shapes from Gradients
• Shapes from clip-path()

Code on:

• Github
• Codepen (no clip-path() shapes)

Specific Elements

• details-summary Styling the HTML details and summary elements

Layout Examples

• Grid Auto Columns Responsive columns with one line of CSS
• One Line CSS Layouts 10 examples of 1-line CSS layouts based on Una Kravets examples

Transition and Animation Examples

• Card Hover
• Icon Reveal

Code is on Codepen and Github