Fwd: HTML5 / CSS3 overlay property

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|

Fwd: HTML5 / CSS3 overlay property

Brandon Gibbs

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 <[hidden email]>
Date: Sat, Jul 18, 2015 at 9:58 PM
Subject: Re: HTML5 / CSS3 overlay property
To: Brandon Gibbs <[hidden email]>


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 [hidden email]?

Ian


> On Jul 17, 2015, at 6:27 PM, Brandon Gibbs <[hidden email]> 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 <[hidden email]>      http://www.w3.org/People/Jacobs
Tel:                       <a href="tel:%2B1%20718%20260%209447" value="+17182609447">+1 718 260 9447





signature.asc (1K) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: HTML5 / CSS3 overlay property

Sebastian Zartner-3
On 20 July 2015 at 08:02, Brandon Gibbs <[hidden email]> wrote:

>
> 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 <[hidden email]>
> Date: Sat, Jul 18, 2015 at 9:58 PM
> Subject: Re: HTML5 / CSS3 overlay property
> To: Brandon Gibbs <[hidden email]>
>
>
> 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 [hidden email]?
>
> Ian
>
>
>> On Jul 17, 2015, at 6:27 PM, Brandon Gibbs <[hidden email]>
>> 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.
>>

This sounds similar to the suggestion at
https://lists.w3.org/Archives/Public/www-style/2014Dec/0092.html.

Sebastian