{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"VoDkNZ","title":"Captain Anonymous","name":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"anon","__typename":"User"},"currentTeamId":null,"username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails","cpedata":{"action":"show","controller":"live_fullpage"}},"__user":{"anon":true,"base_url":"/anon/","current_team_id":0,"current_team_hashid":null,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjc5ODU2NzA1LCJpYXQiOjE2Nzk4NTMxMDUsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.YTwSeTrxfo06RM_vaUY2BcvnzRSFGjaCyTZ6YGMPeioMTyvXuhB_5M6XGJzMDDaG46TUVxVHl1u2ZWRUR0581ck9mQhsGy8H8p6FRQzLNHhAcXDmjsZ8YrEpVBDN5jHjinj8U9C5U5OYpCLnWN-7a-xlhVLgwxOVpqwVqqQ1XQqC-fSeD2vb-ORET5Nc8lyuXmjOVQeDcmi_Ux_JHbSLqE8RYj_r7G28hWP2OB1BClD-i4WvK8FQOZl167_tehGZ3oojG0zPfS7DkueNQkwQwOlzlaaQahX7rNv8PQw7fwiQh-lLHSbxeskJfU4ICMyzqiSbyESRSIusCXZJD0NM5g"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":5975957,\"user_id\":210284,\"html\":\"%h1 CSS Blend Modes\\n%p Pick page color, background layer color, and foreground layer color to see the different effects. Works best in current version of Chrome. <br> Learn more about blend modes by <a href=\\\"https:\\/\\/webdesign.tutsplus.com\\/tutorials\\/blending-modes-in-css-color-theory-and-practical-application--cms-25201\\\" target=\\\"_blank\\\">checking out the tutorial on Envato Tuts+<\\/a>.\\n- @modes = ['multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'];\\n\\n.color-pickers\\n %div\\n %p Background color:\\n %input{type: \\\"color\\\", name: \\\"bg\\\", value: \\\"#f95858\\\"}\\n %div\\n %p Foreground color:\\n %input{type: \\\"color\\\", name: \\\"fg\\\", value: \\\"#5d7dba\\\"}\\n %div\\n %p Page color:\\n %input{type: \\\"color\\\", name: \\\"pbg\\\", value: \\\"#eaeaea\\\"}\\n\\n%input{name: \\\"backgroundImage\\\", placeholder: \\\"Enter background image url\\\", class: \\\"text-input\\\"}\\n\\n.circles\\n - @modes.each do |mode|\\n %div{class: \\\"mode-comparison mode-comparison--#{mode}\\\"}\\n %h2 #{mode.capitalize}\\n .bg\\n .fg\",\"css\":\"$modes: multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity;\\n\\nbody {\\n background-size: cover;\\n background-position: center;\\n line-height: 1.8;\\n font-family: sans-serif;\\n font-weight: 200;\\n color: #4b4b4b;\\n text-align: center;\\n background-color: #eaeaea;\\n transition: color .2s;\\n &.dark {\\n color: #fafafa;\\n }\\n &.middle {\\n color: #fafafa;\\n text-shadow: 1px 1px 3px rgba(0,0,0,.3);\\n }\\n}\\na {\\n color: #136fd2;\\n &:hover {\\n text-decoration: none;\\n }\\n}\\nh2 {\\n font-size: 18px;\\n}\\ninput[type=color] {\\n cursor: pointer;\\n}\\n.text-input {\\n padding: 6px 12px;\\n line-height: 2;\\n width: 300px;\\n text-align: center;\\n color: #444;\\n}\\n@each $mode in $modes {\\n .mode-comparison {\\n overflow: auto;\\n width: 100%; \\n @media only screen and (min-width: 500px){\\n width: 33.333%; \\n }\\n @media only screen and (min-width: 1000px){\\n width: 25%;\\n }\\n @media only screen and (min-width: 1280px){\\n width: 20%;\\n }\\n float: left;\\n margin: 20px auto;\\n &--#{$mode} {\\n .fg {\\n mix-blend-mode: $mode;\\n }\\n }\\n }\\n}\\n.bg {\\n position: relative;\\n width: 50%;\\n padding-bottom: 50%;\\n background: #f95858;\\n margin: 0 auto;\\n left: -15%;\\n border-radius: 50%;\\n}\\n.fg {\\n position: relative;\\n width: 50%;\\n padding-bottom: 50%;\\n right: -15%;\\n margin: -50% auto 0;\\n border-radius: 50%;\\n background: #5d7dba;\\n}\\n.color-pickers {\\n width: 80%;\\n position: relative;\\n text-align: center;\\n padding: 30px;\\n overflow: auto;\\n margin: 0 auto;\\n div {\\n width: 33%;\\n display: block;\\n float: left;\\n }\\n}\\n.circles {\\n padding: 20px 0;\\n overflow: auto;\\n}\",\"js\":\"$(\\\"body\\\").addClass(\\\"pbg\\\");\\n$(\\\".color-pickers\\\").on('change', 'input', function(e){\\n var pos = $(this).attr(\\\"name\\\");\\n $(\\\".\\\" + pos).css(\\\"background-color\\\", $(this).val());\\n if (pos == \\\"pbg\\\"){\\n var color = hexToRgb($(this).val());\\n var luminance = getLum(color);\\n console.log(luminance);\\n if (luminance < 255 && luminance > 170){\\n $(\\\"body\\\").removeClass(\\\"dark middle\\\").addClass(\\\"light\\\");\\n } else if (luminance < 170 && luminance > 85) {\\n $(\\\"body\\\").removeClass(\\\"light dark\\\").addClass(\\\"middle\\\");\\n } else {\\n $(\\\"body\\\").removeClass(\\\"light middle\\\").addClass(\\\"dark\\\");\\n }\\n }\\n});\\n\\n\\nfunction hexToRgb(hex) {\\n var result = \\/^#?([a-f\\\\d]{2})([a-f\\\\d]{2})([a-f\\\\d]{2})$\\/i.exec(hex);\\n return result ? {\\n r: parseInt(result[1], 16),\\n g: parseInt(result[2], 16),\\n b: parseInt(result[3], 16)\\n } : null;\\n}\\n\\nfunction getLum(color){\\n var { r, g, b } = color;\\n return (0.2126*r + 0.7152*g + 0.0722*b);\\n}\\n\\n$(\\\"input[name='backgroundImage']\\\").on('keyup', function(){\\n $(\\\"body\\\").css(\\\"background-image\\\", `url(${$(this).val()})`);\\n})\",\"html_pre_processor\":\"haml\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"babel\",\"html_classes\":\"\",\"css_starter\":\"normalize\",\"js_library\":null,\"created_at\":\"2015-12-04T11:41:31.000Z\",\"updated_at\":\"2015-12-21T09:34:04.000Z\",\"title\":\"Interactive demo for exploring the effects of a given blend mode\",\"description\":\"\\nForked from [Jonathan Cutrell](http:\\/\\/codepen.io\\/jcutrell\\/)—tutorial can be found here: http:\\/\\/webdesign.tutsplus.com\\/tutorials\\/blending-modes-in-css-color-theory-and-practical-application--cms-25201\",\"slug_hash\":\"wMvoyj\",\"head\":\"\",\"private\":false,\"slug_hash_private\":\"5075b4ccc911e54f08e773e49bfd8df0\",\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"autoprefixer\",\"template\":false,\"parent_id\":5524735,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":\"2022-11-08T22:42:55.128Z\",\"cpid\":null,\"pen_hash\":null,\"hashid\":\"wMvoyj\"}"}