На сайте ведутся работы!
Поэтому могут быть ошибки и недочеты. Приносим свои извинения и постараемся все исправить в ближайшее время.
AdBlock
Блокируйте рекламу. Просматривайте быстрее.
Adguard
Самый быстрый и легковесный блокировщик рекламы для браузеров.
Недавние обсуждения
Интересная реализация скрытия текста на 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>
Теги к материалу
Скрытие, помощи, при, текста, CSS
Поделись материалом с друзьями
Рекомендуем к просмотру
К материалу оставили 1 комментарий
LowRider
Вадим Хакимов @LowRider
3
12.05.2017 в 20:33 - Пятница
18 6