Mix Blend

ejemplo con una propiedad CSS mix blend

by Juan Muñoz

HTML

<div>
  <section>
  <h2>TITULO GRANDE QUE PODEMOS AQUI</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos possimus, magnam officiis ratione exercitationem quisquam ut, vero eveniet repudiandae explicabo rerum ipsum. Ipsum architecto illo non iusto porro assumenda nihil laudantium facilis iure magnam, animi, ad nulla quam. Necessitatibus, fugiat! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus aliquid cumque harum, iste vero itaque! Totam sequi suscipit voluptatem magni tempora ipsa, explicabo blanditiis nostrum accusamus repellat temporibus, accusantium tenetur impedit, fuga, facilis alias! Assumenda accusamus nemo illo officia placeat distinctio dolorem labore, earum eius mollitia, numquam minima, molestias laudantium. Perferendis ab reiciendis, possimus fugiat dolorum deserunt alias laboriosam quos et aliquam. Animi recusandae vitae reiciendis atque saepe dolorum aliquid, illum error molestias! Voluptatibus, itaque rerum reprehenderit totam fuga aliquid similique neque aliquam nisi ipsam optio facere repellat modi sint nobis hic ullam, mollitia nesciunt eaque. Nesciunt, dolorum. Excepturi, id numquam! Nihil ut numquam sit iste eum voluptatibus ea nesciunt debitis labore illo in, iusto architecto soluta placeat rem voluptates corrupti aut cumque maxime. Eveniet molestias dolor aliquid nemo natus reprehenderit error quidem enim labore quod similique, alias, dignissimos dolorum! Aut molestiae nam vero a! Accusantium tenetur at pariatur sequi provident rem aspernatur temporibus adipisci officiis aperiam fugiat, quam laboriosam porro odit atque repellendus inventore! Molestiae expedita tempora pariatur. Dignissimos ratione fuga delectus ipsum, et impedit deserunt ipsam dicta placeat facilis voluptas aspernatur ab! Corporis ipsam ullam blanditiis suscipit dicta debitis dolore incidunt quae, numquam ducimus? Obcaecati provident facere tempora numquam iure eius, culpa doloribus quasi omnis, quae, at eveniet voluptatem...

CSS

.capa{
  position: fixed;
  top: 0;
  left:0;
  width:100%;
  height: 50vh;
  background: #fff;
   mix-blend-mode: difference;
}
section {
  padding:100px;
  min-height: 100vh;
  position:relative;
  background:#fff;
}
h2{
  font-size:4em;
}

p{
  font-size:1.4em;
}