Форум

rafaello · #1 (**permalink**) 10.07.2016, 17:48

Здравствуйте уважаемые!
Прошу совета, как сделать...
В общем мне надо каждую ячейку <tr><td></td><td></td></tr> закрасить фон, то есть bgcolor="" или background-color:....;
При этом border сделать толщиной 3-4 пикселя, белого цвета.
Все это не сложно. Вопрос возникает, как сделать плавный переход (по типу box-shadow:...

так, чтобы цвет фона, возле самого border плавно переходил в белый. В итоге, чтобы получились цветные ячейки таблицы с размытыми краями, плавно переходящими в белый цвет.
Спасибо!

rafaello · #2 (**permalink**) 10.07.2016, 21:19

Непонятно...
Что то не так спросил (глупый вопрос)
или
Это невозможно сделать такое?

Malleys · #3 (**permalink**) 10.07.2016, 21:58

Фоновая картинка linear-gradient

Код:

background-image:
  linear-gradient(
    to bottom,
    #fff,
    transparent 50px,
    transparent calc(100% - 50px),
    #fff
  ), linear-gradient(
    to left, 
    #fff, 
    transparent 50px,
    transparent calc(100% - 50px), 
    #fff
  );

<html><head><style type="text/css">table {
    border-collapse: collapse;
    table-layout: fixed;
    box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
    background-color: #ff9800;
    background-image: url(http://www.spyderonlines.com/images/wallpapers/natural-hd-wallpaper/natural-hd-wallpaper-8.jpg);
    background-size: cover;
    width: 75%;
    height: 75%;
    margin: auto;
}

td {
    border: 4px solid #fff;
    background-image: linear-gradient(to bottom, #fff, transparent 50px, transparent calc(100% - 50px), #fff), linear-gradient(to left, #fff, transparent 50px, transparent calc(100% - 50px), #fff);
}

body {
    display: flex;
}</style></head><body>
  <table>
    <tbody><tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr></tbody></table></body></html>

rafaello · #4 (**permalink**) 11.07.2016, 10:03

Ух ты... здорово!!!
Я бы сам ни в жизни не сделал бы.
Спасибо.
Хотя...
Сейчас получается, что процесс перехода цвета linear-gradient происходит почти от центра ячейки таблицы. А хотелось бы, чтобы основная часть ячейки была закрашена цветом, а переход к другому цвету начинался бы возле самого бордера. Это можно как то регулировать?

Spass · #5 (**permalink**) 20.07.2016, 11:08

td {
    background: #39f;
    box-shadow: inset 0 0 20px #fff;
}

Форум

Справочник

Discord чат

Курсы javascript