Скрытие текста при помощи CSS
Добавлено 19.04.2017 в 20:02
Скрытие текста при помощи CSS
Интересная реализация скрытия текста на CCS без применения JS. Где использовать данную реализацию - решать только вам. Но думаю что данный материал вам очень пригодится. Используйте и экспериментируйте с данным примером в своих проектах.

HTML код

Код
<div class="content">  
  <h1>Скрытый текст</h1>  
  <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Запятой единственное жаренные имеет переписали имени свое, взобравшись которое, заголовок злых, она оксмокс. Текст переулка строчка ее то рекламных прямо имеет от всех сих использовало составитель ты скатился, она проектах которой они себя путь моей назад города текста, снова на берегу безорфографичный. Первую на берегу ручеек большого ты всеми предложения диких сих о буквенных рот злых города имеет решила силуэт ведущими, собрал переписали там!</p>  
</div>


CSS стили

Код
<style type="text/css">  
  p {  
  color: #fff;  
  }  
   
  @supports (mix-blend-mode: screen) {  
  p {  
  mix-blend-mode: screen;  
  position: relative;  
  background: #000;  
  }  
  p::after {  
  background: -webkit-linear-gradient(top, transparent, #000 3rem) no-repeat bottom center/100% 100%;  
  background: linear-gradient(180deg, transparent, #000 3rem) no-repeat bottom center/100% 100%;  
  content: '';  
  position: absolute;  
  top: 0;  
  right: 0;  
  bottom: 0;  
  left: 0;  
  pointer-events: none;  
  -webkit-transition: 0.5s ease-out;  
  transition: 0.5s ease-out;  
  }  
  p:hover::after {  
  background-size: 100% 0%;  
  }  
  }  
  /* Pen styling */  
   
  body {  
  background: #222 url(https://source.unsplash.com/yNGQ830uFB4/1600x900) 50% 50%/cover;  
  display: -webkit-box;  
  display: -ms-flexbox;  
  display: flex;  
  -webkit-box-align: center;  
  -ms-flex-align: center;  
  align-items: center;  
  font: 18px/1.5 'Roboto', sans-serif;  
  -webkit-box-pack: center;  
  -ms-flex-pack: center;  
  justify-content: center;  
  min-height: 100vh;  
  position: relative;  
  }  

  body::before {  
  background: #222;  
  content: '';  
  position: absolute;  
  top: 0;  
  right: 0;  
  bottom: 0;  
  left: 0;  
  opacity: 0.5;  
  }  

  h1 {  
  font-size: 32px;  
  font-weight: 300;  
  }  

  .content {  
  color: #fff;  
  max-width: 600px;  
  text-align: center;  
  position: relative;  
  }  
</style>
К материалу оставили 2 комментария
LowRider
Вадим Хакимов @LowRider
3
12.05.2017 в 20:33 - Пятница
18 6
-D-I-N-I-S-
14.10.2023 в 15:56 - Суббота
1