Как сделать тень на боковых панелях

[Роман_Тютин]

Привет, подскажите пожалуйста как сделать выделенные сообщения с тенью как у Вас на форуме, и боковые панели , надеюсь понятно объяснил

 

[baltun]

Фрагмент CSS:

.sidebar .secondaryContent{
border: 1px solid #d7edfc;
border-radius: 5px;
box-shadow: 5px 2px 5px rgba(0,0,0,0.4); }

.message {
border: 1px solid #d7edfc;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.4); }

 

[Роман_Тютин]

спасибо, это же нужно в Extra.css вставлять ? сегодня вечером попробую поставить на форум

 

[baltun]

Да все верно

 

[Turok]

Как сделать чтоб как у Вас, при наведении мигало?

 

[baltun]

Я прописал так у себя:

.sectionMain, .node .nodeLastPost {
border: 1px solid #d7edfc;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
margin-bottom: 20px;
padding: 10px;
}
.node .nodeLastPost:hover {
box-shadow: none;
}

Соответственно на разных шаблонах будет по разному, в плане цветов.

 

[Turok]

И как сделать эти блоки тоже такими?

 

[baltun]

ну css я вам дал, вы наверно теперь подразумеваете иконки font awesome ?

 

[Turok]

Вы не поняли, мне нужно чтоб они играли, они здесь как анимированые, ну поняли я думаю. =)

 

[baltun]

Так я вам для этого css и выложил они выглядят как на скрине, когда наводите мышку срабатывает hover и тени убираются и получается как будто Вы нажимаете на них. Других эффектов к ним не применялось.

 

[Turok]

А где цвет тени поменять?

 

[baltun]

border: 1px solid #d7edfc; - цвет окантовки или бордяра
box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
rgba(0,0,0,0.4) - это и есть цвет тени

Вот эта статья может Вам помочь в переводе цветов в нужный Вам формат. https://web-zones.ru/threads/perevod-cvetov-css-v-drugie-formaty.334/

 

[Turok]

Еще вопрос? как вы сделали вот такие черточки.

 

[baltun]

Если память не изменяет так:

.quickReply {
border: 2px dashed #a5cae4;
box-shadow:
    0 1px 4px rgba(0, 0, 0, .3),
   -23px 0 20px -23px rgba(0, 0, 0, .8),
    23px 0 20px -23px rgba(0, 0, 0, .8),
    0 0 40px rgba(0, 0, 0, .1) inset,
    0 0 0 1px #a5cae4,
    inset 0 0 0 1px #a5cae4;
}

 

[Turok]

Черточки не появились

 

[baltun]

Должны были за это отвечает вот этот параметр:

border: 2px dashed #a5cae4;

 

[Turok]

При наведении на пожертвование оно дёргается, это как?

 

[baltun]

Это css 3 с эффектами анимации, сейчас уже наверное не вспомню, найду фрагмент отвечу тогда.
Код покачивания в пожертвованиях:

.csiXF_moduleDonatYaMoney_sidebarBlock:hover {
  -webkit-animation: swing 1s ease;
  animation: swing 1s ease;
-webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/*эффект покачивания*/
@-webkit-keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
       transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

 

[aligon]

а у меня не мигает, чёт не как, может из за того , что я залез в макет сообщений?

 

[baltun]

что я залез в макет сообщений?

Весь код CSS добавляется исключительно в шаблон EXTRA.CSS и желательно в мастер-шаблоне.