{"id":378936,"date":"2024-06-24T11:04:58","date_gmt":"2024-06-24T18:04:58","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=378936"},"modified":"2024-08-05T10:57:14","modified_gmt":"2024-08-05T16:57:14","slug":"home","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/","title":{"rendered":"Home"},"content":{"rendered":"<div \n  class=\"post-slider\" style=\"background: \n  rgb(38 38 38);\"\n>\n\n  <div class=\"post-slider-header header-card\">\n    <h2>\n      Classic Tricks    <\/h2>\n    <p class=\"header-card-sponsor\">\n      Timeless CSS gems    <\/p>\n  <\/div>\n\n  <div class=\"mini-card-grid\">\n    <article class=\"mini-card module module-article \" id=\"mini-post-313469\">\n\n<time datetime=\"2020-06-22\" title=\"Originally published Jun 22, 2020\">\n    <strong>\n                   \n                                Article\n                  <\/strong>\n\n    on\n\n    Oct 6, 2021  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-105.html>\n      Scroll Animation    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=index-106.html aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=index-106.html>\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"mini-card module module-article \" id=\"mini-post-303153\">\n\n<time datetime=\"2020-02-17\" title=\"Originally published Feb 17, 2020\">\n    <strong>\n                   \n                                Article\n                  <\/strong>\n\n    on\n\n    Oct 6, 2021  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-107.html>\n      Yellow Flash    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=index-106.html aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=index-106.html>\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"mini-card module module-article \" id=\"mini-post-254582\">\n\n<time datetime=\"2017-05-08\" title=\"Originally published May 8, 2017\">\n    <strong>\n                   \n                                Article\n                  <\/strong>\n\n    on\n\n    Oct 6, 2021  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-108.html>\n      Self-Drawing Shapes    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=index-106.html aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=index-106.html>\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"mini-card module module-article \" id=\"mini-post-305914\">\n\n<time datetime=\"2020-03-30\" title=\"Originally published Mar 30, 2020\">\n    <strong>\n                   \n                                Article\n                  <\/strong>\n\n    on\n\n    Oct 6, 2021  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-109.html>\n      Scroll Shadows    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=index-106.html aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=index-106.html>\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"mini-card module module-article \" id=\"mini-post-305930\">\n\n<time datetime=\"2020-03-31\" title=\"Originally published Mar 31, 2020\">\n    <strong>\n                   \n                                Article\n                  <\/strong>\n\n    on\n\n    May 20, 2020  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-110.html>\n      Editable Style Blocks    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=index-106.html aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=index-106.html>\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"mini-card module module-article \" id=\"mini-post-304986\">\n\n<time datetime=\"2020-03-15\" title=\"Originally published Mar 15, 2020\">\n    <strong>\n                   \n                                Article\n                  <\/strong>\n\n    on\n\n    Oct 6, 2021  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-111.html>\n      Scroll Indicator    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=index-106.html aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=index-106.html>\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"mini-card module module-article \" id=\"mini-post-254474\">\n\n<time datetime=\"2017-05-04\" title=\"Originally published May 4, 2017\">\n    <strong>\n                   \n                                Article\n                  <\/strong>\n\n    on\n\n    Mar 15, 2020  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-112.html>\n      Border Triangles    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=index-106.html aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=index-106.html>\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"mini-card module module-article \" id=\"mini-post-311167\">\n\n<time datetime=\"2020-06-04\" title=\"Originally published Jun 4, 2020\">\n    <strong>\n                   \n                                Article\n                  <\/strong>\n\n    on\n\n    Oct 3, 2021  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-113.html>\n      Pin Scrolling to Bottom    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=index-106.html aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=index-106.html>\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"mini-card module module-article \" id=\"mini-post-255104\">\n\n<time datetime=\"2017-05-26\" title=\"Originally published May 26, 2017\">\n    <strong>\n                   \n                                Article\n                  <\/strong>\n\n    on\n\n    Jul 5, 2021  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-114.html>\n      Infinite Scrolling Background Image    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=index-106.html aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=index-106.html>\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n  <\/div>\n\n<\/div>\n\n<div \n  class=\"post-slider\" style=\"background: \n  rgb(38 38 38);\"\n>\n\n  <div class=\"post-slider-header header-card\">\n    <h2>\n      Latest CSS Guides    <\/h2>\n    <p class=\"header-card-sponsor\">\n      Dive deep into CSS features and concepts    <\/p>\n  <\/div>\n\n  <div class=\"mini-card-grid\">\n    <article class=\"mini-card module module-article articles\" id=\"mini-post-378745\">\n\n<time datetime=\"2024-07-15\" title=\"Originally published Jul 15, 2024\">\n    <strong>\n                   \n                                Article\n                  <\/strong>\n\n    on\n\n    Jul 23, 2024  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-115.html>\n      CSS Selectors    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=index-116.html rel=\"tag\">selectors<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=index-117.html aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//1a1b5ca4b139c0c8caaea26ef437d943?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=index-117.html>\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"mini-card module module-article articles\" id=\"mini-post-375815\">\n\n<time datetime=\"2024-06-03\" title=\"Originally published Jun 3, 2024\">\n    <strong>\n                   \n                                Article\n                  <\/strong>\n\n    on\n\n    Jun 18, 2024  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-118.html>\n      CSS Length Units    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=index-119.html rel=\"tag\">container units<\/a> <a href=index-120.html rel=\"tag\">units<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=index-117.html aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//1a1b5ca4b139c0c8caaea26ef437d943?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=index-117.html>\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"mini-card module module-article articles\" id=\"mini-post-378111\">\n\n<time datetime=\"2024-06-10\" title=\"Originally published Jun 10, 2024\">\n    <strong>\n                   \n                                Article\n                  <\/strong>\n\n    on\n\n    Jun 14, 2024  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-121.html>\n      CSS Container Queries    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=index-122.html rel=\"tag\">container-queries<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=index-117.html aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//1a1b5ca4b139c0c8caaea26ef437d943?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=index-117.html>\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"mini-card module module-article articles\" id=\"mini-post-363766\">\n\n<time datetime=\"2022-02-21\" title=\"Originally published Feb 21, 2022\">\n    <strong>\n                   \n                                Article\n                  <\/strong>\n\n    on\n\n    Jun 3, 2024  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-123.html>\n      A Complete Guide to CSS Cascade Layers    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=index-124.html rel=\"tag\">cascade layers<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=index-125.html aria-label=\"Author page of Miriam Suzanne\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//a98a3bb425ff796d7bfc1496b4dec98b?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/a98a3bb425ff796d7bfc1496b4dec98b?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=index-125.html>\n      Miriam Suzanne    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"mini-card module module-article articles module-sponsored\" id=\"mini-post-361210\">\n\n<time datetime=\"2022-01-20\" title=\"Originally published Jan 20, 2022\">\n    <strong>\n                   \n                        Sponsored\n                          Article\n                  <\/strong>\n\n    on\n\n    Jan 20, 2022  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-126.html>\n      A Complete Beginner&#8217;s Guide to npm    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=index-127.html rel=\"tag\">npm<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=index-128.html aria-label=\"Author page of Josh Collinsworth\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//b5938a61130749fe0c1ec823c7d3ee98?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/b5938a61130749fe0c1ec823c7d3ee98?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=index-128.html>\n      Josh Collinsworth    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"mini-card module module-article articles\" id=\"mini-post-307668\">\n\n<time datetime=\"2020-05-04\" title=\"Originally published May 4, 2020\">\n    <strong>\n                   \n                                Article\n                  <\/strong>\n\n    on\n\n    Oct 15, 2021  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-129.html>\n      A Complete Guide to CSS Functions    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=index-130.html rel=\"tag\">functions<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=index-131.html aria-label=\"Author page of Eric Bailey\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//188a9d4deb76ac6e69c7f65358897476?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/188a9d4deb76ac6e69c7f65358897476?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=index-131.html>\n      Eric Bailey    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"mini-card module module-article articles\" id=\"mini-post-325490\">\n\n<time datetime=\"2020-11-16\" title=\"Originally published Nov 16, 2020\">\n    <strong>\n                   \n                                Article\n                  <\/strong>\n\n    on\n\n    Oct 25, 2022  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-132.html>\n      A Complete Guide to CSS Gradients    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=index-117.html aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//1a1b5ca4b139c0c8caaea26ef437d943?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=index-117.html>\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"mini-card module module-article articles\" id=\"mini-post-319964\">\n\n<time datetime=\"2020-10-02\" title=\"Originally published Oct 2, 2020\">\n    <strong>\n                   \n                                Article\n                  <\/strong>\n\n    on\n\n    May 1, 2024  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-133.html>\n      A Complete Guide to CSS Media Queries    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=index-134.html aria-label=\"Author page of Andr\u00e9s Galante\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=ando1e6e1.html width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=index-134.html>\n      Andr\u00e9s Galante    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"mini-card module module-article articles\" id=\"mini-post-333595\">\n\n<time datetime=\"2021-04-27\" title=\"Originally published Apr 27, 2021\">\n    <strong>\n                   \n                                Article\n                  <\/strong>\n\n    on\n\n    May 23, 2024  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-135.html>\n      A Complete Guide to Custom Properties    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=index-136.html rel=\"tag\">custom properties<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=index-106.html aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=index-106.html>\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"mini-card module module-article articles\" id=\"mini-post-312285\">\n\n<time datetime=\"2020-07-01\" title=\"Originally published Jul 1, 2020\">\n    <strong>\n                   \n                                Article\n                  <\/strong>\n\n    on\n\n    Oct 24, 2021  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-137.html>\n      A Complete Guide to Dark Mode on the Web    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=index-138.html rel=\"tag\">dark mode<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=index-139.html aria-label=\"Author page of Adhuham\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=32795085e6e1.html width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=index-139.html>\n      Adhuham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"mini-card module module-article articles\" id=\"mini-post-302917\">\n\n<time datetime=\"2020-02-17\" title=\"Originally published Feb 17, 2020\">\n    <strong>\n                   \n                                Article\n                  <\/strong>\n\n    on\n\n    Jun 13, 2024  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-140.html>\n      A Complete Guide to Data Attributes    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=index-141.html rel=\"tag\">attribute selectors<\/a> <a href=index-142.html rel=\"tag\">attributes<\/a> <a href=index-143.html rel=\"tag\">data attributes<\/a> <a href=index-144.html rel=\"tag\">HTML<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=index-106.html aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=index-106.html>\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n  <\/div>\n\n<\/div>\n\n<div \n  class=\"post-slider\" style=\"background: \n  rgb(38 38 38);\"\n>\n\n  <div class=\"post-slider-header header-card\">\n    <h2>\n      Fresh From the Almanac    <\/h2>\n    <p class=\"header-card-sponsor\">\n      Get info on properties and selectors    <\/p>\n  <\/div>\n\n  <div class=\"mini-card-grid\">\n    <article class=\"mini-card module module-article \" id=\"mini-post-379433\">\n\n<time datetime=\"2024-08-05\" title=\"Originally published Aug 5, 2024\">\n    <strong>\n                   \n                        Almanac\n                  <\/strong>\n\n    on\n\n    Aug 5, 2024  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-145.html>\n      position-anchor    <\/a>\n  <\/h3>\n\n      <a href=index-145.html class=\"almanac-example\">\n      <code class=\"language-css\">.target { position-anchor: --my-anchor; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=index-146.html rel=\"tag\">anchor positioning<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=index-147.html aria-label=\"Author page of Juan Diego Rodr\u00edguez\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=juan-diego-rodrigueze6e1.html width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=index-147.html>\n      Juan Diego Rodr\u00edguez    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"mini-card module module-article \" id=\"mini-post-379453\">\n\n<time datetime=\"2024-08-05\" title=\"Originally published Aug 5, 2024\">\n    <strong>\n                   \n                        Almanac\n                  <\/strong>\n\n    on\n\n    Aug 5, 2024  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-148.html>\n      inset-area    <\/a>\n  <\/h3>\n\n      <a href=index-148.html class=\"almanac-example\">\n      <code class=\"language-css\">.target { inset-area: bottom end; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=index-146.html rel=\"tag\">anchor positioning<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=index-147.html aria-label=\"Author page of Juan Diego Rodr\u00edguez\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=juan-diego-rodrigueze6e1.html width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=index-147.html>\n      Juan Diego Rodr\u00edguez    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"mini-card module module-article \" id=\"mini-post-378430\">\n\n<time datetime=\"2024-05-31\" title=\"Originally published May 31, 2024\">\n    <strong>\n                   \n                        Almanac\n                  <\/strong>\n\n    on\n\n    Aug 5, 2024  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-149.html>\n      anchor-name    <\/a>\n  <\/h3>\n\n      <a href=index-149.html class=\"almanac-example\">\n      <code class=\"language-css\">.anchor { anchor-name: --my-anchor; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=index-146.html rel=\"tag\">anchor positioning<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=index-117.html aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//1a1b5ca4b139c0c8caaea26ef437d943?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=index-117.html>\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"mini-card module module-article \" id=\"mini-post-378543\">\n\n<time datetime=\"2024-06-05\" title=\"Originally published Jun 5, 2024\">\n    <strong>\n                   \n                        Almanac\n                  <\/strong>\n\n    on\n\n    Jun 5, 2024  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-150.html>\n      ::details-content    <\/a>\n  <\/h3>\n\n      <a href=index-150.html class=\"almanac-example\">\n      <code class=\"language-css\">details::details-content { font-size: 1.5rem; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=index-151.html rel=\"tag\">details<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=index-117.html aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//1a1b5ca4b139c0c8caaea26ef437d943?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=index-117.html>\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"mini-card module module-article \" id=\"mini-post-378681\">\n\n<time datetime=\"2024-06-14\" title=\"Originally published Jun 14, 2024\">\n    <strong>\n                   \n                        Almanac\n                  <\/strong>\n\n    on\n\n    Jun 14, 2024  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-152.html>\n      ::view-transition-image-pair    <\/a>\n  <\/h3>\n\n      <a href=index-152.html class=\"almanac-example\">\n      <code class=\"language-css\">::view-transition-image-pair(root) { animation-duration: 1s; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=index-153.html rel=\"tag\">view transitions<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=index-117.html aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//1a1b5ca4b139c0c8caaea26ef437d943?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=index-117.html>\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"mini-card module module-article \" id=\"mini-post-378612\">\n\n<time datetime=\"2024-06-12\" title=\"Originally published Jun 12, 2024\">\n    <strong>\n                   \n                        Almanac\n                  <\/strong>\n\n    on\n\n    Jun 12, 2024  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-154.html>\n      ::view-transition-group    <\/a>\n  <\/h3>\n\n      <a href=index-154.html class=\"almanac-example\">\n      <code class=\"language-css\">::view-transition-group(transition-name) { animation-duration: 1.25s; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=index-153.html rel=\"tag\">view transitions<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=index-117.html aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//1a1b5ca4b139c0c8caaea26ef437d943?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=index-117.html>\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"mini-card module module-article \" id=\"mini-post-378574\">\n\n<time datetime=\"2024-06-07\" title=\"Originally published Jun 7, 2024\">\n    <strong>\n                   \n                        Almanac\n                  <\/strong>\n\n    on\n\n    Jun 10, 2024  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-155.html>\n      ::view-transition    <\/a>\n  <\/h3>\n\n      <a href=index-155.html class=\"almanac-example\">\n      <code class=\"language-css\">::view-transition { position: fixed;  }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=index-153.html rel=\"tag\">view transitions<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=index-117.html aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//1a1b5ca4b139c0c8caaea26ef437d943?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=index-117.html>\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"mini-card module module-article \" id=\"mini-post-378662\">\n\n<time datetime=\"2024-06-12\" title=\"Originally published Jun 12, 2024\">\n    <strong>\n                   \n                        Almanac\n                  <\/strong>\n\n    on\n\n    Jun 12, 2024  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-156.html>\n      :popover-open    <\/a>\n  <\/h3>\n\n      <a href=index-156.html class=\"almanac-example\">\n      <code class=\"language-css\">:popover-open { border: 0; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=index-157.html rel=\"tag\">popover<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=index-117.html aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//1a1b5ca4b139c0c8caaea26ef437d943?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=index-117.html>\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"mini-card module module-article \" id=\"mini-post-378389\">\n\n<time datetime=\"2024-05-30\" title=\"Originally published May 30, 2024\">\n    <strong>\n                   \n                        Almanac\n                  <\/strong>\n\n    on\n\n    May 30, 2024  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-158.html>\n      view-timeline-name    <\/a>\n  <\/h3>\n\n      <a href=index-158.html class=\"almanac-example\">\n      <code class=\"language-css\"><\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=index-153.html rel=\"tag\">view transitions<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=index-117.html aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//1a1b5ca4b139c0c8caaea26ef437d943?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=index-117.html>\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"mini-card module module-article \" id=\"mini-post-378078\">\n\n<time datetime=\"2024-05-22\" title=\"Originally published May 22, 2024\">\n    <strong>\n                   \n                        Almanac\n                  <\/strong>\n\n    on\n\n    May 22, 2024  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-159.html>\n      container    <\/a>\n  <\/h3>\n\n      <a href=index-159.html class=\"almanac-example\">\n      <code class=\"language-css\">.element { container: cards-grid \/ inline-size; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=index-122.html rel=\"tag\">container-queries<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=index-117.html aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//1a1b5ca4b139c0c8caaea26ef437d943?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=index-117.html>\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"mini-card module module-article \" id=\"mini-post-378057\">\n\n<time datetime=\"2024-05-22\" title=\"Originally published May 22, 2024\">\n    <strong>\n                   \n                        Almanac\n                  <\/strong>\n\n    on\n\n    May 22, 2024  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-160.html>\n      container-name    <\/a>\n  <\/h3>\n\n      <a href=index-160.html class=\"almanac-example\">\n      <code class=\"language-css\">.element { container-name: cards-grid; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=index-122.html rel=\"tag\">container-queries<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=index-117.html aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//1a1b5ca4b139c0c8caaea26ef437d943?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=index-117.html>\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"mini-card module module-article \" id=\"mini-post-378062\">\n\n<time datetime=\"2024-05-22\" title=\"Originally published May 22, 2024\">\n    <strong>\n                   \n                        Almanac\n                  <\/strong>\n\n    on\n\n    May 22, 2024  <\/time>\n\n  <h3 class=\"mini-card-title\">\n    <a href=index-161.html>\n      container-type    <\/a>\n  <\/h3>\n\n      <a href=index-161.html class=\"almanac-example\">\n      <code class=\"language-css\">.element { container-type: inline-size; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=index-122.html rel=\"tag\">container-queries<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=index-117.html aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//1a1b5ca4b139c0c8caaea26ef437d943?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=index-117.html>\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n  <\/div>\n\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":2508,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"front-page.php","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[],"class_list":["post-378936","page","type-page","status-publish","hentry"],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/378936"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=378936"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/378936\/revisions"}],"predecessor-version":[{"id":379520,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/378936\/revisions\/379520"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=378936"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=378936"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}