How may I make circular thumbnails using the paperclip gem? - css

The new Basecamp is doing it, as it can be seen in this link. I wonder how can achieve this in my rails 3 application.


See this forum post on using masks with Imagemagick to get a circle effect.
However, realize that in the "new basecamp" with the "circular avatars," they use simple css, not image processing. Take a look at the properties border-radius, -moz-border-radius, -webkit-border-radius, and -khtml-border-radius.
To do this with CSS, take a look at this gist or this blog post.


I have no experience using Rails, but from what I have read here, it looks like Paperclip is using Imagemagick as its backend. So you will need to use masking with Imagemagick.
Edit: You can follow this example and adjust the values for the circle radius:
http://loo.no/2009/08/09/rounded-corners-with-paperclip

Related

What is the simplest way of creating semi-transparent images

I'm trying to create a game that uses buttons (and text areas) that are semi-transparent (Alpha of about 60%). I can do almost everything I want in XHTML and CSS, except for these semi-transparent items. So I'm looking for the easiest way of creating semi-transparent images on my web pages.
Ideas so far:
Create PNGs with semi-transparent pixels. This is supposed to be possible, and there are well-defined interfaces for defining an Alpha channel using PHP and the GD package. Problem: I tried this, but the images were opaque in all the browsers I tried (Chrome, IE8, FF).
Do it in Flash. I know how to use Flash(*) from some work I did before I retired. Problem: Flash is priced for the professional developer, not the hobbyist.
(*) Well, Flash 8. But as I understand it, even with newer versions I can continue to create movie clips the old way, they just get translated into a bunch of AS. And it's supposedly possible to continue using AS2, although you can't mix AS2 and AS3.
Do it in Flex. Problem: interfaces best described as arcane. Even using suggestions from experienced Flex developers, trying to include code from another mxml file (other than as a class) was a PITA.
Use SVG. This looked promising. The SVG syntax is basically XML, the element tags are reasonably obvious, and the interaction of attributes only slightly arcane, and there are plenty of examples in the tutorial. But... about half of current browsers will not support using SVG in an <img> tag. You have to use <embed> That means you can't put it inside an <a> or <button>. Even using embed, I got what look like "broken image" icons in IE8.
As I'm writing this, I notice several items under "similar questions" that look promising. But when I look at them, they use attributes that are not mentioned in the CSS spec: opacity, filter:alpha, and rgba. When working in a complex language, I really prefer to have the complete language spec open in another window, or to have the equivalent dead-trees version (e.g., the O'Reilly salmon book Cascading Style Sheets, The Definitive Guide, which sits on a bookshelf next to my desk.
So I'm asking for recommendations. If the consensus is to use SVG, I'll post my code and see if people can tell me what I'm doing wrong.

The CSS "opacity" property is perfectly valid. It is part of CSS3, and is supported in all browsers (*).
http://caniuse.com/css-opacity
Or you can use semi-transparent PNGs, as Alvaro demonstrated. They should work just fine. Not sure what happened with your attempts, but you must have done something wrong.
Note for versions of IE <= 8, you need to use the "filter" property instead.
https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

I don't know what problem you have with PNG's. Imo the best and easiest option by far. And they look as they should in all browsers from my own experience.
check this out: http://jsfiddle.net/BDLYG/
(and here a code I need to add)

If you have most users with the 'modern' browsers, I would say go with SVG. If you do, post here, and I'll be glad to help.

Many thanks for all the useful answers. I'm currently using a combination of CSS and PNGs (generated via PHP). I could have gotten along with just CSS, but I decided I wanted to change the opacity of the background when the user hovers over the button -- but keep the text opaque. It's easy to change the opacity of the whole thing, but (as far as I can tell) not of just the background.
I also experimented with SVG, and it also works fine, but it requires extra computation so I chose the simpler (for me) approach of CSS and PHP. I'm already comfortable with those two languages, just needed to be introduced to the newer stuff in CSS3 and the one extra function call needed to make alpha work in PNGs generated by the PHP GD package.

How to animate swapping grid positions in css3?

I was looking at https://stackexchange.com/sites where clicking on an image swaps with another seemingly random image, and it looks like a really cool effect, and was trying to figure out how it was implemented - is it some sort of plugin? Also not sure if there is a proper name for this effect - if so, what it is?

They are using a jquery plugin called isotope: http://isotope.metafizzy.co/

for similar effects http://stackexchange.com/sites
you can find from here: http://packery.metafizzy.co/

Clearing pixels of font path in HTML <canvas>

I would like to know how I can create a colored canvas but with transparent parts with the font. I want the font to create a hole in this canvas. Is this possible and how ? My goal is to create the impression that an image is embbed in a font...
Thank you :)

<canvas> offers something called composite operations for cut off and such effects. I believe the operation you want is called destination out:
https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html
And here is some more technical details in the spec:
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#compositing
I cannot provide you an actual working code (your use case is pretty rare), but you should be able find a globalComposite tutorials and with little playing with their code you can find out how to apply the operation for your case.

background-position technique for 'single-sprite-background-images'

What is a good 'image spriting' tool to turn single images into one big sprite with different background-position?
I know about http://spriteme.org/ but it doesn't seem to produce a result as nice as:
goDaddy's or Behance's
I've been doing it by hand for small hovers and icons but doing the entire website would take a while to hand-code all the background-position properties.
Thanks

You can try SASS/COMPASS. Even if you are only using the sprite functionality (called sprite mixin) it is worth using it. There are some nice tutorials like this one.

Where can I find the icon set Github uses?

I'm talking about the icon set that Github uses for their own site design.
Example Page
On this page, near the top right corner, the "Watch" and "Fork" buttons, as well as the buttons next to them have beautiful icons!
Any idea where the full set can be found?
To clarify, I'm just looking for minimalist grey icons of that size and style to be used in web apps.

I am unsure if the icons Github utilizes are under creative commons. However, the icon packages below are used in other popular software packages that might be a fit for your project (e.g. you can always convert to grayscale and resize them using Gimp):
famfamfam icons
fugue icons
mini icons 2 (already grey for you)

They use wireframe mono icons. You can find them here.
http://www.iconfinder.com/search/4/?q=iconset:cc_mono_icon_set

FWIW, I think you can find them here... https://github.com/styleguide/css/7.0

The directories seem from famfamfam... But the other answer already told you that.

Resources