"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2153],{3905:function(e,t,a){a.d(t,{Zo:function(){return m},kt:function(){return d}});var r=a(7294);function l(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function n(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,r)}return a}function i(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?n(Object(a),!0).forEach((function(t){l(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):n(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function o(e,t){if(null==e)return{};var a,r,l=function(e,t){if(null==e)return{};var a,r,l={},n=Object.keys(e);for(r=0;r<n.length;r++)a=n[r],t.indexOf(a)>=0||(l[a]=e[a]);return l}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(r=0;r<n.length;r++)a=n[r],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(l[a]=e[a])}return l}var s=r.createContext({}),c=function(e){var t=r.useContext(s),a=t;return e&&(a="function"==typeof e?e(t):i(i({},t),e)),a},m=function(e){var t=c(e.components);return r.createElement(s.Provider,{value:t},e.children)},y={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},p=r.forwardRef((function(e,t){var a=e.components,l=e.mdxType,n=e.originalType,s=e.parentName,m=o(e,["components","mdxType","originalType","parentName"]),p=c(a),d=l,f=p["".concat(s,".").concat(d)]||p[d]||y[d]||n;return a?r.createElement(f,i(i({ref:t},m),{},{components:a})):r.createElement(f,i({ref:t},m))}));function d(e,t){var a=arguments,l=t&&t.mdxType;if("string"==typeof e||l){var n=a.length,i=new Array(n);i[0]=p;var o={};for(var s in t)hasOwnProperty.call(t,s)&&(o[s]=t[s]);o.originalType=e,o.mdxType="string"==typeof e?e:l,i[1]=o;for(var c=2;c<n;c++)i[c]=a[c];return r.createElement.apply(null,i)}return r.createElement.apply(null,a)}p.displayName="MDXCreateElement"},2695:function(e,t,a){a.d(t,{Z:function(){return o}});var r=a(7462),l=a(3366),n=a(7294),i=["isBad","isGood","children","disableFullscreen","limitWidth"];function o(e){var t=e.isBad,a=e.isGood,o=e.children,s=e.disableFullscreen,c=e.limitWidth,m=(0,l.Z)(e,i),y=(0,n.useState)(!1),p=y[0],d=y[1];return n.createElement("div",{className:"preview-box-wrapper",style:c?{width:c,display:"table",margin:"0 auto"}:{}},!s&&n.createElement("button",{"aria-label":p?"Minimize the example":"Fullscreen the example",className:"preview-box-fullscreen-toggle",onClick:function(e){var t=e.target.closest(".preview-box-wrapper");p?document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen():t.requestFullscreen?t.requestFullscreen():t.webkitRequestFullscreen?t.webkitRequestFullscreen():t.msRequestFullscreen&&t.msRequestFullscreen(),d(!p)}},p?n.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 24 24"},n.createElement("path",{d:"M19.707 18.293a1 1 0 01-1.414 1.414L16 17.414V18a1 1 0 01-2 0v-3a1 1 0 011-1h3a1 1 0 010 2h-.586zM9 14H6a1 1 0 000 2h.586l-2.293 2.293a1 1 0 001.414 1.414L8 17.414V18a1 1 0 002 0v-3a1 1 0 00-1-1zm0-9a1 1 0 00-1 1v.586L5.707 4.293a1 1 0 00-1.414 1.414L6.586 8H6a1 1 0 000 2h3a1 1 0 001-1V6a1 1 0 00-1-1zm6 5h3a1 1 0 000-2h-.586l2.293-2.293a1 1 0 00-1.414-1.414L16 6.586V6a1 1 0 00-2 0v3a1 1 0 001 1z"})):n.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"26 26 48 48"},n.createElement("path",{d:"M54.347 57.882A8.96 8.96 0 0150 59a8.96 8.96 0 01-4.347-1.118L40.736 62.8c-.38.38-.257.701.29.701h.98A2.503 2.503 0 0144.5 66c0 1.39-1.122 2.5-2.507 2.5h-7.986a2.505 2.505 0 01-2.507-2.507v-7.986A2.502 2.502 0 0134 55.5a2.49 2.49 0 012.5 2.493v.98c0 .547.314.678.7.29l4.918-4.916A8.96 8.96 0 0141 50a8.96 8.96 0 011.118-4.347L37.2 40.736c-.38-.38-.701-.257-.701.29v.98A2.503 2.503 0 0134 44.5c-1.39 0-2.5-1.122-2.5-2.507v-7.986a2.505 2.505 0 012.507-2.507h7.986A2.502 2.502 0 0144.5 34a2.49 2.49 0 01-2.493 2.5h-.98c-.547 0-.678.314-.29.7l4.916 4.918A8.96 8.96 0 0150 41a8.96 8.96 0 014.347 1.118l4.917-4.917c.38-.38.257-.701-.29-.701h-.98A2.503 2.503 0 0155.5 34c0-1.39 1.122-2.5 2.507-2.5h7.986a2.505 2.505 0 012.507 2.507v7.986A2.502 2.502 0 0166 44.5a2.49 2.49 0 01-2.5-2.493v-.98c0-.547-.314-.678-.7-.29l-4.918 4.916A8.96 8.96 0 0159 50a8.96 8.96 0 01-1.118 4.347l4.917 4.917c.38.38.701.257.701-.29v-.98A2.503 2.503 0 0166 55.5c1.39 0 2.5 1.122 2.5 2.507v7.986a2.505 2.505 0 01-2.507 2.507h-7.986A2.502 2.502 0 0155.5 66a2.49 2.49 0 012.493-2.5h.98c.547 0 .678-.314.29-.7l-4.916-4.918zM50 54a4 4 0 100-8 4 4 0 000 8z"}))),t&&n.createElement("div",{className:"is-bad-example style-red"},n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"2 2 12 12"},n.createElement("path",{d:"M3.3 12.7c.2.2.4.3.7.3s.5-.1.7-.3L8 9.4l3.3 3.3c.2.2.5.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L9.4 8l3.3-3.3c.4-.4.4-1 0-1.4s-1-.4-1.4 0L8 6.6 4.7 3.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4L6.6 8l-3.3 3.3c-.4.4-.4 1 0 1.4z"}))),a&&n.createElement("div",{className:"is-good-example style-green"},n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 18 18"},n.createElement("path",{d:"M5.056 15.04a1.5 1.5 0 002.217-.119l10.17-12.476A1.5 1.5 0 0015.118.55L6.007 11.758l-3.453-3.41a1.5 1.5 0 10-2.109 2.133l4.611 4.56"}))),n.createElement("iframe",(0,r.Z)({width:"100%",className:"docus-preview-box"+(p?" is-fullscreen":""),srcDoc:o},m)))}},7520:function(e,t,a){a.r(t),a.d(t,{frontMatter:function(){return s},contentTitle:function(){return c},metadata:function(){return m},toc:function(){return y},default:function(){return d}});var r=a(7462),l=a(3366),n=(a(7294),a(3905)),i=a(2695),o=["components"],s={title:"Overlay layer",sidebar_position:2},c=void 0,m={unversionedId:"helpers/overlay-layer",id:"helpers/overlay-layer",isDocsHomePage:!1,title:"Overlay layer",description:"It happens that you might want to have a layer that comes over the element content, it can be done with CSS ::before pseudo-element, however, it is a common use case, creating this layer each time is not a logical choice.",source:"@site/docs/helpers/overlay-layer.mdx",sourceDirName:"helpers",slug:"/helpers/overlay-layer",permalink:"/docs/helpers/overlay-layer",editUrl:"https://github.com/amir2mi/flatifycss/tree/master/website/docs/helpers/overlay-layer.mdx",tags:[],version:"current",sidebarPosition:2,frontMatter:{title:"Overlay layer",sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Pulse",permalink:"/docs/helpers/pulse"},next:{title:"Alignment & positioning",permalink:"/docs/helpers/alignment"}},y=[],p={toc:y};function d(e){var t=e.components,a=(0,l.Z)(e,o);return(0,n.kt)("wrapper",(0,r.Z)({},p,a,{components:t,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"It happens that you might want to have a layer that comes over the element content, it can be done with CSS ",(0,n.kt)("inlineCode",{parentName:"p"},"::before")," pseudo-element, however, it is a common use case, creating this layer each time is not a logical choice.",(0,n.kt)("br",{parentName:"p"}),"\n","FlatifyCSS gives you a helper class called ",(0,n.kt)("inlineCode",{parentName:"p"},".overlay-layer"),", it does the same thing and you can just customize it easily without writing boilerplates."),(0,n.kt)("p",null,"Overlay layers have a couple of CSS variables to make them more flexible:"),(0,n.kt)("p",null,(0,n.kt)("inlineCode",{parentName:"p"},"--flatify__overlay-layer-priority")," ",(0,n.kt)("inlineCode",{parentName:"p"},"z-index")," property of the overlay layer, default is 10",(0,n.kt)("br",{parentName:"p"}),"\n",(0,n.kt)("inlineCode",{parentName:"p"},"--flatify__overlay-layer-bg-color")," By default inherits darker background color\n",(0,n.kt)("inlineCode",{parentName:"p"},"--flatify__overlay-layer-opacity")," Default is 1 which means 100%",(0,n.kt)("br",{parentName:"p"}),"\n",(0,n.kt)("inlineCode",{parentName:"p"},"--flatify__overlay-layer-blending-mode")," Default is ",(0,n.kt)("inlineCode",{parentName:"p"},"normal"),(0,n.kt)("br",{parentName:"p"}),"\n",(0,n.kt)("inlineCode",{parentName:"p"},"--flatify__overlay-layer-backdrop-filter")," Default is ",(0,n.kt)("inlineCode",{parentName:"p"},"none")),(0,n.kt)("p",null,"In the below example, we have a box with an image inside it, basically, we need an overlay layer to change image color with ",(0,n.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode"},(0,n.kt)("inlineCode",{parentName:"a"},"mix-blend-mode")," CSS property")," and add some effect with ",(0,n.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter"},(0,n.kt)("inlineCode",{parentName:"a"},"backdrop-filter")," CSS property"),"."),(0,n.kt)(i.Z,{height:"710px",children:'<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Overlay layer</title> <style> .my-img-fx{ overflow: hidden; width: 300px; height: 150px; margin: 0.5em; border-radius: 1em; } .my-img-fx img{ width: 100%; height: 100%; object-fit: cover; } .fx-1{ --flatify__overlay-layer-bg-color: linear-gradient(to right, #2C5364, #203A43, #0F2027); --flatify__overlay-layer-blending-mode: overlay; } .fx-2{ --flatify__overlay-layer-bg-color: linear-gradient(to right, #8e2de2, #4a00e0); --flatify__overlay-layer-blending-mode: hard-light; } .fx-3{ --flatify__overlay-layer-bg-color: linear-gradient(to right, #f12711, #f5af19); --flatify__overlay-layer-blending-mode: multiply; --flatify__overlay-layer-opacity: 0.75; } .fx-4{ --flatify__overlay-layer-bg-color: rgba(255,255,255, 0.5); --flatify__overlay-layer-backdrop-filter: blur(3px) contrast(120%); } .fx-5{ --flatify__overlay-layer-bg-color: trasparent; --flatify__overlay-layer-backdrop-filter: contrast(400%) saturate(400%) grayscale(50%) sepia(50%) hue-rotate(10deg); } .fx-6{ --flatify__overlay-layer-bg-color: trasparent; --flatify__overlay-layer-backdrop-filter: sepia(75%) hue-rotate(-25deg); } .fx-7{ --flatify__overlay-layer-bg-color: trasparent; --flatify__overlay-layer-backdrop-filter: grayscale(100%) contrast(140%) brightness(85%); } </style> </head> <body> <div class="flex-center"> <div class="my-img-fx"> <img src="https://picsum.photos/500/300" alt="a random image"/> </div> <div class="my-img-fx fx-1 overlay-layer"> <img src="https://picsum.photos/500/300" alt="a random image"/> </div> </div> <div class="flex-center"> <div class="my-img-fx fx-2 overlay-layer"> <img src="https://picsum.photos/500/300" alt="a random image"/> </div> <div class="my-img-fx fx-3 overlay-layer"> <img src="https://picsum.photos/500/300" alt="a random image"/> </div> </div> <div class="flex-center"> <div class="my-img-fx fx-4 overlay-layer"> <img src="https://picsum.photos/500/300" alt="a random image"/> </div> <div class="my-img-fx fx-5 overlay-layer"> <img src="https://picsum.photos/500/300" alt="a random image"/> </div> </div> <div class="flex-center"> <div class="my-img-fx fx-6 overlay-layer"> <img src="https://picsum.photos/500/300" alt="a random image"/> </div> <div class="my-img-fx fx-7 overlay-layer"> <img src="https://picsum.photos/500/300" alt="a random image"/> </div> </div> </body>\n</html>',mdxType:"PreviewBox"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<div class="my-img-fx">\n  <img src="https://picsum.photos/500/300" alt="a random image" />\n</div>\n\n<div class="my-img-fx fx-1 overlay-layer">\n  <img src="https://picsum.photos/500/300" alt="a random image" />\n</div>\n\n<div class="my-img-fx fx-2 overlay-layer">\n  <img src="https://picsum.photos/500/300" alt="a random image" />\n</div>\n\n<div class="my-img-fx fx-3 overlay-layer">\n  <img src="https://picsum.photos/500/300" alt="a random image" />\n</div>\n\n<div class="my-img-fx fx-4 overlay-layer">\n  <img src="https://picsum.photos/500/300" alt="a random image" />\n</div>\n\n<div class="my-img-fx fx-5 overlay-layer">\n  <img src="https://picsum.photos/500/300" alt="a random image" />\n</div>\n\n<div class="my-img-fx fx-6 overlay-layer">\n  <img src="https://picsum.photos/500/300" alt="a random image" />\n</div>\n\n<div class="my-img-fx fx-7 overlay-layer">\n  <img src="https://picsum.photos/500/300" alt="a random image" />\n</div>\n')),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-css",metastring:'title="style.scss"',title:'"style.scss"'},".my-img-fx {\n  overflow: hidden;\n  width: 300px;\n  height: 150px;\n  margin: 0.5em;\n  border-radius: 1em;\n}\n.my-img-fx img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.fx-1 {\n  --flatify__overlay-layer-bg-color: linear-gradient(to right, #2c5364, #203a43, #0f2027);\n  --flatify__overlay-layer-blending-mode: overlay;\n}\n\n.fx-2 {\n  --flatify__overlay-layer-bg-color: linear-gradient(to right, #8e2de2, #4a00e0);\n  --flatify__overlay-layer-blending-mode: hard-light;\n}\n\n.fx-3 {\n  --flatify__overlay-layer-bg-color: linear-gradient(to right, #f12711, #f5af19);\n  --flatify__overlay-layer-blending-mode: multiply;\n  --flatify__overlay-layer-opacity: 0.75;\n}\n\n.fx-4 {\n  --flatify__overlay-layer-bg-color: rgba(255, 255, 255, 0.5);\n  --flatify__overlay-layer-backdrop-filter: blur(3px) contrast(120%);\n}\n\n.fx-5 {\n  --flatify__overlay-layer-bg-color: trasparent;\n  --flatify__overlay-layer-backdrop-filter: contrast(400%) saturate(400%) grayscale(50%) sepia(50%) hue-rotate(10deg);\n}\n\n.fx-6 {\n  --flatify__overlay-layer-bg-color: trasparent;\n  --flatify__overlay-layer-backdrop-filter: sepia(75%) hue-rotate(-25deg);\n}\n\n.fx-7 {\n  --flatify__overlay-layer-bg-color: trasparent;\n  --flatify__overlay-layer-backdrop-filter: grayscale(100%) contrast(140%) brightness(85%);\n}\n")))}d.isMDXComponent=!0}}]);