{"id":1954,"date":"2016-06-20T15:30:44","date_gmt":"2016-06-20T15:30:44","guid":{"rendered":"http:\/\/cssreset.com\/?p=1954"},"modified":"2016-06-20T15:30:44","modified_gmt":"2016-06-20T15:30:44","slug":"using-css3s-blend-mode-property-to-create-window-text","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/using-css3s-blend-mode-property-to-create-window-text\/","title":{"rendered":"Using CSS3’s Blend Mode Property to Create Window Text"},"content":{"rendered":"

 <\/p>\n

Although it may look complex, creating a window text effect is actually really easy to do using CSS and the mix-blend-mode property. The mix-blend-mode property determines the way in which an element’s content should blend with the element’s background.<\/p>\n

In terms of your HTML, all you need to create the above effect is a div with some text inside it. For this example, we used a div with a class of “main” that contained an h1.<\/p>\n

The main purpose of the div is to be a container for the background image. The styling of your div should look something like this:<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
css<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. div.main{<\/span><\/div><\/li>\n
  2. width<\/span>:<\/span> 700px<\/span>;<\/span><\/div><\/li>\n
  3. height<\/span>:<\/span> 500px<\/span>;<\/span><\/div><\/li>\n
  4. background<\/span>:<\/span> url<\/span>(<\/span>'img\/path'<\/span>)<\/span>;<\/span><\/div><\/li>\n
  5. background-size:<\/span> color<\/span>;<\/span><\/div><\/li>\n
  6. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    And your h1 should be styled similar to this:<\/p>\n

    \r\n\r\n\t\t
    \r\n\r\n\t\t
    \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
    css<\/div>\r\n\r\n\t\t\r\n\t\t
    \r\n\r\n\t<\/div>\r\n\t\r\n\t
    \r\n\t\t
    1. .main<\/span> h1{<\/span><\/div><\/li>\n
    2. font-size<\/span>:<\/span> 80px<\/span>;<\/span><\/div><\/li>\n
    3. text-align<\/span>:<\/span> center<\/span>;<\/span><\/div><\/li>\n
    4. top<\/span>:<\/span> 100px<\/span>;<\/span><\/div><\/li>\n
    5. padding<\/span>:<\/span> 15px<\/span>;<\/span><\/div><\/li>\n
    6. position<\/span>:<\/span> relative<\/span>;<\/span><\/div><\/li>\n
    7. font-family<\/span>:<\/span> sans-serif<\/span>;<\/span><\/div><\/li>\n
    8. color<\/span>:<\/span> #222<\/span>;<\/span><\/div><\/li>\n
    9. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

      At this point, you should have something that looks like the image below.<\/p>\n

      \"Screen<\/p>\n

      We’re almost finished! We only need to add a few lines of CSS to achieve the window text effect. Adjust your h1 CSS so it looks like this:<\/p>\n

      \r\n\r\n\t\t
      \r\n\r\n\t\t
      \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
      css<\/div>\r\n\r\n\t\t\r\n\t\t
      \r\n\r\n\t<\/div>\r\n\t\r\n\t
      \r\n\t\t
      1. .main<\/span> h1{<\/span><\/div><\/li>\n
      2. font-size<\/span>:<\/span> 80px<\/span>;<\/span><\/div><\/li>\n
      3. text-align<\/span>:<\/span> center<\/span>;<\/span><\/div><\/li>\n
      4. top<\/span>:<\/span> 100px<\/span>;<\/span><\/div><\/li>\n
      5. padding<\/span>:<\/span> 15px<\/span>;<\/span><\/div><\/li>\n
      6. position<\/span>:<\/span> relative<\/span>;<\/span><\/div><\/li>\n
      7. font-family<\/span>:<\/span> sans-serif<\/span>;<\/span><\/div><\/li>\n
      8. color<\/span>:<\/span> #fff<\/span>;<\/span><\/div><\/li>\n
      9. background-color<\/span>:<\/span> #222<\/span>;<\/span><\/div><\/li>\n
      10. mix-blend-mode:<\/span> multiply;<\/span><\/div><\/li>\n
      11. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

        All you need to do is change the text color to white, add a background color of your choice, and add the mix-blend-mode property with a value of multiply, and you should find yourself with something that looks a lot like the image below.<\/p>\n

        \"Screen<\/p>\n

         <\/p>\n

        Share and Enjoy !<\/h3>
        0<\/span><\/span>Shares<\/small><\/div>
        <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

         <\/p>\n

        Although it may look complex, creating a window text effect is actually really easy to do using CSS and the mix-blend-mode property. The mix-blend-mode property determines the way in which an element’s content should blend with the element’s background.<\/p>\n

        In terms […]<\/p>\n

        Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":1956,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6,42],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1954"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=1954"}],"version-history":[{"count":1,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1954\/revisions"}],"predecessor-version":[{"id":1958,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1954\/revisions\/1958"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/1956"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1954"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1954"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}