jordi salord @ BLOG

As you may know border-radius can round images using CSS3. But you can enhance this feature putting that image inside a div, which will has overflow: hidden, a fixed size and border-radius instead of image.

What is the gap? This way you will be able to choose which part of image you want to see and round.

Take a look on next code.

HTML, an image of 300×300 pixels:
<div>
<img src="http://www.jordisalord.com/wp-content/uploads/2012/02/qr-jordisalord-300x300.png" alt="Jordi Salord @ Blog" />
</div>

CSS:
<style>
div.img-round {
overflow: hidden;
border-radius: 5px;
box-shadow:-1px 1px 2px #000;
height:280px;
width:280px;
}
div.img-round img {
margin-top:-10px;
margin-left:-10px;
}
</style>

The original image:

The result:

That’s all folks!

What do you think about this technique? Is there any other way to do it?

Enjoy this tip, I’ve recently used this technique to round non-editable images.

Good morning!

Snow remembered me a thing: I really like QR codes.

QR codes can be useful for a lot of things: promoting your URL/Text/Images using a single image, posted or printed anywhere. Ok, it is a little bit geek, but there is no problem with that, isn’t it?

If you want to start using QR Codes for your brand, check this link: http://qrcode.kaywa.com/

[UPDATE]: Thanks to Aigu, I discover another generator that let’s your colorize it!

Here comes a QR Code with a link to my blog:

And another one with full info:

Try this with your website, brand or anything you want to easily promote.

Enjoy!