All posts tagged “‘avatars’”

Intel Pocket Avatars Make You a Cartoon: Real-time facial recognition software that lets you record and share animations from your phone

Intel Pocket Avatars Make You a Cartoon

Intel Pocket Avatars is a new app just released on iOS and Android that might be more cutesy than our usual interest, but the technology behind it is very impressive. In…

Continue Reading…

Cool Hunting

Masters of CG: Avatar’s Jon Landau on the future of 3D

Read more about Masters of CG: Avatar’s Jon Landau on the future of 3D at

This article is brought to you in association with Masters of CG, a new competition that offers the chance to work with one of 2000AD’s most iconic characters. There are big prizes to be won, so enter today!

Creative Bloq

The New Vibrant Avatars from Flickr

If you have’t already noticed, Flickr has recently underwent a major redesign. Among other things such as a terabyte of disk space and a new and inspired user interface, Flickr has also recreated one of those tiny details that are generally forgotten or dismissed by others – we are of course talking about the often ignored avatar.

With the new design, Flickr ‘retired’ their old ‘Howdy’ avatar, and commissioned visual designer Charis Tsevis to create a series of vibrant avatars that would reflect the Flickr community and product.

The attention to detail from Charis is phenomenal, just have a look at these:

Retro Camera

Retro Camera - Flickr Avatar

Twin-Lens Reflex Camera

Twin-Lens Reflex Camera - Flickr Avatar

Olympus-like DSLR Modern Camera

Olympus DSLR Modern Camera - Flickr Avatar

Smart Phone

Smart Phone - Flickr Avatar


Polaroid - Flickr Avatar

Canon-like DSLR Camera

 - Flickr Avatar

Nikon DSLR Camera

Nikon DSLR Camera - Flickr Avatar

Medium Format Camera (like the Hasselblad)

Medium Format Camera - Flickr Avatar

Fujifilm Point n’ Shoot

Fujifilm Point n' Shoot - Flickr Avatar

Leica Light Point n’ Shoot

Leica Light Point n' Shoot - Flickr Avatar

Sony Point n’ Shoot Camera

Sony Point n' Shoot Camera - Flickr Avatar

Nikon Compact SLR camera

 - Flickr Avatar

The Avatar Collection

The Avatar Collection - Flickr Avatar

You might also like…

Speckyboy Design Magazine

Create Shaped Avatars With CSS and Webkit


In case you haven’t noticed, square avatars are so 2010. These days circles are all the rage. Every app worth its salt, from Path to Basecamp, is jumping on board this fad and waving goodbye to the squares who are stuck in the past.

Ever the forward thinker, I asked myself, “what’s next?” Let’s look beyond squares and circles and into the future of the avatar! Using CSS and Webkit, we can use pretty much any shape as the mask for an avatar. Let’s see how.

Warning: Webkit Only

Today’s project is merely a fun look forward at a design trend that you’ll no doubt see pop up as CSS masking improves in the future. For now, Webkit is really the only browser that’s equipped enough to pull off such crazy feats, so you’ll have to wait a while to put these effects into practice in production.

Method 1: Webkit Masks

The first method that we’re going to use is pretty straightforward. It utilizes the webkit-mask-image property to use one image as the mask for another.

Grab Two Images


To begin, you need two images. The first image is the profile photo. This can be whatever you want, but as a general tip for odd-shaped avatars, try making sure you have plenty of head room. If you use a photo that’s too tightly cropped around your face, you’ll end up with a strange clip where parts of your face are chopped off.


Once you have the avatar picked out, it’s time to build your mask. You can do this with just about any image editor (Photoshop, Illustrator, etc.). Simply draw out the shape that you’d like to use as a mask, then save it with a transparent background as either a PNG or SVG.


Keep in mind that things will go smoother if your photo and mask are as close in size as possible. Otherwise, you could end up with a weird result that requires a lot of tweaking.


Implementing the CSS mask method is crazy easy. For the HTML, you don’t need anything special, just throw in an image:

<!-- just a plain old image tag -->
<img src="josh.jpg">

You don’t really need anything more than the code above, but if you want a unique style hook, just toss the image into a div.

<div class="avatar">
  <img src="josh3.jpg">


Now all we have to do is target that image in our CSS and use the -webkit-mask-image property and point to the mask PNG that we created in the previous step.

.avatar img {
  -webkit-mask-image: url(avatarmask.png);


That’s all there is to it! Check out the live demo below.
Demo: Click here to launch demo.


We can get as complicated as we want with that mask. For instance, you could carve a name or word into it:


Hold the Phone

In this example, we’re using a transparent PNG to create a mask for a JPG. This seems a little weird doesn’t it? Wouldn’t it be a lot easier just to make one transparent PNG of the shaped avatar in the first place?

In a word, yes. The idea here is that you’ll create a low maintenance way to trim a whole bunch of avatars. Imagine that you have users upload their own images to a profile, instead of writing a bunch of code that attempts to trim that photo to the shape you want it to be, you can merely upload a single mask image and apply it to all of the avatars across the site with a quick line of CSS.

Pros and Cons

The benefit that this method has over what we’re going to try next is that it looks pretty good on non-webkit browsers. The avatar shows up just fine, it’s simply not masked. Given that the mask is just a little extra visual fluff, this isn’t a huge deal.

The downside, aside from the Webkit only aspect, is that it takes a bit of setup getting the various image and mask files in order.

Method 2: Background-Clip Text

Now that we’ve seen the safe route, let’s use a completely different and more experimental tactic to achieve a similar effect. This time we’re going to use text to generate the mask shapes, then clip our images to the text.

Grab a Photo and an Icon

To begin, follow the instructions above for choosing a good avatar photo, then find an icon that you’d like to use for the mask. There are lots of free icon fonts that would work great with this technique. Alternatively, you could simply grab a standard HTML symbol, which is what I’ll be doing today.

Check out CopyPasteCharacter for a huge list of potential characters and icons that you can use.



This time around, all we need in our HTML is a piece of text. I’ll use an h4, but you can use anything you want.

<div class="avatars">
  <h4 class="josh">&diams;</h4>
  <h4 class="kelley">&#9733;</h4>
  <h4 class="jk">&hearts;</h4>

Notice that the text here is pretty funky looking. These are the escape codes for a diamond, star and heart.


Now it’s time to style these shapes with the appropriate background image. We can use webkit-background-clip with a value of text to use the contents of our h4 as as mask for the background image that we apply.

h4 {
  color: black;
  font: 260px/1.5 Helvetica, sans-serif;
  float: left;

h4.josh {
  background: url(josh.jpg) -10px 60px no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

h4.kelley {
  background: url(kelley.jpg) 0px 60px no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

h4.jk {
  background: url(jk.jpg) -10px 50px no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

As you can see, we’re setting the background images to not repeat and using positioning values to nudge the images into a spot where the faces are in a good place. This is a bit of a trial and error process, just fiddle with the values until you get something you like.


As you can see in the demo, each escape code generated a different shape, which was then used to mask the image that we placed behind it.

Demo: Click here to launch demo.


Pros and Cons

Given that icons are so versatile, it’s really easy to pull of a lot of different shapes using this method. It’s arguably even easier to set up than the previous method and is primed for variation.

That being said, non-Webkit browsers really destroy this one. Chris Coyier has a suggestion for using background-clip with Modernizr for an acceptable fallback, but it merely shows the text without the image, which isn’t the best option for avatars.


In the next few years, we can likely expect to see web apps increase the variation of avatar shapes. Unfortunately, for the time being, CSS isn’t really the best way to go about achieving this effect.

If you are intent on moving forward with something like this though, my suggestion would be to use Webkit masks, simply because everything should still look decent if and when they fail on other browsers.

Design Shack

Of mice and men: how animal ‘avatars’ could hold the key to personalized cancer treatment

Mouse injection (NYT)

The New York Times has published an intriguing profile of Champions Oncology, a company using so-called mouse ‘avatars’ to replicate the immune systems of cancer patients. Researchers at the New Jersey-based organization take tumors that have been freshly extracted from patients and slice them up for insertion into specially-bred mice, letting the cells grow inside the animals until they have a sufficient number to conduct a study. They then test various cocktails of drugs on the mice, using the results to determine which could work best on the human patient. The treatment isn’t cheap — a study of four different drugs for a 9-year-old Ewing’s sarcoma sufferer earlier this year cost $ 25,500 — and there is, as yet, no cast-iron…

Continue reading…

The Verge – All Posts