{
  "data": [
    {
      "id": "border-with-top-triangle",
      "type": "snippetListing",
      "title": "Border with top triangle",
      "attributes": {
        "text": "Creates a text container with a triangle at the top.\n\n",
        "tags": [
          "visual",
          "beginner"
        ]
      },
      "meta": {
        "hash": "f052c85dc45dcf8bf4d38c714acece6c6c7ffbd483b3ba76815564da79313fa4"
      }
    },
    {
      "id": "bouncing-loader",
      "type": "snippetListing",
      "title": "Bouncing loader",
      "attributes": {
        "text": "Creates a bouncing loader animation.\n\n",
        "tags": [
          "animation",
          "intermediate"
        ]
      },
      "meta": {
        "hash": "8175388f6fdc96c53c49691c1831a147944955fc1d9a806adb790e3d242d5a86"
      }
    },
    {
      "id": "box-sizing-reset",
      "type": "snippetListing",
      "title": "Box-sizing reset",
      "attributes": {
        "text": "Resets the box-model so that `width`s and `height`s are not affected by their `border`s or `padding`.\n\n",
        "tags": [
          "layout",
          "beginner"
        ]
      },
      "meta": {
        "hash": "d5719ca8b62a21149aa2e34f2d45e76045e2fe5eae5b14093333e9ca15b4a97c"
      }
    },
    {
      "id": "button-border-animation",
      "type": "snippetListing",
      "title": "Button border animation",
      "attributes": {
        "text": "Creates a border animation on hover.\n\n",
        "tags": [
          "animation",
          "intermediate"
        ]
      },
      "meta": {
        "hash": "5454e3c5fb06cc5b7bc36d37ef41be684766aae122214cc34023e225c76fa454"
      }
    },
    {
      "id": "circle",
      "type": "snippetListing",
      "title": "Circle",
      "attributes": {
        "text": "Creates a circle shape with pure CSS.\n\n",
        "tags": [
          "visual",
          "beginner"
        ]
      },
      "meta": {
        "hash": "60ac5a7cb7e2c24c936b267ac74d649052c9aaa80810278720b5b5a14fee1562"
      }
    },
    {
      "id": "clearfix",
      "type": "snippetListing",
      "title": "Clearfix",
      "attributes": {
        "text": "Ensures that an element self-clears its children.\n\n",
        "tags": [
          "layout",
          "beginner"
        ]
      },
      "meta": {
        "hash": "8a1beb75b1efe89f11f1bac944a836feac26604d5bc06bdb026dd0bd6650ad95"
      }
    },
    {
      "id": "constant-width-to-height-ratio",
      "type": "snippetListing",
      "title": "Constant width to height ratio",
      "attributes": {
        "text": "Given an element of variable width, it will ensure its height remains proportionate in a responsive fashion (i.e. its width to height ratio remains constant).\n\n",
        "tags": [
          "layout"
        ]
      },
      "meta": {
        "hash": "d040b9f24aa4b6a7c3359c5a6407850aac0910796334192adad4cfb435c4ec26"
      }
    },
    {
      "id": "counter",
      "type": "snippetListing",
      "title": "Counter",
      "attributes": {
        "text": "Counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used.\n\n",
        "tags": [
          "visual",
          "advanced"
        ]
      },
      "meta": {
        "hash": "6ba5182f3edbbd20e34ac9a7c92608eca4afcc855aa993574c0bcc3e21df8487"
      }
    },
    {
      "id": "custom-scrollbar",
      "type": "snippetListing",
      "title": "Custom scrollbar",
      "attributes": {
        "text": "Customizes the scrollbar style for the document and elements with scrollable overflow, on WebKit platforms.\n\n",
        "tags": [
          "visual",
          "advanced"
        ]
      },
      "meta": {
        "hash": "e5544c894ee3cd4ce3352d10331e2f321c6d30b4a0a667434286c6d4951c3b0a"
      }
    },
    {
      "id": "custom-text-selection",
      "type": "snippetListing",
      "title": "Custom text selection",
      "attributes": {
        "text": "Changes the styling of text selection.\n\n",
        "tags": [
          "visual",
          "beginner"
        ]
      },
      "meta": {
        "hash": "1c29d55847263d12852dfd752653287237c885cadb369ee3db28701029f8bcc2"
      }
    },
    {
      "id": "disable-selection",
      "type": "snippetListing",
      "title": "Disable selection",
      "attributes": {
        "text": "Makes the content unselectable.\n\n",
        "tags": [
          "interactivity",
          "beginner"
        ]
      },
      "meta": {
        "hash": "e12b82431230f27651567c0c23dd5f26eca9e4ded24bb6f3175432ab66256096"
      }
    },
    {
      "id": "display-table-centering",
      "type": "snippetListing",
      "title": "Display table centering",
      "attributes": {
        "text": "Vertically and horizontally centers a child element within its parent element using `display: table` (as an alternative to `flexbox`).\n\n",
        "tags": [
          "layout",
          "intermediate"
        ]
      },
      "meta": {
        "hash": "83c7806b0be2e50ca34f313912f9cb90682852790e6d0105a635f781212fa5b1"
      }
    },
    {
      "id": "donut-spinner",
      "type": "snippetListing",
      "title": "Donut spinner",
      "attributes": {
        "text": "Creates a donut spinner that can be used to indicate the loading of content.\n\n",
        "tags": [
          "animation",
          "intermediate"
        ]
      },
      "meta": {
        "hash": "e9d886bf0718a408e719f978370e4e32e62222322c5641fb62be2968f6f95884"
      }
    },
    {
      "id": "drop-cap",
      "type": "snippetListing",
      "title": "Drop cap",
      "attributes": {
        "text": "Makes the first letter in the first paragraph bigger than the rest of the text - often used to signify the beginning of a new section.\n\n",
        "tags": [
          "visual",
          "beginner"
        ]
      },
      "meta": {
        "hash": "e7859bc139713ffe59a05904f6175e9578ad111ebe3405d58599846c44801606"
      }
    },
    {
      "id": "dynamic-shadow",
      "type": "snippetListing",
      "title": "Dynamic shadow",
      "attributes": {
        "text": "Creates a shadow similar to `box-shadow` but based on the colors of the element itself.\n\n",
        "tags": [
          "visual",
          "intermediate"
        ]
      },
      "meta": {
        "hash": "d22e3c4c20c8c3effbb25e59de03f1153f1d7808b695bef253ea90d657d59012"
      }
    },
    {
      "id": "easing-variables",
      "type": "snippetListing",
      "title": "Easing variables",
      "attributes": {
        "text": "Variables that can be reused for `transition-timing-function` properties, more powerful than the built-in `ease`, `ease-in`, `ease-out` and `ease-in-out`.\n\n",
        "tags": [
          "animation",
          "beginner"
        ]
      },
      "meta": {
        "hash": "107cca03431b28d491f871d2267992a7da5b9f62765325bf5f57236574968ac2"
      }
    },
    {
      "id": "etched-text",
      "type": "snippetListing",
      "title": "Etched text",
      "attributes": {
        "text": "Creates an effect where text appears to be \"etched\" or engraved into the background.\n\n",
        "tags": [
          "visual",
          "intermediate"
        ]
      },
      "meta": {
        "hash": "68da5c2e7399979db3aeb1022d13b0490fc71d55d068597544954706c7027bef"
      }
    },
    {
      "id": "evenly-distributed-children",
      "type": "snippetListing",
      "title": "Evenly distributed children",
      "attributes": {
        "text": "Evenly distributes child elements within a parent element.\n\n",
        "tags": [
          "layout",
          "intermediate"
        ]
      },
      "meta": {
        "hash": "5b4505f5052c203bbf0f79410af09801487250b65591fb5113da40b27c6cfb08"
      }
    },
    {
      "id": "fit-image-in-container",
      "type": "snippetListing",
      "title": "Fit image in container",
      "attributes": {
        "text": "Changes the fit and position of an image within its container while preserving its aspect ratio. Previously only possible using a background image and the `background-size` property.\n\n",
        "tags": [
          "layout",
          "visual"
        ]
      },
      "meta": {
        "hash": "5d09d5e54b7436f047db61223cff15dce2f17f6cffe5e71e0f9061337de3068e"
      }
    },
    {
      "id": "flexbox-centering",
      "type": "snippetListing",
      "title": "Flexbox centering",
      "attributes": {
        "text": "Horizontally and vertically centers a child element within a parent element using `flexbox`.\n\n",
        "tags": [
          "layout",
          "beginner"
        ]
      },
      "meta": {
        "hash": "919f11ed7b3bb10d80c0379103cbd1af620ee93ba760edc57c379063131c474f"
      }
    },
    {
      "id": "focus-within",
      "type": "snippetListing",
      "title": "Focus Within",
      "attributes": {
        "text": "Changes the appearance of a form if any of its children are focused.\n\n",
        "tags": [
          "visual",
          "interactivity",
          "intermediate"
        ]
      },
      "meta": {
        "hash": "9fa1ed419618b640c286644ceae4235101b0f01014c7d82f944a76c9bbc6e39c"
      }
    },
    {
      "id": "fullscreen",
      "type": "snippetListing",
      "title": "Fullscreen",
      "attributes": {
        "text": "The `:fullscreen` CSS pseudo-element represents an element that's displayed when the browser is in fullscreen mode.\n\n",
        "tags": [
          "visual",
          "advanced"
        ]
      },
      "meta": {
        "hash": "a58ee2656271bb14a6a51e91517ca08f5c6ee86f9f3286e977507af49363cd86"
      }
    },
    {
      "id": "ghost-trick",
      "type": "snippetListing",
      "title": "Ghost trick",
      "attributes": {
        "text": "Vertically centers an element in another.\n\n",
        "tags": [
          "layout",
          "intermediate"
        ]
      },
      "meta": {
        "hash": "0515f03b1505eafa21e0d0d7377facbe4aaa9159996906dd4ed2857ee137073a"
      }
    },
    {
      "id": "gradient-text",
      "type": "snippetListing",
      "title": "Gradient text",
      "attributes": {
        "text": "Gives text a gradient color.\n\n",
        "tags": [
          "visual",
          "intermediate"
        ]
      },
      "meta": {
        "hash": "9620da48fb82b48a7c6b681854707b622a18c158f2db88c816e3b9c0d9b04523"
      }
    },
    {
      "id": "grid-centering",
      "type": "snippetListing",
      "title": "Grid centering",
      "attributes": {
        "text": "Horizontally and vertically centers a child element within a parent element using `grid`.\n\n",
        "tags": [
          "layout",
          "beginner"
        ]
      },
      "meta": {
        "hash": "c6ce214d8597cc068355174c86c7c3e8be586c68fb7fb18666d644b4458c0a22"
      }
    },
    {
      "id": "hairline-border",
      "type": "snippetListing",
      "title": "Hairline border",
      "attributes": {
        "text": "Gives an element a border equal to 1 native device pixel in width, which can look very sharp and crisp.\n\n",
        "tags": [
          "visual",
          "advanced"
        ]
      },
      "meta": {
        "hash": "3d33020a7ae2dc94aa6cf41803897323068158faff9133ce5d60cb927d647a9f"
      }
    },
    {
      "id": "hamburger-button",
      "type": "snippetListing",
      "title": "Hamburger Button",
      "attributes": {
        "text": "Displays a hamburger menu which transitions to a cross on hover.\n\n",
        "tags": [
          "interactivity",
          "beginner"
        ]
      },
      "meta": {
        "hash": "06f323835f89d7e055e932ee67c23a9c5d2edeb7e62c1029c0528238e17a08f8"
      }
    },
    {
      "id": "height-transition",
      "type": "snippetListing",
      "title": "Height transition",
      "attributes": {
        "text": "Transitions an element's height from `0` to `auto` when its height is unknown.\n\n",
        "tags": [
          "animation",
          "intermediate"
        ]
      },
      "meta": {
        "hash": "266740a9a3a65bcfede78868170a741359409690921ef9b57f73593b8b6d6e3f"
      }
    },
    {
      "id": "hover-shadow-box-animation",
      "type": "snippetListing",
      "title": "Hover shadow box animation",
      "attributes": {
        "text": "Creates a shadow box around the text when it is hovered.\n\n",
        "tags": [
          "animation",
          "intermediate"
        ]
      },
      "meta": {
        "hash": "b66a2a4c4c80fd0c64aaa15a9139e1273d6854fd75f0550d2625578792df828f"
      }
    },
    {
      "id": "hover-underline-animation",
      "type": "snippetListing",
      "title": "Hover underline animation",
      "attributes": {
        "text": "Creates an animated underline effect when the text is hovered over.\n\n",
        "tags": [
          "animation",
          "advanced"
        ]
      },
      "meta": {
        "hash": "b67109fcb1f945f671c62fc67c3bff9f32290bbfb0ef739995f1a94fd952dfd5"
      }
    },
    {
      "id": "last-item-with-remaining-available-height",
      "type": "snippetListing",
      "title": "Last item with remaining available height",
      "attributes": {
        "text": "Take advantage of available viewport space by giving the last element the remaining available space in current viewport, even when resizing the window.\n\n",
        "tags": [
          "layout",
          "intermediate"
        ]
      },
      "meta": {
        "hash": "65a60a1552f0cc9cc1fbb1cfb30bb1a6a0e35f7313cb3d209c540a4483333370"
      }
    },
    {
      "id": "lobotomizedOwlSelector",
      "type": "snippetListing",
      "title": "Lobotomized Owl Selector",
      "attributes": {
        "text": "Sets an automatically inherited margin for all elements that follow other elements in the document.\n\n",
        "tags": [
          "layout",
          "beginner"
        ]
      },
      "meta": {
        "hash": "bf9ee261ea338f5c07c4df24ac6c976d9d0584de01552b0955a205628b947e53"
      }
    },
    {
      "id": "masonry-layout",
      "type": "snippetListing",
      "title": "Masonry Layout",
      "attributes": {
        "text": "Creates a vertical masonry layout using HTML and CSS.\n\n",
        "tags": [
          "layout",
          "advanced"
        ]
      },
      "meta": {
        "hash": "4bff5480f38e265090bed5d84cc8e7dc6d054570f65a168f1ccf381b19ffef48"
      }
    },
    {
      "id": "mouse-cursor-gradient-tracking",
      "type": "snippetListing",
      "title": "Mouse cursor gradient tracking",
      "attributes": {
        "text": "A hover effect where the gradient follows the mouse cursor.\n\n",
        "tags": [
          "visual",
          "interactivity",
          "advanced"
        ]
      },
      "meta": {
        "hash": "159c33e454099f02ef387c5392aec044a5a6d67b0a56cb391d2a7a6f59e1f6d2"
      }
    },
    {
      "id": "navigation-list-item-hover-and-focus-effect",
      "type": "snippetListing",
      "title": "Navigation list item hover and focus effect",
      "attributes": {
        "text": "Fancy hover and focus effect at navigation items using transform CSS property.\n\n",
        "tags": [
          "visual",
          "beginner"
        ]
      },
      "meta": {
        "hash": "081120d282bf5041a82e0fd82d1b90afb28591eaaf6c2dfb9194d23db5b8d3a4"
      }
    },
    {
      "id": "not-selector",
      "type": "snippetListing",
      "title": ":not selector",
      "attributes": {
        "text": "The `:not` pseudo selector is useful for styling a group of elements, while leaving the last (or specified) element unstyled.\n\n",
        "tags": [
          "visual",
          "beginner"
        ]
      },
      "meta": {
        "hash": "847dbaae8802781fa073cc92c6891ea0a0c39752f95266fcb4db7812dc78640e"
      }
    },
    {
      "id": "offscreen",
      "type": "snippetListing",
      "title": "Offscreen",
      "attributes": {
        "text": "Completely hides an element visually and positionally in the DOM while still allowing it to be accessible. \nProvides an alternative to `display: none` (not readable by screen readers) and `visibility: hidden` (takes up physical space in the DOM).\n\n",
        "tags": [
          "layout",
          "visual",
          "intermediate"
        ]
      },
      "meta": {
        "hash": "797f492e370c5401e198baf94ce31ecc7bc130f6d609814ec81cb4c70f1a608f"
      }
    },
    {
      "id": "overflow-scroll-gradient",
      "type": "snippetListing",
      "title": "Overflow scroll gradient",
      "attributes": {
        "text": "Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled.\n\n",
        "tags": [
          "visual",
          "intermediate"
        ]
      },
      "meta": {
        "hash": "8803e417053172085af754a3a63531c33cbf78f2c1a7c95a6e392be2adf9551a"
      }
    },
    {
      "id": "popout-menu",
      "type": "snippetListing",
      "title": "Popout menu",
      "attributes": {
        "text": "Reveals an interactive popout menu on hover and focus.\n\n",
        "tags": [
          "interactivity",
          "intermediate"
        ]
      },
      "meta": {
        "hash": "4103e63398b3bc9f646ff4e528ff28aad8b10d666b541254575eb257af43311b"
      }
    },
    {
      "id": "pretty-text-underline",
      "type": "snippetListing",
      "title": "Pretty text underline",
      "attributes": {
        "text": "A nicer alternative to `text-decoration: underline` where descenders do not clip the underline.\nNatively implemented as `text-decoration-skip-ink: auto` but it has less control over the underline.\n\n",
        "tags": [
          "visual",
          "intermediate"
        ]
      },
      "meta": {
        "hash": "8e513bfd8e3e72d073e2411fd903a978178c5dcf8b5aa8e603dc653dbba293d6"
      }
    },
    {
      "id": "pulse-loader",
      "type": "snippetListing",
      "title": "Pulse loader",
      "attributes": {
        "text": "Creates a pulse effect loader animation using the `animation-delay` property.\n\n",
        "tags": [
          "animation",
          "beginner"
        ]
      },
      "meta": {
        "hash": "11f0b0631cb97ab53a144c263648c155527e570e0ceefaea59201c39de73b57b"
      }
    },
    {
      "id": "reset-all-styles",
      "type": "snippetListing",
      "title": "Reset all styles",
      "attributes": {
        "text": "Resets all styles to default values with one property. This will not affect `direction` and `unicode-bidi` properties.\n\n",
        "tags": [
          "visual",
          "beginner"
        ]
      },
      "meta": {
        "hash": "f9542b2db5cd49f09e53b3af8348c58c973244bdeede87857e49660c6e713d65"
      }
    },
    {
      "id": "shape-separator",
      "type": "snippetListing",
      "title": "Shape separator",
      "attributes": {
        "text": "Uses an SVG shape to separate two different blocks to create more a interesting visual appearance compared to standard horizontal separation.\n\n",
        "tags": [
          "visual",
          "intermediate"
        ]
      },
      "meta": {
        "hash": "b14f91e079c09e854ee0579eed3246c792794fb8d1b27deb6bec15df23f24917"
      }
    },
    {
      "id": "sibling-fade",
      "type": "snippetListing",
      "title": "Sibling fade",
      "attributes": {
        "text": "Fades out the siblings of a hovered item.\n\n",
        "tags": [
          "interactivity",
          "intermediate"
        ]
      },
      "meta": {
        "hash": "35bfb52929dcbd21c120d555c9d3382154f47b661d31722ffb3d21281021bba3"
      }
    },
    {
      "id": "staggered-animation",
      "type": "snippetListing",
      "title": "Staggered animation",
      "attributes": {
        "text": "Creates a staggered animation for the elements of a list.\n\n",
        "tags": [
          "animation",
          "advanced"
        ]
      },
      "meta": {
        "hash": "b1dc6f9fcc5cc91b59e89864b568048040e1879b2fc165d580cd21bc3fb73e50"
      }
    },
    {
      "id": "system-font-stack",
      "type": "snippetListing",
      "title": "System font stack",
      "attributes": {
        "text": "Uses the native font of the operating system to get close to a native app feel.\n\n",
        "tags": [
          "visual",
          "beginner"
        ]
      },
      "meta": {
        "hash": "be5f2dfdc4cd4cafea8fbe197e22b1df40a40e10b61c17ea86af2b4f72bba127"
      }
    },
    {
      "id": "tile-layout-using-inline-block",
      "type": "snippetListing",
      "title": "3-tile layout",
      "attributes": {
        "text": "Align items horizontally using `display: inline-block` to create a 3-tile layout.\n\n",
        "tags": [
          "layout",
          "beginner"
        ]
      },
      "meta": {
        "hash": "ba4688945c309db9b6255f4555299034a67ea583e4e8db2806085c1c257b736f"
      }
    },
    {
      "id": "toggle-switch",
      "type": "snippetListing",
      "title": "Toggle switch",
      "attributes": {
        "text": "Creates a toggle switch with CSS only.\n\n",
        "tags": [
          "visual",
          "interactivity",
          "beginner"
        ]
      },
      "meta": {
        "hash": "4fa08671fcaa73e3223af229c5844c3c2fa370593a4af76a9130f45f2c67b6ff"
      }
    },
    {
      "id": "transform-centering",
      "type": "snippetListing",
      "title": "Transform centering",
      "attributes": {
        "text": "Vertically and horizontally centers a child element within its parent element using `position: absolute` and `transform: translate()` (as an alternative to `flexbox` or `display: table`). Similar to `flexbox`, this method does not require you to know the height or width of your parent or child so it is ideal for responsive applications.\n\n",
        "tags": [
          "layout"
        ]
      },
      "meta": {
        "hash": "4a09dc7c545b1dce1716ed04c0a04344d480958c21fb17ddab1207e05fe52c33"
      }
    },
    {
      "id": "transform-detransform",
      "type": "snippetListing",
      "title": "Transform - Detransform",
      "attributes": {
        "text": "Sets a transform on the parent element and de-transforms the child elements, so they are not affected by the transform.\nThis allows for some neat effects such as skewed buttons.\n\n",
        "tags": [
          "visual",
          "beginner"
        ]
      },
      "meta": {
        "hash": "a0aea16855c7976812cf98e523babf29e8a97c567f14e91a6785977ace9f1fc2"
      }
    },
    {
      "id": "triangle",
      "type": "snippetListing",
      "title": "Triangle",
      "attributes": {
        "text": "Creates a triangle shape with pure CSS.\n\n",
        "tags": [
          "visual",
          "beginner"
        ]
      },
      "meta": {
        "hash": "38accddc3c57f22a326ef7ba33bed5cb34340a7ffdc01d3b9e397d08f5b9c017"
      }
    },
    {
      "id": "truncate-text-multiline",
      "type": "snippetListing",
      "title": "Truncate text multiline",
      "attributes": {
        "text": "If the text is longer than one line, it will be truncated for `n` lines and end with an gradient fade.\n\n",
        "tags": [
          "layout",
          "intermediate"
        ]
      },
      "meta": {
        "hash": "a30287149e833b454deea446359d51554640ad3a57cd2460d8519c376077b8b4"
      }
    },
    {
      "id": "truncate-text",
      "type": "snippetListing",
      "title": "Truncate text",
      "attributes": {
        "text": "If the text is longer than one line, it will be truncated and end with an ellipsis `…`.\n\n",
        "tags": [
          "layout",
          "beginner"
        ]
      },
      "meta": {
        "hash": "4ce872446c7950c9450e56ab2251c7cfcd473a1c9b2a64baa7c9d6b029264796"
      }
    },
    {
      "id": "zebra-striped-list",
      "type": "snippetListing",
      "title": "Zebra striped list",
      "attributes": {
        "text": "Creates a striped list with alternating background colors, which is useful for differentiating siblings that have content spread across a wide row.\n\n",
        "tags": [
          "visual",
          "beginner"
        ]
      },
      "meta": {
        "hash": "0a3b82b164fd41e50e0e258099a5dedd8497206acf19c85738b6dd946ba7389e"
      }
    }
  ],
  "meta": {
    "specification": "http://jsonapi.org/format/",
    "type": "snippetListingArray",
    "language": {
      "short": "css",
      "long": "CSS"
    },
    "otherLanguages": [
      {
        "short": "html",
        "long": "HTML"
      },
      {
        "short": "js",
        "long": "JavaScript"
      }
    ]
  }
}