Sign in to follow this  
Followers 0
Vitaliy

Затухание текста

9 posts in this topic

Ребята как можно реализовать затухание текста в анонсах как на 4pda.ru?

Share this post


Link to post
Share on other sites
<p>много букв и текста<div class="fade"></div></p>

Для p делаем position: relative;

Для div.fade делаем position: absolute; right: 0; bottom: 0; width: 50px; height: 20px;

 

Второму элементу ставим в качестве фона картинку - градиент с прозрачностью.

Суть в том что в правом нижнем углу поверх текста будет градиент, который делает нужный эффект.

Share this post


Link to post
Share on other sites
<p>много букв и текста<div class="fade"></div></p>

Для p делаем position: relative;

Для div.fade делаем position: absolute; right: 0; bottom: 0; width: 50px; height: 20px;

 

Второму элементу ставим в качестве фона картинку - градиент с прозрачностью.

Суть в том что в правом нижнем углу поверх текста будет градиент, который делает нужный эффект.

 

http://habrahabr.ru/post/131390/

 

Пробывал не получаеться(

Share this post


Link to post
Share on other sites

Сделал пример:

http://jsfiddle.net/04dfqdh3/

data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+

:)

Зачем?

Share this post


Link to post
Share on other sites

data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+

:)

Зачем?

 

Ага, можно обойтись и картинкой, это просто для теста было. Тут сгенерен кстати colorzilla.com/gradient-editor/

Share this post


Link to post
Share on other sites

Ага, можно обойтись и картинкой, это просто для теста было. Тут сгенерен кстати colorzilla.com/gradient-editor/

вот посмотрите на сайте, как можно подправить

Share this post


Link to post
Share on other sites

вот посмотрите на сайте, как можно подправить

 

В .post-excerpt p тег добавте тег <div class="fade"></div>

И добавте эти css стили:

.post-excerpt p { position: relative; }
.post-excerpt p .fade { position: absolute; right: 0; bottom: 0; height: 20px; width: 100px; background: url(<gradient_image_path>) 0 0 repeat-y; }

Работает, через инспектор делал у вас на сайте (красным сделал для дебага): http://i62.tinypic.com/33jmiq9.jpg

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.