Good day, dear gurus.

I simplified how I could code from the previously prepared page template http://rgho.st/private/8QFjYQG5D/ad162ebcaaf898efa06aa7d35129dcac in order to enter it here.

.ta, .ta2 { height: 100px; width: 100%; transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } .read-next2 { text-align: center; display: inline; position: static; bottom-top: 10px; left: 15px; right: 0; width: auto; padding-top: 60px; background: linear-gradient(to top, #fff 30%, rgba(255, 255, 255, 0)) } 
 <aside class="widget popular-posts"> <p class="widget-title">Главные статьи</p> <div style="height:100%"> <div class="ta2" style="overflow:hidden;"> <ul> <li> <a title="" href=""></a> <a title="" href="">Главная статья 1 - в ней то-то.</a> </li> <li> <a title="" href=""></a> <a title="" href="">Главная статья 2 - в ней то-то.</a> </li> <li> <a title="" href=""></a> <a title="" href="">Главная статья 3 - в ней то-то.</a> </li> <li> <a title="" href=""></a> <a title="" href="">Главная статья 4 - в ней то-то.</a> </li> <li> <a title="" href=""></a> <a title="" href="">Главная статья 5 - в ней то-то.</a> </li> <li> <a title="" href=""></a> <a title="" href="">Главная статья 6 - в ней то-то.</a> </li> <li> <a title="" href=""></a> <a title="" href="">Главная статья 7 - в ней то-то.</a> </li> <li> <a title="" href=""></a> <a title="" href="">Главная статья 8 - в ней то-то.</a> </li> <li> <a title="" href=""></a> <a title="" href="">Главная статья 9 - в ней то-то.</a> </li> <li> <a title="" href=""></a> <a title="" href="">Главная статья 10 - в ней то-то.</a> </li> </ul> </div> <div class="read-next2"><a class="read-next22" href="#">Читать далее...</a> </div> </div> </aside>

How to center the "Read more .." button with a gradient over the entire width of the block, and also to prescribe a small indent for the button relative to the content. The unit itself does not need to be centered - this is a rubber sidebar with a list of articles.

And this is how it all looks now: enter image description here

I’m not a webmaster and basically I’m scooping examples of the implementation of a design solution from other resources, but I’ve seen few of these designs, and you can see adaptation attempts now :-( Please help.

    1 answer 1

    Do you need this option? (added width to the block in html for clarity; by changing the margin-top and height of .read-text2 you can achieve the display you need)

     .ta, .ta2 { height: 100px; width: 100%; transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } li { height: 20px; } .read-next2 { text-align: center; position: relative; width: 100%; background: linear-gradient(to top, #fff 25%, rgba(255, 255, 255, 0)); margin-top: -25px; height: 25px; } .read-next22 { text-align: center; display: block; } 
     <aside class="widget popular-posts"> <p class="widget-title">Главные статьи</p> <div style="height:100%; width: 300px;background:#FFF;"> <div class="ta2" style="overflow:hidden;"> <ul> <li> <a title="" href=""></a> <a title="" href="">Главная статья 1 - в ней то-то.</a> </li> <li> <a title="" href=""></a> <a title="" href="">Главная статья 2 - в ней то-то.</a> </li> <li> <a title="" href=""></a> <a title="" href="">Главная статья 3 - в ней то-то.</a> </li> <li> <a title="" href=""></a> <a title="" href="">Главная статья 4 - в ней то-то.</a> </li> <li> <a title="" href=""></a> <a title="" href="">Главная статья 5 - в ней то-то.</a> </li> <li> <a title="" href=""></a> <a title="" href="">Главная статья 6 - в ней то-то.</a> </li> <li> <a title="" href=""></a> <a title="" href="">Главная статья 7 - в ней то-то.</a> </li> <li> <a title="" href=""></a> <a title="" href="">Главная статья 8 - в ней то-то.</a> </li> <li> <a title="" href=""></a> <a title="" href="">Главная статья 9 - в ней то-то.</a> </li> <li> <a title="" href=""></a> <a title="" href="">Главная статья 10 - в ней то-то.</a> </li> </ul> </div> <div class="read-next2"> </div> <a class="read-next22" href="#">Читать далее...</a> </div> </aside>

    • Unfortunately not. The transition should be smooth, so that it can be understood even on the worst monitor, which does not display half of the shades. And indentation should be. This picture visually shows how it should be i91.fastpic.ru/big/2017/0211/40/… - UserUser-name
    • Made changes and explanatory comment. - br3t
    • Thank you for responding, I made the appropriate changes to the test template and the button "Read more .." began to crawl on the text, and the last item continued to remain lit when the list was fully opened, giving the impression that there was something else . I uploaded the original site template to the jsfiddle.net/5h0gfo6c/1 testing service, which may clarify the situation. - UserUser-name
    • Made changes to your feeds jsfiddle.net/5h0gfo6c/2 - br3t
    • Do not think so for arrogance, but I would like to have as wide a transition (gradient) as in the original version. To smoothly overlap one and a half lines (the original version), and not a quarter of a line (as it is now). Just on monitors with bad TN matrices such a short gradient will not be noticeable at all, checked :-( - UserUser-name