Fwd: HTML5 / CSS3 overlay property

Hi,

   I sent a suggestion for a CSS property that could make for a better
workflow given the enormous popularity of websites that are already using a
workaround to achieve a particular effect. The overlay.

   Below you'll see that I was pointed in your direction, as well as a
detailed explanation of how I feel it would best work.

   Thank you so much for taking the time and I hope to hear that it will be
considered as an addition.

- Brandon D Gibbs

---------- Forwarded message ----------
From: Ian Jacobs <ij@w3.org>
Date: Sat, Jul 18, 2015 at 9:58 PM
Subject: Re: HTML5 / CSS3 overlay property
To: Brandon Gibbs <gibbs.brandon.d@gmail.com>


Hi Brandon,

Thank you for taking the time to write up your suggestion. Unfortunately,
I’m not the best person to receive it. Have you considered
sharing it with the CSS WG (e.g., on www-style@w3.org?

Ian


> On Jul 17, 2015, at 6:27 PM, Brandon Gibbs <gibbs.brandon.d@gmail.com>
wrote:
>
> Hello,
>
>    I know you and the rest of the staff probably get 100 emails a day
regarding things like this, but I just couldn't sit quiet on this. I know
that everyone thinks that they have the next great idea to improve the
entire internet. I'm not claiming that, but I do have something at would
incredibly improve workflow in one area.
>
>     Look at the popularity of Twitter's Bootstrap. That only added to the
need for this workflow idea. Well, not just workflow...
>
>     There is an abundance of websites that utilize sliders, "jumbotrons",
and image galleries, and blog lists that utilize a photo with text overlay.
This presents a few options for improved flow and, I believe, slightly
improved site performance.
>
>     An "overlay" element added to the HTML side... and/or an overlay:
property added to the CSS side.
>
>     My imagination of this functioning would be to quickly and easily add
an overlay. On the CSS side, this could be used in the same div that adds a
background image...
>
>     .jumbotron {
>        background: url('../img/cover-photo.png')
>        background-size: cover;
>        overlay:
>        overlay-size: override the auto covering of the div
>        overlay-position: just like the background-position property
>      }
>
>    Now the overlay: could be used a shortcut. Hexidecimal color, opacity,
rgba, image via url() much like the background-image property.
>
>    Overlay-size:  Again, my imagining of this would have the property
automatically cover the div to which it is being added. This part of the
property would of course override that, allowing for flexibility. If the
user did not want to cover an entire div, img, etc...
>
>     Overlay-position:  As stated above, this is just like the
background-position property.
>
>     Now, if there was an HTML element added to this, I'm thinking it
would behave much like any other <div> in a way. So, if placing text
between <overlay> and </overlay> would have it show over the image and any
overlay properties added like an overlay image, color, etc...
>
>     The HTML element might seem a bit overkill, and even not much of an
improvement over just using the <div> element as we do now... and in most
cases it might be. Consider that <overlay> would be of some importance,
making them a bit like heading tags.
>
>       Of course, there is probably room for improvement, tweaking and
shifting to make it fit with what the vision is for CSS3 and beyond.
However, it would fill a need. You can easily search and find several
websites, including stackoverflow, that are using workarounds. I feel that
workarounds such as this add unnecessary time to the development process,
and a, negative effect on site performance if the workaround is used often,
which is the case for a good deal of photography sites, blogs, and much
more.
>
> Thank you for your time, and entertaining this thought.
>
> - Brandon D. Gibbs
>

--
Ian Jacobs <ij@w3.org>      http://www.w3.org/People/Jacobs
Tel:                       +1 718 260 9447