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

Статус
Закрыто для дальнейших ответов.

Роман_Тютин

Местный
Сообщения
101
Реакции
53
Баллы
303
Привет, подскажите пожалуйста как сделать выделенные сообщения с тенью как у Вас на форуме, и боковые панели 2016-03-22_210131.png 2016-03-22_210226.png , надеюсь понятно объяснил :grin:
 
Фрагмент 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); }
 
Я прописал так у себя:
Код:
.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;
}

Соответственно на разных шаблонах будет по разному, в плане цветов.
 
ну css я вам дал, вы наверно теперь подразумеваете иконки font awesome ?
 
Вы не поняли, мне нужно чтоб они играли, они здесь как анимированые, ну поняли я думаю. =)
 
Так я вам для этого css и выложил они выглядят как на скрине, когда наводите мышку срабатывает hover и тени убираются и получается как будто Вы нажимаете на них. Других эффектов к ним не применялось.
 
Код:
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/
 
Если память не изменяет так:
Код:
.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;
}
 
Должны были за это отвечает вот этот параметр:
Код:
border: 2px dashed #a5cae4;
 
Это 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);
    }
}
 
Последнее редактирование:
а у меня не мигает, чёт не как, может из за того , что я залез в макет сообщений?
 
Статус
Закрыто для дальнейших ответов.
Назад
Верх Низ