Update method for using Icons

[hanakin]

After some discussion on IRC we decided to change up the hot icons a little

imageset.png (10.74 KiB) Viewed 28823 times

I also modified the animation slightly to match the icon border color

http://12911.midaym.com/viewforum.php?f ... 5f0d3d1cea

[Louis7777]

The problem is they are animated gifs which are rigid and load slow, they need to be updated for an improved quality as they are blurry as hell. They need to allow for retina which is complicated.

Is that problem exclusive to Apple devices? Because on Android tablets and smartphones the animations work and look fine to me.

They can not be put into the spite making one if not two additional server requests.

I really hope that we can put them all in one sprite, but imo they have to look good for general use of phpBB e.g. for little chit-chat websites as well as for professional bodies such as universities.

The current animation is a place holder anyway like I stated I just needed to get something in place. I have tweaked it to make it more subtle as suggested so it nows has a subtle yellow pulse animation

This should be interesting and I personally like it a lot as an idea. I still prefer the old animations (can you make the pulse slightly more subtle and even less distractive? Maybe use smaller range?), but yours are fine. I think the pulse is a keeper, good idea.

[Sumanai]

Why not convert these images to SVG? There is support for animation, and thus may play an old view animated images.
There is no support in IE8 and older androids, but support css animations worse.

[hanakin]

@sumanai. I have pushed for some svg changes in other fixes and got shot down so went with the safer option. I believe the main reason being user base and comfortability with svgs as they are still relatively a new concept as far as using them. Not to mention they are somewhat complicated

[Sumanai]

I believe the main reason being user base and comfortability with svgs as they are still relatively a new concept as far as using them.

SVG:
Initial release 4 September 2001

But it's an idea for future versions.

[hanakin]

possibly their are upsides and downsides. Main downside being that their are overly complex

[Mess]

After some discussion on IRC we decided to change up the hot icons a little

imageset.png

I also modified the animation slightly to match the icon border color

http://12911.midaym.com/viewforum.php?f ... 5f0d3d1cea

Looking good.

[Darkness_demoN]

After some discussion on IRC we decided to change up the hot icons a little

imageset.png

I also modified the animation slightly to match the icon border color

http://12911.midaym.com/viewforum.php?f ... 5f0d3d1cea

Looking good.

I think that too Amm how can i change that pulse color? do i will have that option in css or somwhere else ?

[hanakin]

yes its all css in the imageset.css file you will have to change it in several lines

The unread red color

Code: Select all

@-webkit-keyframes cd-pulse-unread {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        -webkit-box-shadow: inset 0 0 1px 1px rgba(188, 42, 77, .8);
                box-shadow: inset 0 0 1px 1px rgba(188, 42, 77, .8);
    }

    50% {
        -webkit-box-shadow: inset 0 0 1px 1px rgba(188, 42, 77, .4);
                box-shadow: inset 0 0 1px 1px rgba(188, 42, 77, .4);
    }

    100% {
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
        -webkit-box-shadow: inset 0 0 1px 1px rgba(188, 42, 77, 0);
                box-shadow: inset 0 0 1px 1px rgba(188, 42, 77, 0);
    }
}

@keyframes cd-pulse-unread {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        -webkit-box-shadow: inset 0 0 1px 1px rgba(188, 42, 77, .8);
                box-shadow: inset 0 0 1px 1px rgba(188, 42, 77, .8);
    }

    50% {
        -webkit-box-shadow: inset 0 0 1px 1px rgba(188, 42, 77, .4);
                box-shadow: inset 0 0 1px 1px rgba(188, 42, 77, .4);
    }

    100% {
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
        -webkit-box-shadow: inset 0 0 1px 1px rgba(188, 42, 77, 0);
                box-shadow: inset 0 0 1px 1px rgba(188, 42, 77, 0);
    }
}

The read blue color

Code: Select all

@-webkit-keyframes cd-pulse-read {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        -webkit-box-shadow: inset 0 0 1px 1px rgba(25, 109, 181, .8);
                box-shadow: inset 0 0 1px 1px rgba(25, 109, 181, .8);
    }

    50% {
        -webkit-box-shadow: inset 0 0 1px 1px rgba(25, 109, 181, .4);
                box-shadow: inset 0 0 1px 1px rgba(25, 109, 181, .4);
    }

    100% {
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
        -webkit-box-shadow: inset 0 0 1px 1px rgba(25, 109, 181, 0);
                box-shadow: inset 0 0 1px 1px rgba(25, 109, 181, 0);
    }
}

@keyframes cd-pulse-read {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        -webkit-box-shadow: inset 0 0 1px 1px rgba(25, 109, 181, .8);
                box-shadow: inset 0 0 1px 1px rgba(25, 109, 181, .8);
    }

    50% {
        -webkit-box-shadow: inset 0 0 1px 1px rgba(25, 109, 181, .4);
                box-shadow: inset 0 0 1px 1px rgba(25, 109, 181, .4);
    }

    100% {
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
        -webkit-box-shadow: inset 0 0 1px 1px rgba(25, 109, 181, 0);
                box-shadow: inset 0 0 1px 1px rgba(25, 109, 181, 0);
    }
}

[Darkness_demoN]

Thanx for info and fast respond