Emulating a transparency effect for a display element

#Transparency is the effect created when a display element, such as a color block, text or image, is desaturated so that the color is diluted, thereby causing content behind the display element to show through. Transparency is a common desire in user interface design. It may be used to create visual interest, to contrast elements, to create depth, etc. While supported in a desktop environment, transparency is difficult to achieve in a web context, especially for display elements that are non-overlapping with other display elements.

#This Summary is provided to introduce a selection of concepts in a simplified form that are further described below in the Detailed Description. This Summary is not intended to identify key features or essential features of the claimed subject matter, nor is it intended to be used to limit the scope of the claimed subject matter.

#Methods, systems, apparatuses, and computer-readable storage mediums described herein are directed to emulating a semi-transparent effect with respect to a display element rendered via a graphical user interface (GUI). The semi-transparent effect may be generated based on a sampling of pixel values of another display element that is non-overlapping with the display element. For instance, pixel values of a portion of the other display element that is adjacent to an edge of the display element may be determined. Using the determined pixel values, a visualization scheme is generated that emulates a visual effect (e.g., a color gradient that emulates a blur effect). The determined visualization scheme is then applied to the display element. This causes the display element to appear semi-transparent such that the colors of the other display element appear to be behind the display element, thereby creating an effect that the display element is overlaid on top of the other display element.

#The accompanying drawings, which are incorporated herein and form a part of the specification, illustrate embodiments of the present application and, together with the description, further serve to explain the principles of the embodiments and to enable a person skilled in the pertinent art to make and use the embodiments.

#FIG. 1 shows a block diagram of a system for emulating semi-transparency for a display element in accordance with an example embodiment.

#FIG. 2A depicts an example graphical user interface (GUI) screen comprising a browser window in accordance with an example embodiment.

#The features and advantages of the embodiments described herein will become more apparent from the detailed description set forth below when taken in conjunction with the drawings, in which like reference characters identify corresponding elements throughout. In the drawings, like reference numbers generally indicate identical, functionally similar, and/or structurally similar elements. The drawing in which an element first appears is indicated by the leftmost digit(s) in the corresponding reference number.

#The following detailed description discloses numerous example embodiments. The scope of the present patent application is not limited to the disclosed embodiments, but also encompasses combinations of the disclosed embodiments, as well as modifications to the disclosed embodiments.

#References in the specification to “one embodiment,” “an embodiment,” “an example embodiment,” etc., indicate that the embodiment described may include a particular feature, structure, or characteristic, but every embodiment may not necessarily include the particular feature, structure, or characteristic. Moreover, such phrases are not necessarily referring to the same embodiment. Further, when a particular feature, structure, or characteristic is described in connection with an embodiment, it is submitted that it is within the knowledge of one skilled in the art to effect such feature, structure, or characteristic in connection with other embodiments whether or not explicitly described.