[css-images-4] Add two png images to example 33 to the stripes() function #9719
Conversation
|
svgeesus marked as non substantive for IPR from ash-nazg. |
francescorn
force-pushed
the
example-33
branch
from
0828f14 to
711bc58
Compare
There was a problem hiding this comment.
The changes I would make here are:
- Make the stripes much shorter. Roughly 1em tall is enough to get the point across, but takes up less space in the spec, which helps reading continuity.
- Cut the image down to exactly the stripe; don't have extra white padding in it.
- Instead of the dotted border to represent transparent, make the image actually transparent. Maybe write "transparent" in gray in the middle of that area.
- If you want to highlight the bounds of the
stripes()function rendering, give the IMG solid currentColor borders on the left and right sides in CSS. Doing it on the sides emphasizes the 1-dimensionality, and keeping it external to the image file makes it a) easier to change up this annotation effect and b) structurally communicates the distinction between the effect ofstripes()and the annotation.
…function. I resized each of the images to 1em.
…function. I resized each of the images to 1em.
…function. I resized each of image to 1em, and added a border on the left and also on the right in the second example in transparent.
…function. I resized each of image to 1em, and added a border on the left and also on the right in the second example in transparent.
…function. I resized each of image to 1em, and added a border on the left and also on the right in the second example in transparent.
…function. I resized each of image to 1em, and added a border on the left and also on the right in the second example in transparent.
…function. I resized each of image to 1em, and added a border on the left and also on the right in the second example in transparent.
…function. I resized each of image to 1em, and added a border on the left and also on the right in the second example in transparent.
There was a problem hiding this comment.
Thank you for adding the images! Those illustrations make it easier to understand the outcome of the stripes() function.
I don't know if @fantasai's last point of adding borders actually helps understanding the output or leads to confusion, as they might be interpreted as part of the images. Though I also have a few notes, which I added as inline comments.
Sebastian
| after subtracting blue's 100px from the 400px total. | ||
|
|
||
|
|
||
| <img src="images/stripes-example-33-1.png" style="height:1em; width:400px;" alt="example 1"> |
There was a problem hiding this comment.
Maybe use and SVG instead of a PNG?
Please also avoid the example number in the name and just call it "stripes1", as the example number may change when other examples are added.
And if you want to provide an alternative text ‒ which is probably not needed as the output is already explained above the image ‒ it should provide a proper description of the image (see also https://www.w3.org/WAI/tutorials/images/tips/). So something like that:
"Horizontal line with a total width of 400 pixels showing the output of 'stripes(red 1fr, green 2fr, blue 100px)'. The left-most part is a red stripe of 100 pixels length, followed by a green stripe of 200 pixels, and a blue stripe of 100 pixels.".
| dictated by the <<flex>> values. | ||
|
|
||
|
|
||
| <img src="images/example33-2.png" style="height: 1em; width:400px;" alt="example 2"> |
There was a problem hiding this comment.
Like above, maybe better an SVG than a PNG.
Simply name it "stripes2" to avoid numbering issues when other example images are added.
And if you want it add an alternative text, here's an example description:
"Horizontal line with a total width of 400 pixels showing the output of 'stripes(red .1fr, green .2fr, blue 100px)'. The left-most part is a red stripe of 30 pixels length, followed by a green stripe of 60 pixels, a blue one of 100 pixels and a transparent stripe of 210 pixels.".
|
Ha! @fantasai was faster in merging this than I with my review. 😄 Though maybe that could be done as a follow-up. Sebastian |
4 participants
I also added two png files to the images folder.