ruarhyzh-CNcsdanlenfrkadeeliwitjakoestr

Предлагаем широкий спектр веб услуг по разработке, поддержке и продвижению веб-сайтов.
Гарантируем качество и высокий уровень сдаваемых проектов с 2006 года.

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

 Эти методы плохи и устаревшие уже. Зачем лепить в загрузку еще одну микро картинку или подключать к шаблону еще 105-й по счету скрипт, который возможно будет требовать библиотеку JQuery, тут возможен и конфликт скриптов.

Сейчас на дворе 21 век и время HTML 5 и CSS3.

Так давайте делать сайты для новых браузеров, используя новые стандарты, которые более проще и понятнее:

HTML код:

 

<div style="position: relative; display: table;"> 
Примерный текст <div class="right-shadow"></div>
</div>

 

 CSS код:

 

.right-shadow {
background-image:linear-gradient(left top, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%);
background-image: -moz-linear-gradient(left top, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%);
background-image: -o-linear-gradient(left top, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%);
background-image: -khtml-linear-gradient(left top, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%);
background-image: -webkit-linear-gradient(left top, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%);
background-image: -ms-linear-gradient(left top, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%);
height: 100%;    position: absolute;    right: 0;    top: 0;    width: 20px;    z-index: 2;
}

 

 Вот это даст такой результат:

 

Примерный текст


e-mail

All rights reserved. © 2006-2024. При перепечатке текстов, активная, видимая ссылка на TopWebDesign.ru обязательна.

Сайт носит исключительно информационный характер и никакая информация, опубликованная на нём, ни при каких условиях не является публичной офертой, определяемой положениями статьи 437 Гражданского кодекса РФ. Настоящий ресурс может содержать материалы 18+

Продолжая использовать наш сайт, Вы даете согласие на обработку файлов cookies и пользовательских данных, подробнее в нашей Политике Cookie. Если Вы не хотите, чтобы Ваши данные обрабатывались, пожалуйста, покиньте сайт.

Наверх Вниз