Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Скрытие текста при помощи CSS

Дата добавления: 08.03.2017 - 12:50
Добавил: Buger
Количество просмотров: 210
Количество комментариев: 0
Размер файла: 3.4Kb
Рейтинг материала: 5.0 / 1
Скрытие текста при помощи CSS
рейтинг 5.0
/
голосов 1
Интересная реализация скрытия текста на 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>


Источник: http://art-ucoz.ru/
Добавлять комментарии могут только зарегистрированные пользователи.