Эффект линейной прозрачности div

413

31 декабря 2016, 13:53

Доброго времени - такой вопрос: как можно сделать плавную прозрачность блока с текстом, то есть что бы она накладывалась градиентом, весь блок к примеру с текстом отображается нормально, а низ его плавно становится прозрачным и в конце вовсе исчезает. Я обдумываю вариант с наложением сверху div блока с position absolute у которого на background будет png картинка с белым градиентом, но этот вариант работает только есть фон страницы белый. Есть ли какой то способ к примеру через jquery или css3 сделать это не так костыльно, к примеру через css mask?

Answer 1

#grad1 { 
  height: 200px; 
  background: red; 
  background: -webkit-linear-gradient(red, rgba(0, 0, 0, 0)); 
  background: -o-linear-gradient(red, rgba(0, 0, 0, 0)); 
  background: -moz-linear-gradient(red, rgba(0, 0, 0, 0)); 
  background: linear-gradient(red, rgba(0, 0, 0, 0)); 
}

<div id="grad1">HyperText Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS), and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web.[1] Web browsers receive 
  HTML documents from a webserver or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</div>

Answer 2

Данного эффекта можно добиться при помощи SVG. Неудобство заключается в том, что наложение маски на хтмл-элемент допускается только в фаерфоксе, во всех остальных браузерах накладывать маску можно на свг-элементы. Для этого потребуется каждый блок, которому необходимо применить такую маску, обернуть свг-контейнером.

Для удобства, в данном примере вынес определение маски в отдельный контейнер и визуально скрыл.

body { 
  background: linear-gradient(#000, #fff); 
  min-height: 100vh; 
  padding: 0; 
  margin: 0; 
  display: flex; 
  flex-direction: column; 
} 
 
.defs { 
  height: 0; 
  overflow: hidden; 
} 
 
.box { 
  width: 300px; 
  height: 100px; 
  border: 2px solid #000; 
  display: block; 
  margin: auto; 
} 
 
.box foreignObject { 
  mask: url(#mask); 
} 
 
.block { 
  padding: 15px; 
  color: #fff; 
}

<svg class="defs"> 
  <defs> 
    <mask id="mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"> 
      <linearGradient id="gradient" gradientUnits="objectBoundingBox" x2="0" y2="1"> 
        <stop stop-color="white" stop-opacity="1" offset="0" /> 
        <stop stop-color="white" stop-opacity="0" offset="1" /> 
      </linearGradient> 
      <rect width="100%" height="100px" fill="url(#gradient)" /> 
    </mask> 
  </defs> 
</svg> 
 
<svg class="box"> 
  <foreignObject width="100%" height="100%"> 
    <!-- HTML code --> 
    <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
  </foreignObject> 
</svg>