Using CSS3′s Blend Mode Property to Create Window Text

Datetime:2016-08-23 03:06:50          Topic: CSS3           Share

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.

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.

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:

  1. div.main {
  2. width : 700px ;
  3. height : 500px ;
  4. background : url ( 'img/path' ) ;

  5. background-size : color ;

  6. }

And your h1 should be styled similar to this:

  1. .main h1 {
  2. font-size : 80px ;

  3. text-align : center ;

  4. top : 100px ;
  5. padding : 15px ;
  6. position : relative ;

  7. font-family : sans-serif ;

  8. color : #222 ;
  9. }

At this point, you should have something that looks like the image below.

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:

  1. .main h1 {
  2. font-size : 80px ;

  3. text-align : center ;

  4. top : 100px ;
  5. padding : 15px ;
  6. position : relative ;

  7. font-family : sans-serif ;

  8. color : #fff ;
  9. background-color : #222 ;

  10. mix-blend-mode : multiply ;

  11. }

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.





About List