Иногда при верстке сайта необходимо отобразить только часть текста.
Чтобы дать понять пользователю, что нижеследующее является продолжением, можно, например, поставить многоточие или ссылку «читать дальше».
Но есть очень красивый способ заставить текст постепенно исчезать.
Чтобы было понятно, о чем идет речь, приведу следующее: пример .
Из всего материала, который мне удалось найти в течение дня, наиболее подходящим для меня оказался описанный простой и понятный метод. Здесь .
Но у него есть существенный недостаток: тень сложно позиционировать, а боковые края приходится отделять отступами.
Для тех, кто ищет простой способ затемнить текст, вот мой простой пример.
Итак, нам понадобится всего один блок, в котором будет находиться текст, который необходимо затемнить:
И всего два класса CSS:<div id="textbox"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> </div>
#textbox{
max-height:100px;
overflow:hidden;
margin-top:-20px;
}
#textbox:before{
content:"";
display:block;
height:20px;
position:relative;
top:80px;
background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 75%)
}
Теперь суть: Используя псевдокласс before мы создаем небольшой блок с градиентной заливкой.
По умолчанию он расположен вверху текстового блока.
Используя позицию:relative, мы перемещаем этот блок вниз так, чтобы он закрывал одну (или несколько) последних строк текста.
Все.
К преимуществам относятся: — простота реализации (мы используем только css) — выделенный текст Из минусов: — Не работает в IE до 9 версии включительно (кто бы сомневался) – Подходит для блоков фиксированной высоты Теги: #fade #crop #darken #text #css3 #CSS
-
Гугл Ридер. Подробности Подписки
19 Oct, 24 -
Установка Mercurial На Виртуальный Хостинг
19 Oct, 24 -
Симулятор Лопаточных Прыщей
19 Oct, 24 -
Как Мы Делали Программу Клуба «Спортмастер»
19 Oct, 24
