{"id":3874,"date":"2022-10-02T01:15:35","date_gmt":"2022-10-02T01:15:35","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3874"},"modified":"2023-06-10T11:34:46","modified_gmt":"2023-06-10T11:34:46","slug":"css-card-css-filter-cards","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-card-css-filter-cards\/","title":{"rendered":"CSS Card &#8211; CSS Filter Cards"},"content":{"rendered":"<p>CSS Card &#8211; CSS Filter Cards refer to a design style that uses CSS (Cascading Style Sheets) filters to create a card-like appearance for content on a webpage.<\/p>\n<p>CSS filters allow you to adjust the visual appearance of an element using a variety of effects, such as blur, brightness, contrast, and hue. In CSS Filter Cards, these filters are applied to create a card-like effect that adds depth and dimensionality to the content.<\/p>\n<p><iframe style=\"width: 100%;\" title=\"CSS Card - CSS Filter Cards\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/qBMrpWX?default-tab=result&amp;theme-id=dark\" height=\"600\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/qBMrpWX\"><br \/>\nCSS Card &#8211; CSS Filter Cards<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>&nbsp;<\/p>\n<p>Here&#8217;s an example of CSS code that could be used to create a CSS Filter Card:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">:root{\r\n  --background-dark: #2d3548;\r\n  --text-light: rgba(255,255,255,0.6);\r\n  --text-lighter: rgba(255,255,255,0.9);\r\n  --spacing-s: 8px;\r\n  --spacing-m: 16px;\r\n  --spacing-l: 24px;\r\n  --spacing-xl: 32px;\r\n  --spacing-xxl: 64px;\r\n  --width-container: 1200px;\r\n}\r\n\r\n*{\r\n  border: 0;\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n}\r\n\r\nhtml{\r\n  height: 100%;\r\n  font-family: 'Montserrat', sans-serif;\r\n  font-size: 14px;\r\n}\r\n\r\nbody{\r\n  height: 100%;\r\n}\r\n\r\n.hero-section{\r\n  align-items: flex-start;\r\n  background-image: linear-gradient(15deg, #0f4667 0%, #2a6973 150%);\r\n  display: flex;\r\n  min-height: 100%;\r\n  justify-content: center;\r\n  padding: var(--spacing-xxl) var(--spacing-l);\r\n}\r\n\r\n.card-grid{\r\n  display: grid;\r\n  grid-template-columns: repeat(1, 1fr);\r\n  grid-column-gap: var(--spacing-l);\r\n  grid-row-gap: var(--spacing-l);\r\n  max-width: var(--width-container);\r\n  width: 100%;\r\n}\r\n\r\n@media(min-width: 540px){\r\n  .card-grid{\r\n    grid-template-columns: repeat(2, 1fr); \r\n  }\r\n}\r\n\r\n@media(min-width: 960px){\r\n  .card-grid{\r\n    grid-template-columns: repeat(4, 1fr); \r\n  }\r\n}\r\n\r\n.card{\r\n  list-style: none;\r\n  position: relative;\r\n}\r\n\r\n.card:before{\r\n  content: '';\r\n  display: block;\r\n  padding-bottom: 150%;\r\n  width: 100%;\r\n}\r\n\r\n.card__background{\r\n  background-size: cover;\r\n  background-position: center;\r\n  border-radius: var(--spacing-l);\r\n  bottom: 0;\r\n  filter: brightness(0.75) saturate(1.2) contrast(0.85);\r\n  left: 0;\r\n  position: absolute;\r\n  right: 0;\r\n  top: 0;\r\n  transform-origin: center;\r\n  trsnsform: scale(1) translateZ(0);\r\n  transition: \r\n    filter 200ms linear,\r\n    transform 200ms linear;\r\n}\r\n\r\n.card:hover .card__background{\r\n  transform: scale(1.05) translateZ(0);\r\n}\r\n\r\n.card-grid:hover &gt; .card:not(:hover) .card__background{\r\n  filter: brightness(0.5) saturate(0) contrast(1.2) blur(20px);\r\n}\r\n\r\n.card__content{\r\n  left: 0;\r\n  padding: var(--spacing-l);\r\n  position: absolute;\r\n  top: 0;\r\n}\r\n\r\n.card__category{\r\n  color: var(--text-light);\r\n  font-size: 0.9rem;\r\n  margin-bottom: var(--spacing-s);\r\n  text-transform: uppercase;\r\n}\r\n\r\n.card__heading{\r\n  color: var(--text-lighter);\r\n  font-size: 1.9rem;\r\n  text-shadow: 2px 2px 20px rgba(0,0,0,0.2);\r\n  line-height: 1.4;\r\n  word-spacing: 100vw;\r\n}<\/pre>\n<div class=\"flex flex-grow flex-col gap-3\">\n<div class=\"min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap\">\n<div class=\"markdown prose w-full break-words dark:prose-invert light\">\n<p>In this example, the card element has a fixed width and height, along with a white background color and a box-shadow effect to create a card-like appearance. An image is included in the card, and CSS filters are applied to adjust its brightness, contrast, and blur to create a subtle but effective card effect.<\/p>\n<p>The card also includes a content element that is positioned absolutely at the bottom of the card, with a semi-transparent background color and text elements for the product name and description.<\/p>\n<p>By using CSS filters to create a card-like effect for your content, you can create an attractive and engaging design that enhances the user experience on your website.<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>CSS Card &#8211; CSS Filter Cards refer to a design style that <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-card-css-filter-cards\/\" title=\"CSS Card &#8211; CSS Filter Cards\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3875,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[461,466,465,103,392],"newstopic":[],"class_list":{"0":"post-3874","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"tag-css-card","9":"tag-css-filter-cards","10":"tag-pure-css-product-card","11":"tag-web-design","12":"tag-web-design-2023"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3874","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3874"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3874\/revisions"}],"predecessor-version":[{"id":3876,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3874\/revisions\/3876"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3875"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3874"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3874"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3874"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3874"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}