Drop shadow

Last updated
A red rectangle casting a drop shadow over a wood-like background Blurshadow.png
A red rectangle casting a drop shadow over a wood-like background

In graphic design and computer graphics, a drop shadow is a visual effect consisting of a drawing element which looks like the shadow of an object, giving the impression that the object is raised above the objects behind it. The drop shadow is often used for elements of a graphical user interface such as windows or menus, and for simple text. The text label for icons on desktops in many desktop environments has a drop shadow, as this effect effectively distinguishes the text from any colored background it may be in front of. [1]

Contents

A simple way of drawing a drop shadow of a rectangular object is to draw a gray or black area underneath and offset from the object. In general, a drop shadow is a copy in black or gray of the object, drawn in a slightly different position. Realism may be increased by:

  1. Darkening the colors of the pixels where the shadow casts instead of making them gray. This can be done with alpha blending the shadow with the area it is cast on.
  2. Softening the edges of the shadow. This can be done by adding Gaussian blur to the shadow's alpha channel before blending.

Inset drop shadows are a type which draws the shadows inside the element. This allows the interface element to appear as if it is sunken into the interface.

Photo editing

In photo editing or photography post-production, a drop shadow may be added right beneath a model or product in the image. It is used to create contrast between the background and the subject. To add a drop shadow, retouchers use graphic editing tools like Adobe Photoshop.

Drop shadows are often used as a visual effect in e-commerce. This is done to improve the presentation of product images and create depth in the image.[ citation needed ]

Use

Stacking window managers draw a window border around the windows, while compositing window managers draw drop shadow around the windows Window border in the compositing and stacking window managers.png
Stacking window managers draw a window border around the windows, while compositing window managers draw drop shadow around the windows

Generally, window managers which are capable of compositing allow drop shadow effects, whereas incapable window managers do not. In some operating systems like macOS, drop shadow is used to differentiate between active and inactive windows.

Websites are able to use drop shadow effects through the CSS properties box-shadow [2] , text-shadow [3] , and drop-shadow() filter function in filter [4] . The first two are used for elements and text respectively, while the filter applies to the element's content, letting it support oddly shaped elements or transparent images.

Related Research Articles

Dynamic HTML, or DHTML, is a term which was used by some browser vendors to describe the combination of HTML, style sheets and client-side scripts that enabled the creation of interactive and animated documents. The application of DHTML was introduced by Microsoft with the release of Internet Explorer 4 in 1997.

Scalable Vector Graphics (SVG) is an XML-based vector image format for defining two-dimensional graphics, having support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium since 1999.

Desktop publishing (DTP) is the creation of documents using dedicated software on a personal ("desktop") computer. It was first used almost exclusively for print publications, but now it also assists in the creation of various forms of online content. Desktop publishing software can generate page layouts and produce text and image content comparable to the simpler forms of traditional typography and printing. This technology allows individuals, businesses, and other organizations to self-publish a wide variety of content, from menus to magazines to books, without the expense of commercial printing.

An HTML editor is a program used for editing HTML, the markup of a web page. Although the HTML markup in a web page can be controlled with any text editor, specialized HTML editors can offer convenience, added functionality, and organisation. For example, many HTML editors handle not only HTML, but also related technologies such as CSS, XML and JavaScript or ECMAScript. In some cases they also manage communication with remote web servers via FTP and WebDAV, and version control systems such as Subversion or Git. Many word processing, graphic design and page layout programs that are not dedicated to web design, such as Microsoft Word or Quark XPress, also have the ability to function as HTML editors.

<span class="mw-page-title-main">Light-on-dark color scheme</span> Type of color scheme

A light-on-dark color scheme, better known as dark mode, dark theme or night mode, is a color scheme that uses light-colored text, icons, and graphical user interface elements on a dark background. It is often discussed in terms of computer user interface design and web design. Many modern websites and operating systems offer the user an optional light-on-dark display mode.

An HTML element is a type of HTML document component, one of several types of HTML nodes. The first used version of HTML was written by Tim Berners-Lee in 1993 and there have since been many versions of HTML. The current de facto standard is governed by the industry group WHATWG and is known as the HTML Living Standard.

In computing, an icon is a pictogram or ideogram displayed on a computer screen in order to help the user navigate a computer system. The icon itself is a quickly comprehensible symbol of a software tool, function, or a data file, accessible on the system and is more like a traffic sign than a detailed illustration of the actual entity it represents. It can serve as an electronic hyperlink or file shortcut to access the program or data. The user can activate an icon using a mouse, pointer, finger, or voice commands. Their placement on the screen, also in relation to other icons, may provide further information to the user about their usage. In activating an icon, the user can move directly into and out of the identified function without knowing anything further about the location or requirements of the file or code.

<span class="mw-page-title-main">Drag and drop</span> Action in computer graphic user interfaces

In computer graphical user interfaces, drag and drop is a pointing device gesture in which the user selects a virtual object by "grabbing" it and dragging it to a different location or onto another virtual object. In general, it can be used to invoke many kinds of actions, or create various types of associations between two abstract objects.

<span class="mw-page-title-main">Aqua (user interface)</span> User interface of macOS by Apple

Aqua is the graphical user interface, design language and visual theme of Apple's macOS and iOS operating systems. It was originally based on the theme of water, with droplet-like components and a liberal use of reflection effects and translucency. Its goal is to "incorporate color, depth, translucence, and complex textures into a visually appealing interface" in macOS applications. At its introduction, Steve Jobs noted that "... it's liquid, one of the design goals was when you saw it you wanted to lick it".

<span class="mw-page-title-main">Graphical widget</span> Element of interaction in a graphical user interface

A graphical widget in a graphical user interface is an element of interaction, such as a button or a scroll bar. Controls are software components that a computer user interacts with through direct manipulation to read or edit information about an application. User interface libraries such as Windows Presentation Foundation, Qt, GTK, and Cocoa, contain a collection of controls and the logic to render these.

A user interface markup language is a markup language that renders and describes graphical user interfaces and controls. Many of these markup languages are dialects of XML and are dependent upon a pre-existing scripting language engine, usually a JavaScript engine, for rendering of controls and extra scriptability.

<span class="mw-page-title-main">Acid2</span> Online HTML rendering test

Acid2 is a webpage that test web browsers' functionality in displaying aspects of HTML markup, CSS 2.1 styling, PNG images, and data URIs. The test page was released on 13 April 2005 by the Web Standards Project. The Acid2 test page will be displayed correctly in any application that follows the World Wide Web Consortium and Internet Engineering Task Force specifications for these technologies. These specifications are known as web standards because they describe how technologies used on the web are expected to function.

In HTML and XHTML, the blockquote element defines "a section [within a document] that is quoted from another source". The syntax is

<span class="mw-page-title-main">Helicon Filter</span> Editing software for Microsoft Windows

Helicon Filter, also referred to as Helicon, Filter, or as HF, was a proprietary commercial and shareware photo editing software program for Microsoft Windows, similar to such programs as Adobe Photoshop and GIMP, developed and published by Helicon Soft Ltd. Unlike these other programs, Helicon Filter is designed primarily to edit and improve existing photos and not for graphics creation. Helicon Filter's interface also differs from other programs in that compact toolbars and menus containing editing tools are replaced with labeled "filter" tabs, each tab containing labeled edit options specific to a single aspect of the picture. Although some editors used to Photoshop-style programs may initially find this layout unfamiliar and unlike the standard toolbar layout, beginners and those who don't recognize the standard icons generally find this very helpful for getting through the editing process.

<span class="mw-page-title-main">SVG filter effects</span>

SVG filter effects are effects applied to Scalable Vector Graphics (SVG) files. SVG is an open-standard XML format for two-dimensional vector graphics as defined by the World Wide Web Consortium (W3C). A filter effect consists of a series of graphics operations that are applied to a given source vector graphic to produce a modified bitmapped result.

<span class="mw-page-title-main">CSS</span> Style sheet language

Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

<span class="mw-page-title-main">CSS box model</span> Model used for styling websites

In web development, the CSS box model refers to how HTML elements are modeled in browser engines and how the dimensions of those HTML elements are derived from CSS properties. It is a fundamental concept for the composition of HTML webpages. The guidelines of the box model are described by web standards World Wide Web Consortium (W3C) specifically the CSS Working Group. For much of the late-1990s and early 2000s there had been non-standard compliant implementations of the box model in mainstream browsers. With the advent of CSS2 in 1998, which introduced the box-sizing property, the problem had mostly been resolved.

Front-end web development is the development of the graphical user interface of a website through the use of HTML, CSS, and JavaScript so users can view and interact with that website.

Web Components are a set of features that provide a standard component model for the web allowing for encapsulation and interoperability of individual HTML elements. Web Components are a popular approach when building microfrontends.

<span class="mw-page-title-main">Boxy SVG</span> Vector graphics editor

Boxy SVG is a proprietary vector graphics editor for creating illustrations, as well as logos, icons, and other elements of graphic design. It is primarily focused on editing drawings in the SVG file format. The program is available as both a web app and a desktop application for Windows, macOS, ChromeOS, and Linux-based operating systems.

References

  1. ↑ Caspers, H. (1971). "Brockhaus ABC. Biologie. Mit Textabb. + 32 Taf. Leipzig: VEB F. A. Brockhaus Verlag 1969. 921 S". Internationale Revue der gesamten Hydrobiologie und Hydrographie. 56 (1): 138–139. doi:10.1002/iroh.19710560133. ISSN   0020-9309.
  2. ↑ "box-shadow - CSS: Cascading Style Sheets". MDN. 2024-08-13. Archived from the original on 2025-01-04. Retrieved 2025-01-09.
  3. ↑ "text-shadow - CSS: Cascading Style Sheets". MDN. 2024-11-19. Archived from the original on 2025-01-06. Retrieved 2025-01-09.
  4. ↑ "drop-shadow() - CSS: Cascading Style Sheets". MDN. 2024-11-28. Archived from the original on 2025-01-04. Retrieved 2025-01-09.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.