Stretching an Image while preserving the corners in HTML5

I want to achieve the effect described in the following question, but using CSS. I remember seeing somewhere that this now can be done with HTML5, but now can’t find the property name.

Stretching an UIImage while preserving the corners

Problem courtesy of: Registered User

Solution

You’ll have to use 3 different images.

First, go into photoshop or Gimp or something and break the arrow image you have into 3 parts. The left side with the curve, and the right side with the arrow part. Save them as 3 different images.

Once you’ve got your images. Create one HTML image element:

In your CSS, apply styling to the before and after pseudo-elements and add the two image bits that you don’t want stretched.

img:before {
    contents: '';
    background: url('img-left.jpg');
    height: 50px;
    width: 20px;
    position: absolute;
    left: -20px;
}

img:after {
    content: '';
    background: url('img-right.jpg');
    height: 50px;
    width: 40px;
    position: absolute;
    right: -40px;
}

Make sure you change the width, height, left and right values to match the width and height of your two image files. This CSS allows these bits of the image to be added on to the left and right sides, no matter how wide the element is stretched. It’s also cool since it’s only one element, so the CSS stays pretty clean except for the requirement of the empty content:”; property.

So then you can stretch your middle image element dynamically. Lets say you want he arrow to stretch, have some jQuery that animates the width of the element, then the middle part will stretch and the corners will stay intact since they’re technically not part of the original element, they’re just appended.

ETA: As for the method described in the objective-C related post, there’s no CSS property that breaks apart images like that unless it’s in some obscure webkit nightly build that I’ve never heard of. Your option here is to break apart the other two sides. You could also combine the left and right portions of your image into a sprite and use the background-position:; CSS property to select bits of the image so that way you’d only have two image file requests, as you want to keep those low to speed up page load time.

Solution courtesy of: alt

Discussion

you can create an element, assign pseudo elements to it for the left and right side caps, and use a CSS3
transition applied to the width property in order to achieve this effect.

i’ve set up a working demo on jsFiddle
to illustrate how it’s done. this demo uses background colors, but one could use images as well (repeating along the X axis for the center element).

check out the HTML5 rocks playground
, you’ll find some fascinating snippets demonstrating the power of CSS3
and HTML5 (naturally) and can use it as a quick reference as well.

Discussion courtesy of: Eliran Malka

This recipe can be found in it’s original form on Stack Over Flow
.

稿源:CSS3 Recipes (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Stretching an Image while preserving the corners in HTML5

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录