1 Тема від heyday Востаннє редагувалося Chemist-i (26.04.2022 16:35:35)

  • heyday
  • Новий користувач
  • Поза форумом
  • Дата реєстрації: 26.04.2022
  • Повідомлень: 1
    • Репутація: 0

Тема: Рамка навколо таблиці

Підскажіть будь ласка як зробити щоб рамка зявлялась і зникала навколо таблиці так як це зроблено на сайті https://www.ispsystem.ru/software/billmanager там де 6 блоків розділу "Возможности панели BILLmanager".

Скопіювати там таку таблицю не виходить (

▼Прихований текст

http://fastpic.at.ua/_nw/37/53465677.jpg

2 Відповідь від Chemist-i

  • Chemist-i
  • Chemist-i
  • Replace Team
  • Поза форумом
  • Звідки: world wide web
  • Дата реєстрації: 31.10.2012
  • Повідомлень: 3 800
    • Репутація: 2394

Re: Рамка навколо таблиці

Кацапська, сховав під спойлер, наступного разу самостійно.

Chemist-i вебсайт

3 Відповідь від Dmy

  • Dmy
  • Новий користувач
  • Поза форумом
  • Звідки: Порту←Мінськ←Львів
  • Дата реєстрації: 20.12.2021
  • Повідомлень: 16
    • Репутація: 17

Re: Рамка навколо таблиці

Це робиться через :hover. Наприклад, якщо у вас стиль для елемента з класом .test, то стиль .test:hover використовуватиметься тоді, коли над елементом знаходиться курсор миші.

Ось приклад:

<!DOCTYPE HTML>
<html>
    <meta charset="utf-8">
    <head>
        <style>
            .table {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                width: fit-content;
            }
            .table a {
                width: 100px;
                height: 50px;
                text-align: center;
                line-height: 50px;
                text-decoration: none;
                color: black;
                
                border-radius: 20px;
                border: solid 1px rgba(0, 0, 0, 0);
            }
            .table a:hover {
                border: solid 1px #ccc;
                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
                animation: show-shadow 0.5s 1;
            }
            
            @keyframes show-shadow {
                0% {
                    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.0);
                }
                100% {
                    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
                }
            }
        </style>
    </head>
    <body>
        <div class="table">
            <a href="#">
                Один
            </a>
            <a href="#">
                Два
            </a>
            <a href="#">
                Три
            </a>
            <a href="#">
                Чотири
            </a>
            <a href="#">
                П'ять
            </a>
            <a href="#">
                Шість
            </a>
        </div>
    </body>
</html>
Подякували: leofun011