CSS: Clip for Crop
When designing a website, I always try to delegate as much work to css as possible, as it's much more light weight than modifying styling using JavaScript.
When polishing up my [portfolio site]http://www.dougteixeira.com), I decided to switch from a rectangular avatar to a circular avatar (which I think looks more sleek).
My choices are: *crop the image file itself (using pixlr.com/editor), but that's way less versatile and I can't apply the crop effect to other images without editing the image file. * Use CSS to crop the image using the clip property.
Syntax
Example:
.example-element { clip: rect(); position: absolute; overflow: hidden; }
Styling Prerequisite:
In order for the clip property to be applied, your element must be styled with:
position: absolute or position: fixed and NOT with position: relative or position: static. This may be changed in the future, but as for now it remains one of the biggest downsides to the clip property.
Properties: Accepts 3 values:
auto: Default behavior is no clip effect. Same thing as not using clip at all.
inherit: Inherit the clip value from the parent container. a shape function. rect() is the only currently accepted function, but more may exist in the future.
Rect() Syntax:
Requires 4 length values, separated by commas starting from the top and continuing clockwise, similar to padding and margins.
Ex:
.example-element { clip: rect(top, right, bottom, left); }
top & bottom: define offset from top border.
left & right: define offset from left border.













