Real rounding of corners of pictures on the client
So much has already been said about the rounding of corners in the html layout that I understand those who read the headline will smile ironically and think "again 25, well, how much can ...". Therefore, I will try to briefly outline the essence, and I will immediately warn you that you could hardly see this method before.
In short, the task was not to imitate the rounding of corners under a certain background and with a certain frame, but to realize the actual rounding of the image corners, regardless of the background and image size, with the ability to set any frame and rounding radius. Of course, this should work in all browsers, including IE6.
Well, the task at first glance is simply unrealistic and for a very long time I did not even try to solve it, each time cutting corners of a certain radius under a certain background and superimposing them on top of the picture. But once I decided to seriously take up this issue with all persistence and all my knowledge in the field of typesetting.
')
I started by saying that “honestly” rounding a rectangular image, poking out the corners, can only the CSS3 border-radius property, until we forget that it is not supported in IE6-8.
And so, we take a picture of unknown size and apply border-radius to it:
HTML:
CSS:
We get:
Not at all what is necessary, the frame lives its own life, its image. Let's try differently, put the picture on the background of the inline-block element, but have to set the size of the picture.
HTML:
CSS is the same.
We get:
Already better, the rounding works, but I don’t want to specify the dimensions, so we insert the same image inside our inline-block element without specifying the sizes and hide it through visibility: hidden; this way it will burst our block with the background to the right size.
HTML:
CSS:
At first glance, it is ugly to duplicate the path to the picture, but I think it is worth it, especially since this element is universal, it can be easily taken out as a separate control / helper in your project and the code will become beautiful.
Everything is simple. There is a very powerful CSS3 Pie library that implements many CSS3 properties for IE6-8 on VML, including border-radius, it is incredibly simple and weighs only 28kb. All we need is to add a line to the CSS:
IE6 easily copes with this and does not slow down even if there are more than 10 such elements on a page. And the main thing is that adding VML objects does not affect the clickability of the picture. For example, we can make it a link by simply replacing the div with a:
HTML:
As a result, we got what we wanted, the element remains inline as a regular image, does not need to specify the size of the image itself will take as much space as needed, we can flexibly change the corner radius, set or not set a frame of any size and color through CSS, and most importantly not think about what kind of background the picture lays, and also, attention (!), you can set a shadow through the box-shadow that will also work in IE6 ++!
The final example , ( Mirror1 )
Cross-browser compatibility: IE6 ++ and all modern versions of FF, Opera, Chrome, Safari.
This component is ideal for those who make up independent blocks , adding it to your set, you greatly simplify your life.
I will be glad to answer any of your questions, colleagues.
Task
In short, the task was not to imitate the rounding of corners under a certain background and with a certain frame, but to realize the actual rounding of the image corners, regardless of the background and image size, with the ability to set any frame and rounding radius. Of course, this should work in all browsers, including IE6.
Decision process
Well, the task at first glance is simply unrealistic and for a very long time I did not even try to solve it, each time cutting corners of a certain radius under a certain background and superimposing them on top of the picture. But once I decided to seriously take up this issue with all persistence and all my knowledge in the field of typesetting.
')
I started by saying that “honestly” rounding a rectangular image, poking out the corners, can only the CSS3 border-radius property, until we forget that it is not supported in IE6-8.
And so, we take a picture of unknown size and apply border-radius to it:
HTML:
< img class ="b-img-radius" src ="i/tmp/1.jpg" />
* This source code was highlighted with Source Code Highlighter .CSS:
/* IMG radius */
.b-img-radius {
border: 1px solid #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
/* ----------- */
* This source code was highlighted with Source Code Highlighter .We get:
Not at all what is necessary, the frame lives its own life, its image. Let's try differently, put the picture on the background of the inline-block element, but have to set the size of the picture.
HTML:
< div class ="b-img-radius" style ="background: url(i/tmp/1.jpg); width: 250px; height: 167px" ></ div >
* This source code was highlighted with Source Code Highlighter .CSS is the same.
We get:
Already better, the rounding works, but I don’t want to specify the dimensions, so we insert the same image inside our inline-block element without specifying the sizes and hide it through visibility: hidden; this way it will burst our block with the background to the right size.
HTML:
< div class ="b-img-radius" style ="background: url(i/tmp/1.jpg)" >< img src ="i/tmp/1.jpg" /></ div >
* This source code was highlighted with Source Code Highlighter .CSS:
/* IMG radius */
.b-img-radius {
zoom: 1;
position: relative;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
display: inline-block;
vertical-align: top;
}
.b-img-radius img {
display: block;
visibility: hidden;
}
/* ----------- */
* This source code was highlighted with Source Code Highlighter .At first glance, it is ugly to duplicate the path to the picture, but I think it is worth it, especially since this element is universal, it can be easily taken out as a separate control / helper in your project and the code will become beautiful.
And what about IE?
Everything is simple. There is a very powerful CSS3 Pie library that implements many CSS3 properties for IE6-8 on VML, including border-radius, it is incredibly simple and weighs only 28kb. All we need is to add a line to the CSS:
/* IMG radius */
.b-img-radius {
.......
behavior: url(css/PIE.htc);
}
* This source code was highlighted with Source Code Highlighter .IE6 easily copes with this and does not slow down even if there are more than 10 such elements on a page. And the main thing is that adding VML objects does not affect the clickability of the picture. For example, we can make it a link by simply replacing the div with a:
HTML:
< a href ="#" class ="b-img-radius" style ="background: url(i/tmp/1.jpg); width: 250px; height: 167px" >< img src ="i/tmp/1.jpg" /></ a >
* This source code was highlighted with Source Code Highlighter .Total
As a result, we got what we wanted, the element remains inline as a regular image, does not need to specify the size of the image itself will take as much space as needed, we can flexibly change the corner radius, set or not set a frame of any size and color through CSS, and most importantly not think about what kind of background the picture lays, and also, attention (!), you can set a shadow through the box-shadow that will also work in IE6 ++!
The final example , ( Mirror1 )
Cross-browser compatibility: IE6 ++ and all modern versions of FF, Opera, Chrome, Safari.
This component is ideal for those who make up independent blocks , adding it to your set, you greatly simplify your life.
I will be glad to answer any of your questions, colleagues.
Source: https://habr.com/ru/post/107093/
All Articles