News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

Avatar Rounded Corners

Started by Colin, December 23, 2012, 05:48:21 PM

Previous topic - Next topic

Colin

Link to Mod

Avatar Rounded Corners by Colin

Author: Colin

Summary

This modification adds soft edges or rounded corners to all avatars.

"If everybody is thinking alike, then somebody is not thinking." - Gen. George S. Patton Jr.

Colin

Antechinus

That's too verbose on the declarations. All browsers support border-radius without prefixes.

Also, it wont be totally reliable with just that selector. A more bulletproof way of selecting it is .avatar>a>img

That will work regardless of avatar sizing and li sizing. I suggest doing it like this:


.avatar>a>img
{
border-radius: 6px;
}

Colin

Hi Antechinus,

Thanks for taking the time to comment. If my memory serves the older mozilla browsers require -moz, but you are the CSS expert :).

Good point about the .avatar>a>img I will add that.
"If everybody is thinking alike, then somebody is not thinking." - Gen. George S. Patton Jr.

Colin

Antechinus

IIRC Firefox has supported it without a prefix siince FF4, which is a long time back. The 3.x series is no longer beng patched, so nobody should be using it anyway. Basically, any browser worth considering these days will be fine without the prefix. :)

You can always check things on this site if in doubt: http://caniuse.com/#feat=border-radius

Mick.

Not for everyone but if you wanna be cool, circle the avatars too.

If you have your avatars set to 100px by 100px, use half the px in the radius.

Remember to use half the px depending on the width and height of the avatar.


.avatar
{
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;

}


See attachment,

xrunner

Testing now at my forum - looks pretty cool.  :)

Mick.

Heck you can even put a nice shadow too!


box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);



Antechinus

That one can screw up though. Take avatars like my current one. It already has a reflection. If you put a border and box-shadow on it, it'll look like crap.

And again, don't use vendor prefixes for CSS3 properties that don't need prefixes. It triples the amount of css for absolutely no benefit. Keep your code lean. ;)

Mick.

Quote from: Antechinus on December 26, 2012, 11:49:04 PM
That one can screw up though. Take avatars like my current one. It already has a reflection. If you put a border and box-shadow on it, it'll look like crap.

And again, don't use vendor prefixes for CSS3 properties that don't need prefixes. It triples the amount of css for absolutely no benefit. Keep your code lean. ;)
true. ;)

Antechinus

If you're doing custom work and you're not sure which CSS3 properties still need prefixes, and you can't be bothered looking them up, and you don't want to have to write piles of css but you want it all to work, try this: http://leaverou.github.com/prefixfree/#

Very light and clean plugin. Haven't used it myself yet, but the person who coded it knows her stuff and it's getting good feedback.

ETA: Just for the record, offhand I can tell you that border-radius, box-shadow, and text-shadow all seem fine without prefixes. Transitions and gradients are the main problem, among the eye candy.

Some of the structural stuff (like box-sizing) still requires prefixes too.

Colin

Cool stuff. Thanks for that Antechinus. I will give it a try.
"If everybody is thinking alike, then somebody is not thinking." - Gen. George S. Patton Jr.

Colin

Joker™

Quote from: Antechinus on December 26, 2012, 11:55:17 PM
If you're doing custom work and you're not sure which CSS3 properties still need prefixes, and you can't be bothered looking them up, and you don't want to have to write piles of css but you want it all to work, try this: http://leaverou.github.com/prefixfree/#
Great. For sure going to play with it for some time :).

Thanks Ant.
Github Profile
Android apps
Medium

How to enable Post Moderation

"For the wise man looks into space and he knows there is no limited dimensions." - Laozi

All support seeking PM's get microwaved

Hj Ahmad Rasyid Hj Ismail


TheListener

I know this mods topic is rather quiet (too darn quiet IMO) but as an FYI toanyone interested the corners of animated avatars also become rounded.

Colin keep them coming.

:) :)

Colin

"If everybody is thinking alike, then somebody is not thinking." - Gen. George S. Patton Jr.

Colin

BSD2000

How about a simple check box added to a user's profile settings so the users can manually turn on and off the rounded corners?

Just a thought.

Nice mod btw.  :)

TheListener

Quote from: BSD2000 on May 31, 2013, 05:26:42 PM
How about a simple check box added to a user's profile settings so the users can manually turn on and off the rounded corners?

Just a thought.

Nice mod btw.  :)

How many users would know of such setting.

This would imo not be easy to do per individual.

Colin

Quote from: BSD2000 on May 31, 2013, 05:26:42 PM
How about a simple check box added to a user's profile settings so the users can manually turn on and off the rounded corners?

Just a thought.

Nice mod btw.  :)

Thanks, sounds like an interesting idea. I will implement it in the next release.
"If everybody is thinking alike, then somebody is not thinking." - Gen. George S. Patton Jr.

Colin

TheListener

Quote from: Colin on May 31, 2013, 07:50:49 PM
Quote from: BSD2000 on May 31, 2013, 05:26:42 PM
How about a simple check box added to a user's profile settings so the users can manually turn on and off the rounded corners?

Just a thought.

Nice mod btw.  :)

Thanks, sounds like an interesting idea. I will implement it in the next release.

tbh I'd keep it as standard.

How many users are gonna be bothered with the setting?


Colin

I don't think many so there could be a default, but if some didn't want it they could disable it. What do you think?
"If everybody is thinking alike, then somebody is not thinking." - Gen. George S. Patton Jr.

Colin

Advertisement: