Jump to content
  • Эффект плавного затухания логотипа


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

    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;
    }

     


    User Feedback

    Recommended Comments

    В 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;
    }

     

    Link to comment
    Share on other sites
    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;
    }

     

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

    Link to comment
    Share on other sites
    В 21.09.2017 в 14:21, Hundmann сказал:

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

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

    Link to comment
    Share on other sites


    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Add a comment...

    ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Ваша ссылка была автоматически строена.   Отображать как обычную ссылку

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.

    Loading...

×
×
  • Create New...