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.

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, text shadow, and filter. [2] The first two are used for elements and text respectively, while the drop shadow filter additionally to the element's content, letting it support oddly shaped elements or transparent images.

Related Research Articles

<span class="mw-page-title-main">History of the graphical user interface</span>

The history of the graphical user interface, understood as the use of graphic icons and a pointing device to control a computer, covers a five-decade span of incremental refinements, built on some constant core principles. Several vendors have created their own windowing systems based on independent code, but with basic elements in common that define the WIMP "window, icon, menu and pointing device" paradigm.

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.

Object Linking & Embedding (OLE) is a proprietary technology developed by Microsoft that allows embedding and linking to documents and other objects. For developers, it brought OLE Control Extension (OCX), a way to develop and use custom user interface elements. On a technical level, an OLE object is any object that implements the IOleObject interface, possibly along with a wide range of other interfaces, depending on the object's needs.

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 recently 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">Inkscape</span> Vector graphics editor

Inkscape is a free and open-source vector graphics editor used to create vector images, primarily in Scalable Vector Graphics (SVG) format. Other formats can be imported and exported.

<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 operating system. 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.

The Appearance Manager is a component of Mac OS 8 and Mac OS 9 that controls the overall look of the Macintosh graphical user interface widgets and supports several themes. It was originally developed for Apple's ill-fated Copland project, but with the cancellation of this project the system was moved into newer versions of the Mac OS. The Appearance Manager is also available free as part of a downloadable SDK for System 7.

<span class="mw-page-title-main">Magic User Interface</span> Widget toolkit for AmigaOS

The Magic User Interface is an object-oriented system by Stefan Stuntz to generate and maintain graphical user interfaces. With the aid of a preferences program, the user of an application has the ability to customize the system according to personal taste.

Windows Presentation Foundation (WPF) is a free and open-source graphical subsystem originally developed by Microsoft for rendering user interfaces in Windows-based applications. WPF, previously known as "Avalon", was initially released as part of .NET Framework 3.0 in 2006. WPF uses DirectX and attempts to provide a consistent programming model for building applications. It separates the user interface from business logic, and resembles similar XML-oriented object models, such as those implemented in XUL and SVG.

<span class="mw-page-title-main">X Rendering Extension</span>

The X Rendering Extension is an extension to the X11 core protocol to implement image compositing in the X server, to allow an efficient display of transparent images.

<span class="mw-page-title-main">Windows Aero</span> Design language

Windows Aero is a design language introduced in the Windows Vista operating system. The changes made in the Aero interface affected many elements of the Windows interface, including the incorporation of a new look, along with changes in interface guidelines reflecting appearance, layout, and the phrasing and tone of instructions and other text in applications.

A compositing window manager, or compositor, is a window manager that provides applications with an off-screen buffer for each window. The window manager composites the window buffers into an image representing the screen and writes the result into the display memory.

<span class="mw-page-title-main">DrawPlus</span> 2D vector graphics editor and animation software

DrawPlus is a 2D vector graphics editor and animation software developed by the UK-based software company Serif, also responsible for PhotoPlus, PagePlus, WebPlus, Digital Scrapbook Artist, Affinity Designer, Affinity Photo and other titles.

<span class="mw-page-title-main">Workbench (AmigaOS)</span> Graphical user interface for the Amiga computer

Workbench is the desktop environment and graphical file manager of AmigaOS developed by Commodore International for their Amiga line of computers. Workbench provides the user with a graphical interface to work with file systems and launch applications. It uses a workbench metaphor for representing file system organisation.

<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">Digital Scrapbook Artist</span> Scrapbooking software

Serif Digital Scrapbook Artist is a digital scrapbooking program for Microsoft Windows.

Fatpaint is a free, online (web-based) graphic design and desktop publishing software product and image editor. It includes integrated tools for creating page layout, painting, coloring and editing pictures and photos, drawing vector images, using dingbat vector clipart, writing rich text, creating ray traced 3D text logos and displaying graphics on products from Zazzle that can be purchased or sold. Fatpaint integrates desktop publishing features with brush painting, vector drawing and custom printed products in a single Flash application. It supports the use of a pressure-sensitive pen tablet and allows the user to add images by searching Wikimedia, Picasa, Flickr, Google, Yahoo, Bing, and Fatpaint's own collection of public domain images. The completed project can be saved on Fatpaint's server or locally. Fatpaint is affiliated with Zazzle and owned by Mersica.

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

Boxy SVG is a 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. ↑ , drop-shadow() filter function, Mozilla Developer Network
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.