We make beautifully "broken" pictures
I bring to your attention a free translation of the article " Styling Broken Images " from the site bitsofco.de.
“Broken” pictures look awful.
')
But they don't always have to look that way. We can easily apply CSS to an img element (tag) to improve its appearance - to make it much more attractive than what it looks like by default.
If you are bored with default notifications about "broken" pictures, you are welcome under cat.
First of all, before you start styling our “broken” pictures, we need to learn 2 important points in order to understand how the img element behaves:
1. We can apply styles that affect the typography of the text of the img element . Such styles will be applied to the alternative text if the picture turns out to be “bat” and will not be applied to the normal, working picture.
2. The img element is a " replaceable element " . This is an element whose appearance on the page and its proportions are determined by an external source (resource). And since the element is controlled by an external source, the pseudo-elements : before and : after should not work. However, when the picture is “bat” and does not load, only in this case these pseudo-elements will be displayed.
Based on the above, we can conclude that we can apply styles to the “broken” picture, and they will work when the image does not load, but will not work when our image is properly loaded on the page.
Using the knowledge gained by us, let's analyze a few examples and see clearly how we can stylize “broken” “pictures, using the following“ broken ”link:
The first way we can handle broken images is to show the user a message that the picture is “broken”. Using the expression attr () , we can even specify a link to a “broken” image.
The first example is an alternative. We can use pseudo-elements to replace the original source text by placing these keyword elements on top of the source text, overlapping it.
In addition to showing the usual message (or instead of it), we can also use pseudo-elements to even more styled “broken” pictures.
If the picture is not “broken”, and all the above-described styles are applied to it, then such a picture will appear normally, without any changes. Not a single pseudo-element will appear until the picture “breaks down”.
Unfortunately, not all browsers treat "broken" images in the same way. In some browsers, even if the image is not shown, pseudo-elements do not appear at all.
Here is what was revealed after the compatibility tests:
* Alternate text will appear only if the width of the image is of sufficient size to fit it. If the width of the picture is not specified, alternative text may not appear at all.
** Text styles are not applied.
For those browsers that do not support the use of pseudo-elements, the display of the described styles will be ignored. But you should not refuse from such "chips" at all. We can still apply these styles and do really cool things that users of those browsers that support these styles will see.
“Broken” pictures look awful.
')
But they don't always have to look that way. We can easily apply CSS to an img element (tag) to improve its appearance - to make it much more attractive than what it looks like by default.
If you are bored with default notifications about "broken" pictures, you are welcome under cat.
Two interesting facts about the element img
First of all, before you start styling our “broken” pictures, we need to learn 2 important points in order to understand how the img element behaves:
1. We can apply styles that affect the typography of the text of the img element . Such styles will be applied to the alternative text if the picture turns out to be “bat” and will not be applied to the normal, working picture.
2. The img element is a " replaceable element " . This is an element whose appearance on the page and its proportions are determined by an external source (resource). And since the element is controlled by an external source, the pseudo-elements : before and : after should not work. However, when the picture is “bat” and does not load, only in this case these pseudo-elements will be displayed.
Based on the above, we can conclude that we can apply styles to the “broken” picture, and they will work when the image does not load, but will not work when our image is properly loaded on the page.
Let's move from words to deeds
Using the knowledge gained by us, let's analyze a few examples and see clearly how we can stylize “broken” “pictures, using the following“ broken ”link:
<img src="http://kremlin.ru/bitiy_vladimir.jpg" alt=" ."> Add useful information
The first way we can handle broken images is to show the user a message that the picture is “broken”. Using the expression attr () , we can even specify a link to a “broken” image.
img { font-family: 'Helvetica'; font-weight: 300; line-height: 2; text-align: center; width: 100%; height: auto; display: block; position: relative; } img:before { content: " , «» :("; display: block; margin-bottom: 10px; } img:after { content: "(url: " attr(src) ")"; display: block; font-size: 12px; } Stylizing the display of alternative text
The first example is an alternative. We can use pseudo-elements to replace the original source text by placing these keyword elements on top of the source text, overlapping it.
img { /* , */ } img:after { content: "\f1c5" " " attr(alt); font-size: 16px; font-family: FontAwesome; color: rgb(100, 100, 100); display: block; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; } Styling for advanced
In addition to showing the usual message (or instead of it), we can also use pseudo-elements to even more styled “broken” pictures.
img { /* , */ min-height: 50px; } img:before { content: " "; display: block; position: absolute; top: -10px; left: 0; height: calc(100% + 10px); width: 100%; background-color: rgb(230, 230, 230); border: 2px dotted rgb(200, 200, 200); border-radius: 5px; } img:after { content: "\f127" " " attr(alt); display: block; font-size: 16px; font-style: normal; font-family: FontAwesome; color: rgb(100, 100, 100); position: absolute; top: 5px; left: 0; width: 100%; text-align: center; } If the picture is not “broken”, and all the above-described styles are applied to it, then such a picture will appear normally, without any changes. Not a single pseudo-element will appear until the picture “breaks down”.
Browser Compatibility
Unfortunately, not all browsers treat "broken" images in the same way. In some browsers, even if the image is not shown, pseudo-elements do not appear at all.
Here is what was revealed after the compatibility tests:
* Alternate text will appear only if the width of the image is of sufficient size to fit it. If the width of the picture is not specified, alternative text may not appear at all.
** Text styles are not applied.
For those browsers that do not support the use of pseudo-elements, the display of the described styles will be ignored. But you should not refuse from such "chips" at all. We can still apply these styles and do really cool things that users of those browsers that support these styles will see.
Source: https://habr.com/ru/post/279519/
All Articles