So I was looking around and trying to learn how to do some stuff on css but apparently I just don't gasp the concept of everything.
So here's what I thought.
I took the Online Status Glow and attempted to put it on the New post icons.
So I thought I could just Frankenstein some code.
and simply changing the ".b-icon__status--green:after {" to ".icon.new {"
Then I started looking around and scanning, trying everything hoping I could do this and it would be an easy fix. WRONG! I actually thought it was impossible, then I saw a post on these forums that linked me to someone's site, curious enough I clicked on it... The site had the Online status Glow effect on his new post icons. So I continued and still continue to beat my face off my keyboard trying to figure it out.
Mind helpin' me out?
EDIT:
well... I got it to show up... but it's not where it should be.
SMH, not quite what I wanted...
So changing .b-icon__status--green:after to the below results in the image...
So here's what I thought.
I took the Online Status Glow and attempted to put it on the New post icons.
So I thought I could just Frankenstein some code.
Code:
.b-icon__status--green:after { content: ''; border: 10px solid #6e9d00; /* green, change as needed */ background: transparent; border-radius: 40px; height: 40px; width: 40px; position: absolute; top: -24px; /* you may have to tweak this if you move it from the default position */ left: -22px; /* you may have to tweak this if you move it from the default position */ z-index: 1; opacity: 0; -webkit-animation: glow 3s ease-out infinite; animation: glow 3s ease-out infinite; }
Then I started looking around and scanning, trying everything hoping I could do this and it would be an easy fix. WRONG! I actually thought it was impossible, then I saw a post on these forums that linked me to someone's site, curious enough I clicked on it... The site had the Online status Glow effect on his new post icons. So I continued and still continue to beat my face off my keyboard trying to figure it out.
Mind helpin' me out?
EDIT:
well... I got it to show up... but it's not where it should be.
SMH, not quite what I wanted...
So changing .b-icon__status--green:after to the below results in the image...
Code:
.icon.new { content: ''; border: 10px solid #6e9d00; /* green, change as needed */ background: transparent; border-radius: 40px; height: 40px; width: 40px; position: absolute; top: -24px; /* you may have to tweak this if you move it from the default position */ left: -22px; /* you may have to tweak this if you move it from the default position */ z-index: 1; opacity: 0; -webkit-animation: glow 3s ease-out infinite; animation: glow 3s ease-out infinite; } @-webkit-keyframes glow { 0% { -webkit-transform: scale(0); opacity: 0.0; } 25% { -webkit-transform: scale(0); opacity: 0.1; } 50% { -webkit-transform: scale(0.1); opacity: 0.3; } }
Comment