Перейти к содержанию
  • Эффект плавного затухания логотипа


    Sipsb

    Данная инструкция поможет Вам, добавить эффект плавного затухания логотипа при наведении на него мышкой.

    1.gif

    Добавьте данный код в Custom.css

    a#elLogo:hover {
        opacity: .4;
        -moz-transition-property: opacity;
        -moz-transition-duration: 1s;
        -moz-transition-delay: 0s;
        -webkit-transition-property: opacity;
        -webkit-transition-duration: 1s;
        -webkit-transition-delay: 0s;
        -o-transition-property: opacity;
        -o-transition-duration: 1s;
        -o-transition-delay: 0s;
        transition-property: opacity;
        transition-duration: 1s;
        transition-delay: 0s;
    }
    a#elLogo {
        display: inline;
        opacity: 1;
        -moz-transition-property: opacity;
        -moz-transition-duration: 1s;
        -moz-transition-delay: 0s;
        -webkit-transition-property: opacity;
        -webkit-transition-duration: 1s;
        -webkit-transition-delay: 0s;
        -o-transition-property: opacity;
        -o-transition-duration: 1s;
        -o-transition-delay: 0s;
        transition-property: opacity;
        transition-duration: 1s;
        transition-delay: 0s;
    }

     



    Обратная связь

    Рекомендуемые комментарии

    В 05.09.2017 в 19:17, Hundmann сказал:

    А можно ли сделать функцию свечения при наведении?

    a#elLogo:hover {
        opacity: 1;
        -moz-transition-property: opacity;
        -moz-transition-duration: 1s;
        -moz-transition-delay: 0s;
        -webkit-transition-property: opacity;
        -webkit-transition-duration: 1s;
        -webkit-transition-delay: 0s;
        -o-transition-property: opacity;
        -o-transition-duration: 1s;
        -o-transition-delay: 0s;
        transition-property: opacity;
        transition-duration: 1s;
        transition-delay: 0s;
    }
    a#elLogo {
        display: inline;
        opacity: .4;
        -moz-transition-property: opacity;
        -moz-transition-duration: 1s;
        -moz-transition-delay: 0s;
        -webkit-transition-property: opacity;
        -webkit-transition-duration: 1s;
        -webkit-transition-delay: 0s;
        -o-transition-property: opacity;
        -o-transition-duration: 1s;
        -o-transition-delay: 0s;
        transition-property: opacity;
        transition-duration: 1s;
        transition-delay: 0s;
    }

     

    Поделиться этим комментарием


    Ссылка на комментарий
    Поделиться на другие сайты
    3 часа назад, War75 сказал:
    
    a#elLogo:hover {
        opacity: 1;
        -moz-transition-property: opacity;
        -moz-transition-duration: 1s;
        -moz-transition-delay: 0s;
        -webkit-transition-property: opacity;
        -webkit-transition-duration: 1s;
        -webkit-transition-delay: 0s;
        -o-transition-property: opacity;
        -o-transition-duration: 1s;
        -o-transition-delay: 0s;
        transition-property: opacity;
        transition-duration: 1s;
        transition-delay: 0s;
    }
    a#elLogo {
        display: inline;
        opacity: .4;
        -moz-transition-property: opacity;
        -moz-transition-duration: 1s;
        -moz-transition-delay: 0s;
        -webkit-transition-property: opacity;
        -webkit-transition-duration: 1s;
        -webkit-transition-delay: 0s;
        -o-transition-property: opacity;
        -o-transition-duration: 1s;
        -o-transition-delay: 0s;
        transition-property: opacity;
        transition-duration: 1s;
        transition-delay: 0s;
    }

     

    Это немного не то. Тут просто инверсия функции, а я имел ввиду эффект свечения.

    Поделиться этим комментарием


    Ссылка на комментарий
    Поделиться на другие сайты
    В 21.09.2017 в 14:21, Hundmann сказал:

    Это немного не то. Тут просто инверсия функции, а я имел ввиду эффект свечения.

    Если логотип текстом, то добавить text-shadow: #000 1px 1px 1px вместо opacity (настроить цвет и размер свечения самим), если логотип картинкой - то сложно, т.к. для подобных элементов есть только box-shadow, который добавляет свечение контейнеру, а не картинке внутри. Можно png-шками сделать (но это тип прошлый век) - две картинки логотипа, одна с нужным вам эффектом, сделанным в фотошопе, при наведении менять background с одной картинки на другую с transition. 

    Поделиться этим комментарием


    Ссылка на комментарий
    Поделиться на другие сайты


    Для публикации сообщений создайте учётную запись или авторизуйтесь

    Вы должны быть пользователем, чтобы оставить комментарий

    Создать учетную запись

    Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

    Регистрация нового пользователя

    Войти

    Уже есть аккаунт? Войти в систему.

    Войти


×