Grow your CSS skills. Land your dream job.

Crop Images Like This?

  • # December 5, 2012 at 12:26 pm

    Does anyone know if it’s possible to crop images like this in CSS without using an application like photoshop every single time?

    Almost like a mask, where I can drop my images in and it sections off part of the image like a tooltip.

    # December 5, 2012 at 12:29 pm

    Is this going to be a background image or just sitting inside a div?

    It depends on what you are trying to achieve and why?

    Frankly the answer is, I think, not with pure CSS although I think Webkit supports (supported?) image masks

    http://css-tricks.com/webkit-image-wipes/

    # December 5, 2012 at 12:46 pm

    I need it to be an image, possibly inside a div. Not keen on image masks, wondered if there was another way around this.

    # December 5, 2012 at 1:29 pm

    Will the background (the black area, in your image) always be a solid color?

    # December 5, 2012 at 6:02 pm

    @instantMash Not really. Using multiple background images behind that image.

    # December 5, 2012 at 6:41 pm

    Then I think you’re SOL

    # December 6, 2012 at 4:35 pm

    So in regards to webkit masks, is there a way to create webkit masks purely of CSS, no images? As that shape’s pretty basic.

    # December 6, 2012 at 4:51 pm

    Nope…not AFAIK

    # December 7, 2012 at 3:14 am

    No. The best way would probably be a PNG.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".