Как сделать такой плавный конец таблицы?

Question

[pavelsa]

Пример goo.gl/AG1TDP

Answer 1

[xmoonlight]

<style type="text/css">
        .gradientEllipsis {
            position: relative;
            white-space: nowrap;
            overflow-x: hidden;
        }
        .gradientEllipsis:after {
            display: block;
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 50px;
            background: linear-gradient(left center, rgba(255, 255, 255, 0), #FFFFFF);
            content: "";
        }
    </style>
    <div class="gradientEllipsis" style="width: 150px">
        Foo, bar, and lorem ipsum.
    </div>

PS: на сайте адская! фасетка на GET-е... жесть...

Comments

[pavelsa]

Не работает почему-то(

[xmoonlight]

pavelsa: ну так Вы в код вставили как нужно? покажите.

[pavelsa]

Нужно сделать так что бы столбец td.city плавно уходила за td.delta_price

@charset "utf-8";

a:link {
color: #006699;
}

a:active {
color: #e12d33;
}

a:visited {
color: #3d3d3d;
}

#content td {
text-align: center;
padding-right: 1em;
font-family: "Arial";
font-size: 5px;
}

#content .flag {
height: 20px;
width: 20px;
padding-right: 3px;
}

#content td.model {
text-align: left;
width: 200px;
max-width: 200px;
padding-left: 1em;
overflow: hidden;
white-space: nowrap;
}

#content td.model a {
text-decoration: none;
}

#content td.price {
width: 150px;
text-align: right;
white-space: nowrap;
font-weight: bold;
}

#content td.year {
width: 60px;
text-align: center;
white-space: nowrap;
}

#content td.engine {
text-align: left;
width: 60px;
white-space: nowrap;
}

#content td.dist {
text-align: right;
white-space: nowrap;
width: 100px;
}

#content td.photo {
width: 25px;
}

#content td.body {
text-align: left;
width: 120px;
white-space: nowrap;
}

#content td.crash {
width: 40px;
}

#content .color {
width: 20px;
height: 20px;
}

#content td.city {
text-align: left;
width: 120px;
max-width: 120px;
overflow: hidden;
white-space: nowrap;
}

#content td.delta_price {
text-align: right;
width: 50px;
}

#content .white {
border: 1px solid #cacecb;
width: 19px;
height: 19px;
}

#content .black {
color: white;
}

#content .neg {
color: green;
}

#content .pos {
color: red;
}

#content .selected {
background-color: #bed9fb;
}

#content .new {
background-color: #f0f0f0;
}

#max_date {
display: none;
}

#admin_menu_link {
cursor: pointer;
}

#admin_menu {
display: none;
position: absolute;
width: 100px;
border: 1px solid black;
background-color: #F2F2F2;
}

[xmoonlight]

pavelsa: #content td.city:after {
display: block;
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 50px;
background: linear-gradient(left center, rgba(255, 255, 255, 0), #FFFFFF);
content: "";
}

[pavelsa]

xmoonlight: спасибо!

[xmoonlight]

pavelsa: заработало? отметите ответик как решение?

[xmoonlight]

pavelsa: Спасибо!

[pavelsa]

xmoonlight: как быть при наведении? при наведении у меня остается градиент белым, потому как на сайте он становится светло-серым?

[xmoonlight]

pavelsa: #content td.city:hover:after {background:#999;} как-то так... в общем убирать нужно или менять цвет на Ваш бэкграунд на странице при наведении "мышки".

Answer 2

[Александр Аксентьев]

<td class="sales-table-cell sales-table-cell_poi_id"><div title="Санкт-Петербург" class="sales-table-region sales-table-region_fader">Санкт-Петербург</div></td>

.sales-table-region_fader:after {
content: ' ';
position: absolute;
z-index: 1;
right: 0;
top: 0;
width: 30px;
height: 100%;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,0.31) 41%,rgba(255,255,255,0.95) 71%,rgba(255,255,255,1) 100%);
background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(41%,rgba(255,255,255,0.31)),color-stop(71%,rgba(255,255,255,0.95)),color-stop(100%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,0.31) 41%,rgba(255,255,255,0.95) 71%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,0.31) 41%,rgba(255,255,255,0.95) 71%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,0.31) 41%,rgba(255,255,255,0.95) 71%,rgba(255,255,255,1) 100%);
background: linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,0.31) 41%,rgba(255,255,255,0.95) 71%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff',endColorstr='#ffffff',GradientType=1 );
}