Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Градиентное скрытие / 7 сообщений из 7, страница 1 из 1
12.01.2015, 03:06
    #38851859
_Vasilisk_
_Vasilisk_
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Градиентное скрытие
Задача: есть таблица со столбцом фиксированной ширины. Если содержимое столбца больше этой ширины, то хвост нужно градиентно обрезать.

Эту задачу я решил
Код: html
1.
2.
3.
4.
5.
6.
  <table border="1">
    <tr>
      <td>No fade</td>
      <td class="fade">1234567890</td>
    </tr>
  </table>


Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
.fade {
  width: 50px;
  max-width: 50px;
  overflow: hidden;
  position: relative;
}

.fade:after {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 20px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF);
  content: ' ';
}



Теперь задача усложняется. При наведении мышей на строку, нужно поменять ее цвет
Код: css
1.
2.
3.
tr:hover {
  background-color: red;
}


Но теперь вылезли артефакты с заливкой градиента.

Если добавить такой стиль
Код: css
1.
2.
3.
.fade:hover:after {
  background: linear-gradient(to right, rgba(255, 0, 0, 0), #FF0000);
}


То при наведении на fade столбец все работает как нужно, но при наведении на другой столбец опять появляются артефакты (что логично).

Вопрос: решается ли задача на CSS?

С уважением, Vasilisk
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.01.2015, 03:06
    #38851860
_Vasilisk_
_Vasilisk_
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Градиентное скрытие
Задача: есть таблица со столбцом фиксированной ширины. Если содержимое столбца больше этой ширины, то хвост нужно градиентно обрезать.

Эту задачу я решил
Код: html
1.
2.
3.
4.
5.
6.
  <table border="1">
    <tr>
      <td>No fade</td>
      <td class="fade">1234567890</td>
    </tr>
  </table>


Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
.fade {
  width: 50px;
  max-width: 50px;
  overflow: hidden;
  position: relative;
}

.fade:after {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 20px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF);
  content: ' ';
}



Теперь задача усложняется. При наведении мышей на строку, нужно поменять ее цвет
Код: css
1.
2.
3.
tr:hover {
  background-color: red;
}


Но теперь вылезли артефакты с заливкой градиента.

Если добавить такой стиль
Код: css
1.
2.
3.
.fade:hover:after {
  background: linear-gradient(to right, rgba(255, 0, 0, 0), #FF0000);
}


То при наведении на fade столбец все работает как нужно, но при наведении на другой столбец опять появляются артефакты (что логично).

Вопрос: решается ли задача на CSS?

С уважением, Vasilisk
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.01.2015, 09:31
    #38851918
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Градиентное скрытие
Не .fade:hover, а tr:hover следует использовать:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
<!DOCTYPE HTML>
<html>  
<head>
  <style>
    table {
      border-collapse: collapse;
    }
    
    tr .fade {
      width: 50px;
      max-width: 50px;
      overflow: hidden;
      position: relative;
    }
    
    tr .fade:after {
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 20px;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF);
      content:' ';
    }
    
    tr:hover {
      background-color: red;
    }
    
    tr:hover .fade:after {
      background: linear-gradient(to right, rgba(255, 0, 0, 0), #FF0000);
    }
  </style>
</head>  
<body>
  <table border="1">
    <tr>
      <td>No fade</td>
      <td class="fade">1234567890</td>
    </tr>
  </table>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.01.2015, 15:02
    #38852300
_Vasilisk_
_Vasilisk_
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Градиентное скрытие
skyANA
Код: html
1.
 tr:hover .fade:after {

Спасибо
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.01.2015, 15:18
    #38852325
_Vasilisk_
_Vasilisk_
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Градиентное скрытие
А еще вопрос. Заметил, что ИЕ (в частности 10 версия) на такую конструкцию
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
 tr .fade:after {
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 20px;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF);
      content:' ';
}

реагирует неадекватно и устанавливает высоту, где-то в треть от необходимой. Аналогично если поставить
Код: css
1.
height: 100%

Это лечится?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.01.2015, 15:44
    #38852359
_user89
_user89
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Градиентное скрытие
_Vasilisk_,

вроде нормально отображает, или я не так понял...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.01.2015, 16:17
    #38852389
_Vasilisk_
_Vasilisk_
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Градиентное скрытие
_user89вроде нормально отображаетЗначит это у меня на основном проекте, что-то наложилось.

Вылечилось вложением в td div и перенос fade на div
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Градиентное скрытие / 7 сообщений из 7, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 332ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1446372]:
 0ms
get settings:
 5ms
get forum list:
 11ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 56ms
get topic data:
 7ms
get forum data:
 2ms
get page messages:
 39ms
get tp. blocked users:
 1ms
others: 207ms
total:  332ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]