Search completed in 1.30 seconds.
WaveShaperNode.WaveShaperNode() - Web APIs
the wave
shapernode() constructor of the web audio api creates a new wave
shapernode object which is an audionode that represents a non-linear distorter.
... syntax var wave
shapernode = new wave
shapernode(context, options) parameters inherits parameters from the audionodeoptions dictionary.
... return value a new wave
shapernode object instance.
...And 2 more matches
Overview of CSS Shapes - CSS: Cascading Style Sheets
the css
shapes level 1 specification describes geometric
shapes in css.
...this article provides an overview of what you can do with
shapes.
...if you then apply a circle
shape, the text would then wrap round the line of the circle.
...And 46 more matches
Basic Shapes - CSS: Cascading Style Sheets
css
shapes can be defined using the <basic-
shape> type, and in this guide i’ll explain how each of the different values accepted by this type work.
... before looking at the
shapes, it is worth understanding two pieces of information that go together to make these
shapes possible: the <basic-
shape> type the reference box the <basic-
shape> type the <basic-
shape> type is used as the value for all of our basic
shapes.
... this type uses functional notation: the type of
shape is followed by brackets, inside of which are additional values used to describe the
shape.
...And 36 more matches
shape-outside - CSS: Cascading Style Sheets
the
shape-outside css property defines a
shape—which may be non-rectangular—around which adjacent inline content should wrap.
... by default, inline content wraps around its margin box;
shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.
... syntax /* keyword values */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box; /* function values */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
shape-outside: path('m0.5,1 c0.5,1,0,0.7,0,0.3 a0.25,0.25,1,1,1,0.5,0.3 a0.25,0.25,1,1,1,1,0.3 c1,0.7,0.5,1,0.5,1 z'); /* <url> value */
shape-outside: url(image.png); /* <gradient> value */
shape-outside: linear-gradient(45deg, rgba(255, 2...
...And 31 more matches
Edit Shape Paths in CSS - Firefox Developer Tools
the
shape path editor is a tool that helps you see and edit
shapes created using clip-path and also the css
shape-outside property and <basic-
shape> values.
... activate / deactivate the
shape path editor the
shape path editor is accessed via the css rules panel, which can be opened as described in the guide to opening the inspector.
... once you have selected your element, you should see the
shape icon alongside any valid value, e.g.
...And 27 more matches
Shapes From Images - CSS: Cascading Style Sheets
in this guide we will take a look at how we can create a
shape from an image file with an alpha channel or even from a css gradient.
... this is a very flexible way to create
shapes.
... rather than drawing a path with a complex polygon in css, you can create the
shape in a graphics program and then use the path created by the pixels less opaque than a threshold value.
...And 23 more matches
<basic-shape> - CSS: Cascading Style Sheets
the <basic-
shape> css data type represents a
shape used in the clip-path,
shape-outside, and offset-path properties.
... syntax the <basic-
shape> data type is defined with one of the basic
shape functions listed below.
... when creating a
shape, the reference box is defined by each property that uses <basic-
shape> values.
...And 22 more matches
Drawing shapes with canvas - Web APIs
by the end of this article, you will have learned how to draw rectangles, triangles, lines, arcs and curves, providing familiarity with some of the basic
shapes.
... drawing rectangles unlike svg, <canvas> only supports two primitive
shapes: rectangles and paths (lists of points connected by lines).
... all other
shapes must be created by combining one or more paths.
...And 21 more matches
Shapes from box values - CSS: Cascading Style Sheets
a straightforward way to create a
shape is to use a value from the css box model.
... the box values allowable as a
shape value are: content-box padding-box border-box margin-box the border-radius values are also supported, this means that you can have something in your page with a curved border, and your
shape can follow the created
shape.
... by using box values for
shapes we can wrap our content around the edges defined by these values.
...And 11 more matches
Basic shapes - SVG: Scalable Vector Graphics
« previousnext » there are several basic
shapes used for most svg drawing.
... the purpose of these
shapes is fairly obvious from their names.
... basic
shapes to insert a
shape, you create an element in the document.
...And 9 more matches
shape-image-threshold - CSS: Cascading Style Sheets
the
shape-image-threshold css property sets the alpha channel threshold used to extract the
shape using an image as the value for
shape-outside.
... any pixels whose alpha component's value is greater than the threshold are considered to be part of the
shape for the purposes of determining its boundaries.
... for example, a value of 0.5 means that the
shape will enclose all the pixels that are more than 50% opaque.
...And 8 more matches
WaveShaperNode - Web APIs
the wave
shapernode interface represents a non-linear distorter.
... a wave
shapernode always has exactly one input and one output.
... number of inputs 1 number of outputs 1 channel count mode "max" channel count 2 (not used in the default count mode) channel interpretation "speakers" constructor wave
shapernode() creates a new instance of an wave
shapernode object.
...And 6 more matches
CSS Shapes - CSS: Cascading Style Sheets
css
shapes describe geometric
shapes for use in css.
... for the level 1 specification, css
shapes can be applied to floating elements.
... the specification defines a number of different ways to define a
shape on a floated element, causing wrapping lines to wrap round the
shape rather than following the rectangle of the element's box.
...And 4 more matches
<shape> - CSS: Cascading Style Sheets
the <
shape> css data type defines the specific form (
shape) of a region.
... note: <
shape> and rect() work in conjunction with clip, which has been deprecated in favor of clip-path.
... when possible, use clip-path and the <basic-
shape> data type instead.
...And 4 more matches
shape-rendering - SVG: Scalable Vector Graphics
the
shape-rendering attribute provides hints to the renderer about what tradeoffs to make when rendering
shapes like paths, circles, or rectangles.
... note: as a presentation attribute,
shape-rendering can be used as a css property.
... as a presentation attribute, it can be applied to any element but it has effect only on the following seven elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100"
shape-rendering="geometricprecision"/> <circle cx="320" cy="100" r="100"
shape-rendering="crispedges"/> </svg> usage notes value auto | optimizespeed | crispedges | geometricprecision default value auto animatable yes auto this value indicates that the user agent shall make appropriate tradeoffs to balance speed, crisp edges and geometric precision, but with geometric precision given more importance than speed and cri...
...And 4 more matches
BaseAudioContext.createWaveShaper() - Web APIs
the createwave
shaper() method of the baseaudiocontext interface creates a wave
shapernode, which represents a non-linear distortion.
... syntax baseaudioctx.createwave
shaper(); returns a wave
shapernode.
... example the following example shows basic usage of an audiocontext to create a wave
shaper node.
...And 3 more matches
shape - CSS: Cascading Style Sheets
the
shape css media feature can be used to test the
shape of the device to distinguish recrangular and round displays.
... syntax the
shape descrete feature is specified as one of two acceptable strings, either rect reprsenting a rectangular screen or round representing a circular, oval or elliptical screen.
... rect the
shape is an axis aligned rectangle or square, or a similar
shape such as rounded rectangle for which the traditional designs are appropriate.
...And 3 more matches
WaveShaperNode.curve - Web APIs
the curve property of the wave
shapernode interface is a float32array of numbers describing the distortion to apply.
... syntax var audioctx = new audiocontext(); var distortion = audioctx.createwave
shaper(); distortion.curve = mycurvedataarray; // mycurvedataarray is a float32array value a float32array.
... example the following example shows basic usage of an audiocontext to create a wave
shaper node.
...And 2 more matches
WaveShaperNode.oversample - Web APIs
the oversample property of the wave
shapernode interface is an enumerated value indicating if oversampling must be used.
... syntax distortion.oversample = enumeratedvalue; values distortion is a wave
shapernode.
... example the following example shows basic usage of an audiocontext to create a wave
shaper node.
...And 2 more matches
shape-margin - CSS: Cascading Style Sheets
the
shape-margin css property sets a margin for a css
shape created using
shape-outside.
... the margin lets you adjust the distance between the edges of the
shape (the float element) and the surrounding content.
... syntax /* <length> values */
shape-margin: 10px;
shape-margin: 20mm; /* <percentage> value */
shape-margin: 60%; /* global values */
shape-margin: inherit;
shape-margin: initial;
shape-margin: unset; values <length-percentage> sets the margin of the
shape to a <length> value or to a <percentage> of the width of the element's containing block.
...And 2 more matches
Property cache
shape integers do not exist anymore.
...spidermonkey mainly uses type inference to determine which properties are being accessed; in cases where type inference does not find the exact
shape of the object being accessed, spidermonkey uses a pic (polymorphic inline caches) to store the result of the lookup.
... basics in general, accessing a property of a native object entails: a property lookup; examining the
shape to see how the property can be accessed; actually carrying out the property access.
...And 41 more matches
SVG documentation index - SVG: Scalable Vector Graphics
for
shapes and text it's a presentation attribute that defines the color (or any svg paint servers like gradients or patterns) used to paint the element; for animation it defines the final state of the animation.
... 72 fill-opacity svg, svg attribute the fill-opacity attribute is a presentation attribute defining the opacity of the paint server (color, gradient, pattern, etc) applied to a
shape.
... 73 fill-rule svg, svg attribute the fill-rule attribute is a presentation attribute defining the algorithm to use to determine the inside part of a
shape.
...And 29 more matches
Index - Web APIs
242 baseaudiocontext.createperiodicwave() api, audio, audiocontext, baseaudiocontext, media, method, reference, web audio api, createperiodicwave the createperiodicwave() method of the baseaudiocontext interface is used to create a periodicwave, which is used to define a periodic waveform that can be used to
shape the output of an oscillatornode.
... 245 baseaudiocontext.createwave
shaper() api, audiocontext, baseaudiocontext, method, reference, web audio api, createwave
shaper a wave
shapernode.
...if we want to apply colors to a
shape, there are two important properties we can use: fillstyle and strokestyle.
...And 21 more matches
Classes and Inheritance - Archive of obsolete content
to illustrate this, let's define a simple constructor for a class
shape: function
shape(x, y) { this.x = x; this.y = y; } we can now use this constructor to create instances of
shape: let
shape = new
shape(2, 3);
shape instanceof
shape; // => true
shape.x; // => 2
shape.y; // => 3 the keyword new tells javascript that we are performing a constructor call.
...however, since the value of this is undefined for ordinary function calls, we need to add some boilerplate code to convert them to constructor calls: function
shape(x, y) { if (!this) return new
shape(x, y); this.x = x; this.y = y; } prototypes every object has an implicit property, known as its prototype.
...when a function is used in a constructor call, javascript makes the value of this property the prototype of the newly created object: let
shape =
shape(2, 3); object.getprototypeof(
shape) ==
shape.prototype; // => true all instances of a class have the same prototype.
...And 18 more matches
Applying styles and colors - Web APIs
« previousnext » in the chapter about drawing
shapes, we used only the default line and fill styles.
...if we want to apply colors to a
shape, there are two important properties we can use: fillstyle and strokestyle.
... fillstyle = color sets the style used when filling
shapes.
...And 17 more matches
clip-path - CSS: Cascading Style Sheets
syntax /* keyword values */ clip-path: none; /* <clip-source> values */ clip-path: url(resources.svg#c1); /* <geometry-box> values */ clip-path: margin-box; clip-path: border-box; clip-path: padding-box; clip-path: content-box; clip-path: fill-box; clip-path: stroke-box; clip-path: view-box; /* <basic-
shape> values */ clip-path: inset(100px 50px); clip-path: circle(50px at 0 100px); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: path('m0.5,1 c0.5,1,0,0.7,0,0.3 a0.25,0.25,1,1,1,0.5,0.3 a0.25,0.25,1,1,1,1,0.3 c1,0.7,0.5,1,0.5,1 z'); /* box and
shape values combined */ clip-path: padding-box circle(50px at 0 100px); /* global values */ clip-path: inherit; clip-path: initial; clip-...
... <basic-
shape> a
shape whose size and position is defined by the <geometry-box> value.
... <geometry-box> if specified in combination with a <basic-
shape>, this value defines the reference box for the basic
shape.
...And 15 more matches
Building up a basic demo with Three.js - Game development
a typical 3d scene in a game — even the simplest one — contains standard items like
shapes located in a coordinate system, a camera to actually see them, lights and materials to make it look better, animations to make it look alive, etc.
...you might have noticed the antialias parameter in the first line — this renders the edges of
shapes more smoothly.
... geometry now our scene is properly rendering, we can start adding 3d
shapes.
...And 14 more matches
radial-gradient() - CSS: Cascading Style Sheets
its
shape may be a circle or an ellipse.
... <
shape> the gradient's
shape.
... the value can be circle (meaning that the gradient's
shape is a circle with constant radius) or ellipse (meaning that the
shape is an axis-aligned ellipse).
...And 11 more matches
SVG Presentation Attributes - SVG: Scalable Vector Graphics
lay dominant-baseline enable-background fill fill-opacity fill-rule filter flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-orientation-horizontal glyph-orientation-vertical image-rendering kerning letter-spacing lighting-color marker-end marker-mid marker-start mask opacity overflow pointer-events
shape-rendering solid-color solid-opacity stop-color stop-opacity stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering transform unicode-bidi vector-effect visibility word-spacing writing-mode attributes alignment-baseline it specifies how an object is aligned along t...
... value: auto|<
shape()>|inherit; animatable: yes clip-path it binds the element it is applied to with a given <clippath> element.
... value: none|<funciri>|inherit; animatable: yes clip-rule it indicates how to determine what side of a path is inside a
shape in order to know how a <clippath> should clip its target.
...And 11 more matches
JavaScript modules - JavaScript
these examples demonstrate a simple set of modules that create a <canvas> element on a webpage, and then draw (and report information about) different
shapes on the canvas.
... avoiding naming conflicts so far, our canvas
shape drawing modules seem to be working ok.
... but what happens if we try to add a module that deals with drawing another
shape, like a circle or triangle?
...And 10 more matches
JIT Optimization Strategies
} in the above example, the properties x and y can always be determined to exist on any instance of someconstructor at definite locations, allowing the engine to infer deterministically the position of x without a
shape guard.
... getprop_inlineaccess optimizes a polymorphic property access where there are only a few different types of objects seen, and the property on all of the different types is determinable through a
shape-check.
... if a property access is monomorphic and the property's location is determinable from the object's
shape, but the property is not definite (see: getprop_definiteproperty), then this optimization may be used.
...And 9 more matches
offset-path - CSS: Cascading Style Sheets
syntax /* default */ offset-path: none; /* function values */ offset-path: ray(45deg closest-side contain); /* url */ offset-path: url(#path); /*
shapes */ offset-path: circle(50% at 25% 25%); offset-path: inset(50% 50% 50% 50%); offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%); offset-path: path('m 0,200 q 200,200 260,80 q 290,20 400,0 q 300,100 400,200'); /* geometry boxes */ offset-path: margin-box; offset-path: stroke-box; /* global values */ offset-path: inherit; offset-path: initial; offset-path: unset; values ray() taking up to three values, defines a path that is a line segment st...
... url() references the id of an svg
shape -- circle, ellipse, line, path, polygon, polyline, or rect -- using the
shape's geometry as the path.
... <basic-
shape> specifies a css
shape including circle(), ellipse(), inset(), polygon(), or path().
...And 8 more matches
Building up a basic demo with the PlayCanvas engine - Game development
geometry now the scene is properly rendering we can start adding 3d
shapes to it.
... to speed up development playcanvas provides a bunch of predefined primitives that you can use to create
shapes instantly in a single line of code.
... there are cubes, spheres, cylinders and more complicated
shapes available.
...And 7 more matches
Advanced styling effects - Learn web development
the really nice thing about filters however, is that they work on the exact
shapes of the content inside the box, not just the box itself as one big chunk, so it is worth knowing the difference.
...as you can see, the drop-shadow filter follows the exact
shape of the text and border dashes.
... css
shapes while it is true that everything in css is a rectangular box, and images are a physical rectangular box, we can make it look as if our content flows around non-rectangular things by using css
shapes.
...And 7 more matches
Compositing and clipping - Web APIs
« previousnext » in all of our previous examples,
shapes were always drawn one on top of the other.
... this is more than adequate for most situations, but it limits the order in which composite
shapes are built.
...in addition, the clip property allows us to hide unwanted parts of
shapes.
...And 7 more matches
Paths - SVG: Scalable Vector Graphics
« previousnext » the <path> element is the most powerful element in the svg library of basic
shapes.
... paths create complex
shapes by combining multiple straight lines or curved lines.
... complex
shapes composed only of straight lines can be created as <polyline>s.
...And 7 more matches
Building up a basic demo with A-Frame - Game development
we can set the position of the camera explicitly and move it back a little bit from the center of the scene, so we'll be able to see the
shapes.
... adding some advanced geometry we have a cube on the scene already; now let's try adding more
shapes.
... we are not limited to the default entities like <a-cube> — using <a-entity> we can create custom advanced
shapes.
...And 6 more matches
SVG Guidelines
invisible
shapes there are two kinds of invisible
shapes: the off-screen ones and the uncolored ones.
... the offscreen
shapes are hard to spot, even with an automated tool, and are usually context aware.
... those kinds of
shapes are visible but off the svg view box.
...And 6 more matches
repeating-radial-gradient() - CSS: Cascading Style Sheets
<
shape> the gradient's
shape.
... the value can be circle (meaning that the gradient's
shape is a circle with constant radius) or ellipse (meaning that the
shape is an axis-aligned ellipse).
... <extent-keyword> a keyword describing how big the ending
shape must be.
...And 6 more matches
fill-rule - SVG: Scalable Vector Graphics
the fill-rule attribute is a presentation attribute defining the algorithm to use to determine the inside part of a
shape.
...ement but it has effect only on the following eight elements: <altglyph>, <path>, <polygon>, <polyline>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- default value for fill-rule --> <polygon fill-rule="nonzero" stroke="red" points="50,0 21,90 98,35 2,35 79,90"/> <!-- the center of the
shape has two path segments (shown by the red stroke) between it and infinity.
... it is therefore considered outside the
shape, and not filled.
...And 6 more matches
Building up a basic demo with Babylon.js - Game development
geometry now the scene is properly rendering we can start adding 3d
shapes to it.
... to speed up development babylon.js provides a bunch of predefined primitives that you can use to create
shapes instantly in a single line of code.
... there are cubes, spheres, cylinders and more complicated
shapes available.
...And 5 more matches
Building up a basic demo with PlayCanvas editor - Game development
by clicking the editor button we'll launch the online playcanvas editor where we'll create our scene with the
shapes.
... now we can apply the colored material to the
shape by clicking and dragging its icon from the bottom part of the screen (the little dot on the left hand side of the material's name — it can be a bit fiddly to select; just persevere) onto the box on the scene.
...let's add more
shapes to the scene to make it look more interesting.
...And 5 more matches
Drawing graphics - Learn web development
drawing
shapes tends to be done using the rectangle
shape primitive, or by tracing a line along a certain path and then filling in the
shape.
...basically, this involves writing code to specify exactly what path the pen should move along on your canvas to trace the
shape you want to draw.
... fill() — draw a filled
shape by filling in the path you've traced so far.
...And 5 more matches
CanvasRenderingContext2D - Web APIs
it is used for drawing
shapes, text, images, and other objects.
... fill and stroke styles fill styling is used for colors and styles inside
shapes and stroke styling is used for the lines around
shapes.
... canvasrenderingcontext2d.fillstyle color or style to use inside
shapes.
...And 5 more matches
Test your skills: Object-oriented JavaScript - Learn web development
we want you to: add a new method to the
shape class's prototype, calcperimeter(), which calculates its perimeter (the length of the
shape's outer edge) and logs the result to the console.
... create a new instance of the
shape class called square.
... create a new instance of
shape called triangle, with a name of triangle and a sidelength of 3.
...And 4 more matches
Adding 2D content to a WebGL context - Web APIs
the shaders a shader is a program, written using the opengl es shading language (glsl), that takes information about the vertices that make up a
shape and generates the data needed to render the pixels onto the screen: namely, the positions of the pixels and their colors.
... let's take a quick look at the two types of shader, with the example in mind of drawing a 2d
shape into the webgl context.
... vertex shader each time a
shape is rendered, the vertex shader is run for each vertex in the
shape.
...And 4 more matches
refX - SVG: Scalable Vector Graphics
two elements are using this attribute: <marker> and <symbol> marker for <marker>, refx defines the x coordinate of the marker’s reference point, which is to be placed exactly at the marker’s position on the
shape.
... left the reference point of the marker is placed at the left edge of the
shape.
... center the reference point of the marker is placed at the horizontal center of the
shape.
...And 4 more matches
refY - SVG: Scalable Vector Graphics
two elements are using this attribute: <marker> and <symbol> marker for <marker>, refy defines the y coordinate of the marker’s reference point, which is to be placed exactly at the marker’s position on the
shape.
... top the reference point of the marker is placed at the top edge of the
shape.
... center the reference point of the marker is placed at the vertical center of the
shape.
...And 4 more matches
Adding features to our bouncing balls demo - Learn web development
we also want to test your object-building skills by creating a generic
shape() object that our balls and evil circle can inherit from.
... creating our new objects first of all, change your existing ball() constructor so that it becomes a
shape() constructor and add a new ball() constructor: the
shape() constructor should define the x, y, velx, and vely properties in the same way as the ball() constructor did originally, but not the color and size properties.
... the ball() constructor should inherit the x, y, velx, vely, and exists properties from the
shape() constructor.
...And 3 more matches
CanvasRenderingContext2D.rotate() - Web APIs
examples rotating a
shape this example rotates a rectangle by 45°.
... note that the center of rotation is the top-left corner of the canvas, and not a location relative to any
shape.
... rotating a
shape around its center this example rotates a
shape around its center point.
...And 3 more matches
fill - SVG: Scalable Vector Graphics
for
shapes and text it's a presentation attribute that defines the color (or any svg paint servers like gradients or patterns) used to paint the element; for animation it defines the final state of the animation.
... path for <path>, fill is a presentation attribute that defines the color of the interior of the
shape.
... polygon for <polygon>, fill is a presentation attribute that defines the color of the interior of the
shape.
...And 3 more matches
<polyline> - SVG: Scalable Vector Graphics
the <polyline> svg element is an svg basic
shape that creates straight lines connecting several points.
... typically a polyline is used to create open
shapes as the last point doesn't have to be connected to the first point.
... for closed
shapes see the <polygon> element.
...And 3 more matches
Invariants
even if the function is native, there is serious trouble: js_newobject with null parent argument calculates the parent from cx->fp->scopechain, which can be stale if we're on trace.) the chain of properties starting at any js
shape and chasing js
shape::parent never forms a cycle and does not contain any duplicate jsscopeproperty::slot values other than -1.
...the same slot being allocated to more than one property would be a problem for obvious reasons.) all js
shapes in dictionary-mode objects have the in_dictionary flag set.
... all js
shapes in property trees have it cleared.
...And 2 more matches
An Overview of XPCOM
when a class inherits from another class, the inheriting class may override the default behaviors of the base class without having to copy all of that class's code, in effect creating a more specific class, as in the following example: simple class inheritance class
shape { private: int m_x; int m_y; public: virtual void draw() = 0;
shape(); virtual ~
shape(); }; class circle : public
shape { private: int m_radius; public: virtual draw(); circle(int x, int y, int radius); virtual ~circle(); }; circle is a derived class of
shape.
... a circle is a
shape, in other words, but a
shape is not necessarily a circle.
... in this case,
shape is the base class and circle is a subclass of
shape.
...And 2 more matches
CanvasRenderingContext2D.clip() - Web APIs
in the image below, the red outline represents a clipping region
shaped like a star.
... note: be aware that the clipping region is only constructed from
shapes added to the path.
... it doesn't work with
shape primitives drawn directly to the canvas, such as fillrect().
...And 2 more matches
text-emphasis - CSS: Cascading Style Sheets
filled the
shape is filled with solid color.
... open the
shape is hollow.
...this is the default
shape in horizontal writing modes when no other
shape is given.
...And 2 more matches
<area> - HTML: Hypertext Markup Language
the number and meaning of the values depend upon the value specified for the
shape attribute.
...
shape the
shape of the associated hot spot.
... the specifications for html defines the values rect, which defines a rectangular region; circle, which defines a circular region; poly, which defines a polygon; and default, which indicates the entire region beyond any defined
shapes.
...And 2 more matches
points - SVG: Scalable Vector Graphics
two elements are using this attribute: <polyline>, and <polygon> html,body,svg { height:100% } <svg viewbox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline is an open
shape --> <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90"/> <!-- polygon is a closed
shape --> <polygon stroke="black" fill="none" transform="translate(100,0)" points="50,0 21,90 98,35 2,35 79,90"/> <!-- it is usualy considered best practices to separate a x and y coordinate with a comma and a group of coordinates by a space.
... note: a polyline is an open
shape, meaning the last point is not connected to the first point.
... value [ <number>+ ]# default value none animatable yes example html,body,svg { height:100% } <svg viewbox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline is an open
shape --> <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90"/> </svg> polygon for <polygon>, points defines a list of points, each representing a vertex of the
shape to be drawn.
...And 2 more matches
<path> - SVG: Scalable Vector Graphics
the <path> svg element is the generic element to define a
shape.
... all the basic
shapes can be created with a path element.
... html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,60 50,90 q 10,60 10,30 z"/> </svg> attributes d this attribute defines the
shape of the path.
...And 2 more matches
<polygon> - SVG: Scalable Vector Graphics
the <polygon> element defines a closed
shape consisting of a set of connected straight line segments.
... for open
shapes, see the <polyline> element.
... html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- example of a polygon with the default fill --> <polygon points="0,100 50,25 50,75 100,0" /> <!-- example of the same polygon
shape with stroke and no fill --> <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" /> </svg> attributes points this attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polygon.
...And 2 more matches
Patterns - SVG: Scalable Vector Graphics
"0" y="0" width="50" height="50" fill="skyblue"/> <rect x="0" y="0" width="25" height="25" fill="url(#gradient2)"/> <circle cx="25" cy="25" r="20" fill="url(#gradient1)" fill-opacity="0.5"/> </pattern> </defs> <rect fill="url(#pattern)" stroke="black" width="200" height="200"/> </svg> screenshotlive sample inside the <pattern> element, you can include any of the other basic
shapes you've included before, and each of them can be styled using any of the styles you've learned before, including gradients and opacity.
... unlike gradients, patterns have a second attribute, patterncontentunits, which describes the units system used inside the pattern element, on the basic
shapes themselves.
...what this means is that unless you specify one or both of these attributes (patterncontentunits and patternunits), the
shapes you draw inside your pattern are being drawn in a different coordinate system than the pattern element is using, which can make things a bit confusing when you're writing this by hand.
...And 2 more matches
CSS3 - Archive of obsolete content
the css4 iteration of the backgrounds and borders specification is already in progress, though it still hasn't reached the first public working draft stage, it plans to add the ability to clip a border (with the css border-clip, border-clip-top, border-clip-right, border-clip-bottom, and border-clip-left properties) or to control the
shape of the border in a corner (using the css border-corner-
shape property).
... css
shapes module level 1 candidate recommendation defines geometric
shapes, which can be applied to floats.
... these
shapes describe areas, around which inline content wraps instead of wrapping around the bounding box.
...adds the notion of
shapes, in which content must flows.
Adding vector graphics to the Web - Learn web development
popular web raster formats include bitmap (.bmp), png (.png), jpeg (.jpg), and gif (.gif.) vector images are defined using algorithms — a vector image file contains
shape and path definitions that the computer can use to work out what the image should look like when rendered on the screen.
...the vector image however continues to look nice and crisp, because no matter what size it is, the algorithms are used to work out the
shapes in the image, with the values simply being scaled as it gets bigger.
...it's basically markup, like html, except that you've got many different elements for defining the
shapes you want to appear in your image, and the effects you want to apply to those
shapes.
...at the simplest end of the spectrum, you've got elements for creating simple
shapes, like <circle> and <rect>.
Object building practice - Learn web development
the resulting constant (ctx) is the object that directly represents the drawing area of the canvas and allows us to draw 2d
shapes on it.
...the context is like the paper, and now we want to command our pen to draw something on it: first, we use beginpath() to state that we want to draw a
shape on the paper.
... next, we use fillstyle to define what color we want the
shape to be — we set it to our ball's color property.
... next, we use the arc() method to trace an arc
shape on the paper.
Bytecode Descriptions
format: jof_ic newobject, newobjectwithgroup operands: (uint32_t baseobjindex) stack: ⇒ obj create and push a new object of a predetermined
shape.
... the new object has the
shape of the template object script->getobject(baseobjindex).
...going one step further than jsop::newobject, this instruction doesn't just reuse the
shape--it actually pushes the preconstructed object script->getobject(objectindex) right onto the stack.
...the lexicalscope indicated by lexicalscopeindex determines the
shape of the new lexicalenvironmentobject.
CanvasRenderingContext2D.globalAlpha - Web APIs
the canvasrenderingcontext2d.globalalpha property of the canvas 2d api specifies the alpha (transparency) value that is applied to
shapes and images before they are drawn onto the canvas.
... examples drawing translucent
shapes this example uses the globalalpha property to draw two semi-transparent rectangles.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.globalalpha = 0.5; ctx.fillstyle = 'blue'; ctx.fillrect(10, 10, 100, 100); ctx.fillstyle = 'red'; ctx.fillrect(50, 50, 100, 100); result overlaying transparent
shapes this example illustrates the effect of overlaying multiple transparent
shapes on top of each other.
...next, we set the globalalpha property to 0.2 (20% opaque); this alpha level will apply to all of our transparent
shapes.
Basic animations - Web APIs
probably the biggest limitation is, that once a
shape gets drawn, it stays that way.
... basic animation steps these are the steps you need to take to draw a frame: clear the canvas unless the
shapes you'll be drawing fill the complete canvas (for instance a backdrop image), you need to clear any
shapes that have been drawn previously.
... draw animated
shapes the step where you do the actual frame rendering.
... controlling an animation
shapes are drawn to the canvas by using the canvas methods directly or by calling custom functions.
Compositing example - Web APIs
'destination-over','destination-in','destination-out','destination-atop', 'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity' ].reverse(); var gcotext = [ 'this is the default setting and draws new
shapes on top of the existing canvas content.', 'the new
shape is drawn only where both the new
shape and the destination canvas overlap.
... everything else is made transparent.', 'the new
shape is drawn where it doesn\'t overlap the existing canvas content.', 'the new
shape is only drawn where it overlaps the existing canvas content.', 'new
shapes are drawn behind the existing canvas content.', 'the existing canvas content is kept where both the new
shape and existing canvas content overlap.
... everything else is made transparent.', 'the existing content is kept where it doesn\'t overlap the new
shape.', 'the existing canvas is only kept where it overlaps the new
shape.
... the new
shape is drawn behind the canvas content.', 'where both
shapes overlap the color is determined by adding color values.', 'only the new
shape is shown.', '
shapes are made transparent where both overlap and drawn normal everywhere else.', 'the pixels are of the top layer are multiplied with the corresponding pixel of the bottom layer.
Transformations - Web APIs
this can be used to draw scaled down or enlarged
shapes and bitmaps.
...if we apply, for instance, a scaling factor of 0.5, the resulting unit would become 0.5 pixels and so
shapes would be drawn at half size.
...this results in
shapes being drawn twice as large.
... a scale example in this last example, we'll draw
shapes with different scaling factors.
OscillatorNode.type - Web APIs
the type property of the oscillatornode interface specifies what
shape of waveform the oscillator will output.
... there are several common waveforms available, as well as an option to specify a custom waveform
shape.
... the
shape of the waveform will affect the tone that is produced.
... syntax oscillatornode.type = type; value a domstring specifying the
shape of oscillator wave.
A basic 2D WebGL animation example - Web APIs
we're also rotating the
shape, and we can do that here, by applying a transform.
...its role is to return the color of each pixel in the
shape being rendered.
... now that that's all out of the way, we can set up the vertex buffer and draw our
shape, first, the buffer of vertexes that will be used to draw the triangles of the
shape is set by calling bindbuffer().
... with the association in place between the vertex buffer for our
shape and the avertexposition attribute used to deliver vertexes one by one into the vertex shader, we're ready to draw the
shape by calling drawarrays().
-moz-image-region - CSS: Cascading Style Sheets
/* keyword value */ -moz-image-region: auto; /* <
shape> value */ -moz-image-region: rect(0, 8px, 4px, 4px); /* global values */ -moz-image-region: inherit; -moz-image-region: initial; -moz-image-region: unset; the syntax is similar to the clip property.
... <
shape> a
shape defining the part of the image to use.
... the rect() function defines a rectangle to use as
shape.
...it will not work with xul <image src="url" />.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax <
shape> | autowhere <
shape> = rect(<top>, <right>, <bottom>, <left>) examples clipping an image #example-button { /* display only the 4x4 area from the top left of this image */ list-style-image: url("chrome://example/skin/example.png"); -moz-image-region: rect(0px, 4px, 4px, 0px); } #example-button:hover { /* use the 4x4 area to the right of the first for the hovered button */ -moz-image-r...
content - CSS: Cascading Style Sheets
, <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-
shape> | <size> ]?
..., <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-
shape> | <size> ]?
...]# , <linear-color-stop><ending-
shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
...</p> <h1>6</h1> <p>according to the mozilla manifesto, <q cite="http://www.mozilla.org/about/manifesto/">individuals must have the ability to
shape the internet and their own experiences on the internet.</q> therefore, we can infer that contributing to the open web can protect our own individual experiences on it.
filter - CSS: Cascading Style Sheets
rop-shadow)"/> <use xlink:href="#myimage"/> </svg> </div> </td> <td><img alt="test_form_4_s.jpg" id="img4" class="internal default" src="/files/3715/test_form_4_s.jpg" style="width: 100%;" /></td> </tr> <tr> <td><img alt="test_form_4 distorded border - original image" id="img11" class="internal default" src="/files/8467/test_form_4_irregular-
shape_opacity-gradient.png" style="width: 100%;" /></td> <td><img alt="test_form_4 distorded border - live example" id="img12" class="internal default" src="/files/8467/test_form_4_irregular-
shape_opacity-gradient.png" style="width: 100%;" /></td> <td> <div class="svg-container"> <svg xmlns="http://www.w3.org/2000/svg" id="img13" overflow="visible" viewbox="0 0 213 161" co...
...lor-interpolation-filters="srgb"> <defs> <image id="myimage2" xlink:href="/files/8467/test_form_4_irregular-
shape_opacity-gradient.png" width="213px" height="161px"/> </defs> <filter id="drop-shadow2" x="-50%" y="-50%" width="200%" height="200%"> <feoffset dx="5" dy="5.5" in="sourcealpha"/> <fegaussianblur stddeviation="2.5"/> <fecomponenttransfer> <fefunca type="table" tablevalues="0 0.8"/> </fecomponenttransfer> </filter> <use xlink:href="#myimage2" filter="url(#drop-shadow2)"/> <use xlink:href="#myimage2"/> </svg> </div> </td> <td><img alt="test_form_4 distorded border drop shadow - static example" id="img1...
...4" class="internal default" src="/files/8469/test_form_4_irregular-
shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /></td> </tr> </tbody> </table> html { height:100%; } body { font: 14px/1.286 "lucida grande","lucida sans unicode","dejavu sans",lucida,arial,helvetica,sans-serif; color: rgb(51, 51, 51); height:100%; overflow:hidden; } #img2 { width:100%; height:auto; -moz-filter: drop-shadow(16px 16px 10px black); -webkit-filter: drop-shadow(16px 16px 10px black); -ms-filter: drop-shadow(16px 16px 10px black); filter: drop-shadow(16px 16px 10px black); } #img12 { width:100%; height:auto; -moz-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); -webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); -ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,...
....8)); filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); } table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; border-spacing: 0px; margin: 0px 0px 1.286em; width: 85%; height: 100%; } #irregular-
shape { width: 64%; } table.standard-table th { border: 1px solid rgb(187, 187, 187); padding: 0px 5px; background: none repeat scroll 0% 0% rgb(238, 238, 238); text-align: left; font-weight: bold; } table.standard-table td { padding: 5px; border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; width:25%; height:auto; } #img3, #img13 { width:100%; height:auto; } grayscale() the grayscale() function converts the input image to grayscale.
mask - CSS: Cascading Style Sheets
| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}<geometry-box> = <
shape-box> | fill-box | stroke-box | view-box<compositing-operator> = add | subtract | intersect | exclude<masking-mode> = alpha | luminance | match-sourcewhere <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><mask-source> = <url><length-percentage> = <length> | <percentage><
shape-box> = <box> | margin-boxwhere <image()> = image( <image-tags>?
..., <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-
shape> | <size> ]?
..., <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-
shape> | <size> ]?
...]# , <linear-color-stop><ending-
shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]?
d - SVG: Scalable Vector Graphics
for <glyph>, d is a string containing a series of path commands that define the outline
shape of the glyph.
... for <missing-glyph>, d is a string containing a series of path commands that define the outline
shape of the glyph.
... note: the appearance of a
shape closed with closepath may be different to that of one closed by drawing a line to the origin, using one of the other commands, because the line ends are joined together (according to the stroke-linejoin setting), rather than just being placed at the same coordinates.
... examples html,body,svg { height:100% } <svg viewbox="0 -1 30 11" xmlns="http://www.w3.org/2000/svg"> <!-- an open
shape with the last point of the path different to the first one --> <path stroke="red" d="m 5,1 l -4,8 8,0" /> <!-- an open
shape with the last point of the path matching the first one --> <path stroke="red" d="m 15,1 l -4,8 8,0 -4,-8" /> <!-- a closed
shape with the last point of the path different to the first one --> <path stroke="red" d="m 25,1 l -4,8 8,0 z" /> </svg> specification specification status comment scalable vector graphics (svg) 2the definition of 'd' in that specification.
orient - SVG: Scalable Vector Graphics
the orient attribute indicates how a marker is rotated when it is placed at its position on the
shape.
... <angle> this value indicates that the marker is oriented such that the specified angle is that measured between the
shape's positive x-axis and the marker's positive x-axis.
... note: for example, if a value of 45 is given, then the marker's positive x-axis would be pointing down and right in the
shape's coordinate system.
...the marker is oriented such that the specified angle is that measured between the
shape's positive x-axis and the marker's positive x-axis.
requiredFeatures - SVG: Scalable Vector Graphics
ures: http://www.w3.org/tr/svg11/feature#coreattribute http://www.w3.org/tr/svg11/feature#structure http://www.w3.org/tr/svg11/feature#containerattribute http://www.w3.org/tr/svg11/feature#conditionalprocessing http://www.w3.org/tr/svg11/feature#image http://www.w3.org/tr/svg11/feature#style http://www.w3.org/tr/svg11/feature#viewportattribute http://www.w3.org/tr/svg11/feature#
shape http://www.w3.org/tr/svg11/feature#text http://www.w3.org/tr/svg11/feature#paintattribute http://www.w3.org/tr/svg11/feature#opacityattribute http://www.w3.org/tr/svg11/feature#graphicsattribute http://www.w3.org/tr/svg11/feature#marker http://www.w3.org/tr/svg11/feature#colorprofile http://www.w3.org/tr/svg11/feature#gradient http://www.w3.org/tr/svg11/feature#pattern http://ww...
... http://www.w3.org/tr/svg11/feature#
shape the browser supports the <rect>, <circle>, <line>, <polyline>, <polygon>, <ellipse> and <path> elements.
...roke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-width and color-rendering attributes http://www.w3.org/tr/svg11/feature#opacityattribute the browser supports the opacity, stroke-opacity and fill-opacity attributes http://www.w3.org/tr/svg11/feature#graphicsattribute the browser supports the display, image-rendering, pointer-events,
shape-rendering, text-rendering and visibility attributes http://www.w3.org/tr/svg11/feature#basicgraphicsattribute the browser supports the display and visibility attributes http://www.w3.org/tr/svg11/feature#marker the browser supports the <marker> element http://www.w3.org/tr/svg11/feature#colorprofile the browser supports the <color-profile> element http://www.w3.org/tr/svg11/f...
...esting : http://www.w3.org/tr/svg11/feature#viewportattribute --> <rect class="ko" x="10" y="385" height="25" width="430" /> <rect class="ok" x="10" y="385" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#viewportattribute" /> <text x="20" y="402">http://www.w3.org/tr/svg11/feature#viewportattribute</text> <!-- testing : http://www.w3.org/tr/svg11/feature#
shape --> <rect class="ko" x="10" y="410" height="25" width="430" /> <rect class="ok" x="10" y="410" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#
shape" /> <text x="20" y="427">http://www.w3.org/tr/svg11/feature#
shape</text> <!-- testing : http://www.w3.org/tr/svg11/feature#text --> <rect class="ko" x="10" y="435" height="25" width="430" /> <rect class="ok...
spreadMethod - SVG: Scalable Vector Graphics
the spreadmethod attribute determines how a
shape is filled beyond the defined edges of a gradient.
... two elements are using this attribute: <lineargradient> and <radialgradient> context notes value pad | reflect | repeat initial value pad animatable yes pad this value indicates that the final color of the gradient fills the
shape beyond the gradient's edges.
... defining a gradient's edges by default, a gradient reaches to the edges of the
shape being filled.
... to see the effects of this attribute, you will need to set the size of the gradient smaller than the
shape.
stroke-linejoin - SVG: Scalable Vector Graphics
the stroke-linejoin attribute is a presentation attribute defining the
shape to be used at the corners of paths when they are stroked.
...the arcs
shape is formed by extending the outer edges of the stroke at the join point with arcs that have the same curvature as the outer edges at the join point.
... candidate recommendation definition for
shapes and texts scalable vector graphics (svg) 1.1 (second edition)the definition of 'stroke-linejoin' in that specification.
... recommendation initial definition for
shapes and texts ...
stroke-opacity - SVG: Scalable Vector Graphics
the stroke-opacity attribute is a presentation attribute defining the opacity of the paint server (color, gradient, pattern, etc) applied to the stroke of a
shape.
... it's important to know that the stroke partially covers the fill of a
shape, so a stroke with an opacity different than 1 will partially show the fill underneath.
... candidate recommendation definition for
shapes and texts scalable vector graphics (svg) 1.1 (second edition)the definition of 'stroke-opacity' in that specification.
... recommendation initial definition for
shapes and texts ...
stroke-width - SVG: Scalable Vector Graphics
the stroke-width attribute is a presentation attribute defining the width of the stroke to be applied to the
shape.
... as a presentation attribute, it can be applied to any element but it only has effect on
shapes and text context elements, including: <altglyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <!-- default stroke width: 1 --> <circle cx="5" cy="5" r="3" stroke="green" /> <!-- stroke width as a number --> <circle cx="15" cy="5" r="3" stroke="green" stroke-width="3" /> <!-- stroke width as a percentage --> <circle cx="25" cy="5" r="3" stroke="green" stroke-width="2%" /> </svg> usage notes value <length> | <percentage> default value 1px animatable yes note: a pe...
... candidate recommendation definition for
shapes and texts scalable vector graphics (svg) 1.1 (second edition)the definition of 'stroke-width' in that specification.
... recommendation initial definition for
shapes and texts ...
<a> - SVG: Scalable Vector Graphics
svg's <a> element is a container, which means you can create a link around text (like in html) but also around any
shape.
... @namespace svg url(http://www.w3.org/2000/svg); html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- a link around a
shape --> <a href="/docs/web/svg/element/circle"> <circle cx="50" cy="40" r="35"/> </a> <!-- a link around a text --> <a href="/docs/web/svg/element/text"> <text x="50" y="90" text-anchor="middle"> <circle> </text> </a> </svg> /* as svg does not provide a default visual style for links, it's considered best practice to add some */ @namespace svg url(http://www.w3.org/2000/svg); /* necessary to select only svg <a> elements, and not also html’s.
... class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, document element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events,
shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes most notably: xlink:title aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-des...
...lder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements
shape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<a>' in that specification.
<marker> - SVG: Scalable Vector Graphics
markers are attached to
shapes using the marker-start, marker-mid, and marker-end properties.
... value type: <length> ; default value: 3; animatable: yes orient this attribute defines the orientation of the marker relative to the
shape it is attached to.
...ne; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events,
shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-d...
...lder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements
shape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment svg markersthe definition of '<marker>' in that specification.
Index - Game development
vertex shaders transform
shape positions into 3d drawing coordinates.
... fragment shaders compute the renderings of a
shape's colors and other attributes.
... 35 tiles and tilemaps overview 2d, canvas, games, javascript, static, webgl, tilemap, tiles tilemaps are a very popular technique in 2d game development, consisting of building the game world or level map out of small, regular-
shaped images called tiles.
2D collision detection - Game development
algorithms to detect collision in 2d games depend on the type of
shapes that can collide (e.g.
...generally you will have a simple generic
shape that covers the entity known as a "hitbox" so even though collision may not be pixel perfect, it will look good enough and be performant across multiple entities.
... circle collision another simple
shape for collision detection is between two circles.
Bounding volume collision detection with THREE.js - Game development
using box3 and sphere three.js has objects that represent mathematical volumes and
shapes — for 3d aabb and bounding spheres we can use the box3 and sphere objects.
...this results in a new box mesh representing the bounding box, which shows the bounding box's
shape, and can passed to the previously seen setfromobject method in order to have a bounding box matching the mesh.
... var knot = new three.mesh( new three.torusknotgeometry(0.5, 0.1), new three.meshnormalmaterial({}) ); var knotboxhelper = new three.boxhelper(knot, 0x00ff00); scene.add(knotboxhelper); in order to also have our actual box3 bounding box, we create a new box3 object and make it assume the boxhelper's
shape and position.
GLSL Shaders - Game development
vertex shaders transform
shape positions into 3d drawing coordinates.
... fragment shaders compute the renderings of a
shape's colors and other attributes.
...the 3d coordinate system defines space and the vertices help define
shapes in that space.
Debugging CSS - Learn web development
for example in firefox there are some excellent tools for working visually with css layout, allowing you to inspect and edit grid layouts, flexbox, and
shapes.
...the below table shows the compat data for the
shape-outside property.
...please contribute data for "css.
shape-outside" (depth: 1) to the mdn compatibility data repository.
Add a hitmap on top of an image - Learn web development
<area> elements are empty elements, but do require four attributes:
shape coords
shape takes one of four values: circle, rect, poly, and default.
... (a default <area> occupies the entire image, minus any other hotspots you’ve defined.) the
shape you choose determines the coordinate information you’ll need to provide in coords.
... <map name="example-map-1"> <area
shape="circle" coords="200,250,25" href="page-2.html" alt="circle example" /> <area
shape="rect" coords="10, 5, 20, 15" href="page-3.html" alt="rectangle example" /> </map> step 3: make sure it works for everybody you aren’t done until you test image maps rigorously on many browsers and devices.
JS_DumpHeap
jstrace_object = 0x00, jstrace_string = 0x01, jstrace_symbol = 0x02, jstrace_script = 0x03, //
shape details are exposed through js_trace
shapecyclecollectorchildren.
... jstrace_
shape = 0x04, // the kind associated with a nullptr.
... jstrace_base_
shape = 0x0f, jstrace_jitcode = 0x1f, jstrace_lazy_script = 0x2f, jstrace_type_object = 0x3f, jstrace_last = jstrace_type_object }; description see bug 378261 for detail.
Shell global objects
shapeof(obj) get the
shape of obj (an implementation detail).
... unwrappedobjectshavesame
shape(obj1, obj2) returns true iff obj1 and obj2 have the same
shape, false otherwise.
...each element of the array is either of the form: { node: {object or string}, edge: {string describing edge from node} } , if the node is a javascript object or value; or of the form: { type: {string describing node}, edge: {string describing edge} } , if the node is some internal thing that is not a proper javascript value (like a
shape or a scope chain element).
nsACString_internal
<map id="classes" name="classes"> <area alt="" coords="456,5,605,53" href="http://developer.mozilla.org/en/nsacstring_internal"
shape="rect" title="nsacstring_internal"> <area alt="" coords="415,101,497,149" href="http://developer.mozilla.org/en/nscstring"
shape="rect" title="nscstring"> <area alt="" coords="521,101,689,149" href="http://developer.mozilla.org/en/nsdependentcsubstring"
shape="rect" title="nsdependentcsubstring"> <area alt="" coords="172,197,289,245" href="http://developer.mozilla.org/en/nsfixedcstring"
shape="re...
...ct" title="nsfixedcstring"> <area alt="" coords="315,197,437,245" href="http://developer.mozilla.org/en/nsxpidlcstring"
shape="rect" title="nsxpidlcstring"> <area alt="" coords="461,197,611,245" href="http://developer.mozilla.org/en/nsdependentcstring"
shape="rect" title="nsdependentcstring"> <area alt="" coords="635,197,787,245" href="http://developer.mozilla.org/en/nspromiseflatcstring"
shape="rect" title="nspromiseflatcstring"> <area alt="" coords="173,293,285,341" href="http://developer.mozilla.org/en/nscautostring"
shape="rect" title="nscautostring"> <area alt="" coords="5,389,227,437" href="http://developer.mozilla.org/en/ns_lossyconvertutf16toascii"
shape="rect" title="ns_lossyconvertutf16toascii"> <area alt="" coords="251,389,435,437" href="http://developer.mozilla.org/en/ns_convertutf1...
...6toutf8"
shape="rect" title="ns_convertutf16toutf8"> <area alt="" coords="309,293,445,341" href="http://developer.mozilla.org/en/nsadoptingcstring"
shape="rect" title="nsadoptingcstring"> </map> method overview constructors beginreading endreading beginwriting endwriting data length isempty isvoid isterminated charat operator[] first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char operator= adopt replace replaceascii append appendascii appendliteral(const char appendliteral(c...
nsAString (External)
<map id="classes" name="classes"> <area alt="" coords="963,6,1045,54" href="http://developer.mozilla.org/en/nsastring_(external)"
shape="rect" title="nsastring_(external)"> <area alt="" coords="939,102,1069,150" href="http://developer.mozilla.org/en/nsstringcontainer_(external)"
shape="rect" title="nsstringcontainer_(external)"> <area alt="" coords="548,198,676,246" href="http://developer.mozilla.org/en/nsstring_external"
shape="rect" title="nsstring_external"> <area alt="" coords="700,198,913,246" href="http://developer.mozilla.org/en/nsdependentsubstring_external"
shape="rect" title="nsdependentsubstring_external"> <area alt="" coords="937,19...
...8,1071,246" href="http://developer.mozilla.org/en/promiseflatstring_(external)"
shape="rect" title="promiseflatstring_(external)"> <area alt="" coords="1095,198,1196,246" href="http://developer.mozilla.org/en/nsautostring_(external)"
shape="rect" title="nsautostring_(external)"> <area alt="" coords="5,294,197,342" href="http://developer.mozilla.org/en/nsdependentstring_external"
shape="rect" title="nsdependentstring_external"> <area alt="" coords="221,294,467,342" href="http://developer.mozilla.org/en/ns_convertasciitoutf16_external"
shape="rect" title="ns_convertasciitoutf16_external"> <area alt="" coords="491,294,733,342" href="http://developer.mozilla.org/en/ns_convertutf8toutf16_external"
shape="rect" title="ns_convertutf8toutf16_external"> <area alt="" coords="757,294,869,342" href="http:/...
.../developer.mozilla.org/en/nsliteralstring_(external)"
shape="rect" title="nsliteralstring_(external)"> </map> method overview beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral operator= replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral lowercaseequalsliteral find rfind findchar rfindchar appendint tointeger data members no public members.
nsAString_internal
<map id="classes" name="classes"> <area alt="" coords="415,5,553,53" href="http://developer.mozilla.org/en/nsastring_internal"
shape="rect" title="nsastring_internal"> <area alt="" coords="379,101,451,149" href="http://developer.mozilla.org/en/nsstring"
shape="rect" title="nsstring"> <area alt="" coords="475,101,635,149" href="http://developer.mozilla.org/en/nsdependentsubstring"
shape="rect" title="nsdependentsubstring"> <area alt="" coords="151,197,257,245" href="http://developer.mozilla.org/en/nsfixedstring"
shape="rect" ti...
...tle="nsfixedstring"> <area alt="" coords="284,197,396,245" href="http://developer.mozilla.org/en/nsxpidlstring"
shape="rect" title="nsxpidlstring"> <area alt="" coords="420,197,559,245" href="http://developer.mozilla.org/en/nsdependentstring"
shape="rect" title="nsdependentstring"> <area alt="" coords="583,197,727,245" href="http://developer.mozilla.org/en/nspromiseflatstring"
shape="rect" title="nspromiseflatstring"> <area alt="" coords="152,293,253,341" href="http://developer.mozilla.org/en/nsautostring"
shape="rect" title="nsautostring"> <area alt="" coords="5,389,192,437" href="http://developer.mozilla.org/en/ns_convertasciitoutf16"
shape="rect" title="ns_convertasciitoutf16"> <area alt="" coords="216,389,400,437" href="http://developer.mozilla.org/en/ns_convertutf8toutf16"
shape="rect" tit...
...le="ns_convertutf8toutf16"> <area alt="" coords="277,293,405,341" href="http://developer.mozilla.org/en/nsadoptingstring"
shape="rect" title="nsadoptingstring"> </map> method overview constructors beginreading endreading beginwriting endwriting data length isempty isvoid isterminated charat operator[] first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char operator= adopt replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= inse...
Work with animations - Firefox Developer Tools
the bar is
shaped to reflect the easing effect used for the animation.
... the img#icon animation: animated the filter and transform properties, to scale the icon and color it lasted 750ms, had an enddelay of 100ms used the compositor thread was given an easing value of ease-in: you can see this by the concave
shape of the green bar.
... the span#note animation: animated the width and opacity properties, to make the name gradually appear lasted 500ms, and had a delay of 150ms was given an easing value of ease-out: you can see this by the convex
shape of the green bar.
CanvasRenderingContext2D.lineJoin - Web APIs
the canvasrenderingcontext2d.linejoin property of the canvas 2d api determines the
shape used to join two line segments where they meet.
... "round" rounds off the corners of a
shape by filling an additional sector of disc centered at the common endpoint of connected segments.
... "miter" connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-
shaped area.
CanvasRenderingContext2D.scale() - Web APIs
for instance, a scaling factor of 0.5 results in a unit size of 0.5 pixels;
shapes are thus drawn at half the normal size.
... similarly, a scaling factor of 2.0 increases the unit size so that one unit becomes two pixels;
shapes are thus drawn at twice the normal size.
... examples scaling a
shape this example draws a scaled rectangle.
CanvasRenderingContext2D.shadowColor - Web APIs
examples adding a shadow to
shapes this example adds a shadow to two squares; the first one is filled, and the second one is stroked.
... the shadowcolor property sets the shadows' color, while shadowoffsetx and shadowoffsety set their position relative to the
shapes.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowoffsetx = 10; ctx.shadowoffsety = 10; // filled rectangle ctx.fillrect(20, 20, 100, 100); // stroked rectangle ctx.linewidth = 6; ctx.strokerect(170, 20, 100, 100); result shadows on translucent
shapes a shadow's opacity is affected by the transparency level of its parent object (even when shadowcolor specifies a completely opaque value).
SVGGeometryElement - Web APIs
this includes paths and the basic
shapes.
... svggeometryelement.ispointinfill() determines whether a given point is within the fill
shape of an element.
... svggeometryelement.ispointinstroke() determines whether a given point is within the stroke
shape of an element.
WebGL model view projection - Web APIs
resize the window and watch as the box skews out of
shape.
...that's an additional face added to our object because the rotation of our
shape has caused that corner to extend outside clip space, thus causing the corner to be clipped away.
...the introduction of this parameter finally solves the problem wherein the model gets warped as the canvas is resized and re
shaped.
Web Audio API - Web APIs
general audio graph definition general containers and definitions that
shape audio graphs in web audio api usage.
... wave
shapernode the wave
shapernode interface represents a non-linear distorter.
... periodicwave describes a periodic waveform that can be used to
shape the output of an oscillatornode.
XRBoundedReferenceSpace.boundsGeometry - Web APIs
this may be done by walking the border of the space they wish to use, or by drawing the
shape of their room using their xr input device.
... boundary
shape the
shape defined by boundsgeometry may be as simple as a square or as complex as is needed, potentially including concave and/or convex sections.
... although some samples render a mesh or other
shape to display the bounds to the user, in a real-world application, you shouldn't do this.
-webkit-box-reflect - CSS: Cascading Style Sheets
, <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-
shape> | <size> ]?
..., <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-
shape> | <size> ]?
...]# , <linear-color-stop><ending-
shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
additive-symbols - CSS: Cascading Style Sheets
, <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-
shape> | <size> ]?
..., <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-
shape> | <size> ]?
...]# , <linear-color-stop><ending-
shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
negative - CSS: Cascading Style Sheets
, <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-
shape> | <size> ]?
..., <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-
shape> | <size> ]?
...]# , <linear-color-stop><ending-
shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
pad - CSS: Cascading Style Sheets
, <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-
shape> | <size> ]?
..., <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-
shape> | <size> ]?
...]# , <linear-color-stop><ending-
shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
prefix - CSS: Cascading Style Sheets
, <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-
shape> | <size> ]?
..., <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-
shape> | <size> ]?
...]# , <linear-color-stop><ending-
shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
suffix - CSS: Cascading Style Sheets
, <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-
shape> | <size> ]?
..., <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-
shape> | <size> ]?
...]# , <linear-color-stop><ending-
shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
symbols - CSS: Cascading Style Sheets
, <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-
shape> | <size> ]?
..., <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-
shape> | <size> ]?
...]# , <linear-color-stop><ending-
shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
background-image - CSS: Cascading Style Sheets
, <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-
shape> | <size> ]?
..., <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-
shape> | <size> ]?
...]# , <linear-color-stop><ending-
shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
background - CSS: Cascading Style Sheets
, <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-
shape> | <size> ]?
..., <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-
shape> | <size> ]?
...]# , <linear-color-stop><ending-
shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
border-image-source - CSS: Cascading Style Sheets
, <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-
shape> | <size> ]?
..., <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-
shape> | <size> ]?
...]# , <linear-color-stop><ending-
shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
clip - CSS: Cascading Style Sheets
/* keyword value */ clip: auto; /* <
shape> values */ clip: rect(1px 10em 3rem 2ch); clip: rect(1px, 10em, 3rem, 2ch); /* global values */ clip: inherit; clip: initial; clip: unset; syntax note: where possible, authors are encouraged to use the newer clip-path property instead.
... values <<
shape>()> a rectangular <<
shape>()> of the form rect(<top> <right> <bottom> <left>).
... formal definition initial valueautoapplies toabsolutely positioned elementsinheritednocomputed valueauto if specified as auto, otherwise a rectangle with four values, each of which is auto if specified as auto or the computed length otherwiseanimation typea rectangle formal syntax <
shape> | autowhere <
shape> = rect(<top>, <right>, <bottom>, <left>) examples clipping an image css .dotted-border { border: dotted; position: relative; width: 536px; height: 350px; } #top-left, #middle, #bottom-right { position: absolute; top: 0; } #top-left { left: 360px; clip: rect(0 175px 113px 0); } #middle { left: 280px; clip: rect(119px 255px 229px 80px); } #bottom-ri...
cross-fade() - CSS: Cascading Style Sheets
, <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-
shape> | <size> ]?
..., <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-
shape> | <size> ]?
...]# , <linear-color-stop><ending-
shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
mask-border-source - CSS: Cascading Style Sheets
, <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-
shape> | <size> ]?
..., <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-
shape> | <size> ]?
...]# , <linear-color-stop><ending-
shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
mask-image - CSS: Cascading Style Sheets
, <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-
shape> | <size> ]?
..., <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-
shape> | <size> ]?
...]# , <linear-color-stop><ending-
shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
Object.create() - JavaScript
//
shape - superclass function
shape() { this.x = 0; this.y = 0; } // superclass method
shape.prototype.move = function(x, y) { this.x += x; this.y += y; console.info('
shape moved.'); }; // rectangle - subclass function rectangle() {
shape.call(this); // call super constructor.
... } // subclass extends superclass rectangle.prototype = object.create(
shape.prototype); //if you don't set rectangle.prototype.constructor to rectangle, //it will take the prototype.constructor of
shape (parent).
...rectangle.prototype.constructor = rectangle; var rect = new rectangle(); console.log('is rect an instance of rectangle?', rect instanceof rectangle); // true console.log('is rect an instance of
shape?', rect instanceof
shape); // true rect.move(1, 1); // outputs, '
shape moved.' if you wish to inherit from multiple objects, then mixins are a possibility.
clip-path - SVG: Scalable Vector Graphics
use> html,body,svg { height:100% } <svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <clippath id="myclip" clippathunits="objectboundingbox"> <circle cx=".5" cy=".5" r=".5" /> </clippath> <!-- top-left: apply a custom defined clipping path --> <rect x="1" y="1" width="8" height="8" stroke="green" clip-path="url(#myclip)" /> <!-- top-right: apply a css basic
shape on a fill-box geometry.
... this is the same as having a custom clipping path with a clippathunits set to objectboundingbox --> <rect x="11" y="1" width="8" height="8" stroke="green" clip-path="circle() fill-box" /> <!-- bottom-left --> <rect x="1" y="11" width="8" height="8" stroke="green" clip-path="circle() stroke-box" /> <!-- bottom-right: apply a css basic
shape on a view-box geometry.
... this is the same as having a custom clipping path with a clippathunits set to userspaceonuse --> <rect x="11" y="11" width="8" height="8" stroke="green" clip-path="circle() view-box" /> </svg> usage notes value <url> | [ <basic-
shape> || <geometry-box> ] | none default value none animatable yes <geometry-box> an extra information to tell how a <basic-
shape> is applied to an element: fill-box indicates to use the object bounding box; stroke-box indicates to use the object bounding box extended with the stroke; view-box indicates to use the nearest svg viewport as the reference box.
fill-opacity - SVG: Scalable Vector Graphics
the fill-opacity attribute is a presentation attribute defining the opacity of the paint server (color, gradient, pattern, etc) applied to a
shape.
... candidate recommendation definition for
shapes and texts scalable vector graphics (svg) 1.1 (second edition)the definition of 'fill-opacity' in that specification.
... recommendation initial definition for
shapes and texts ...
stroke-dasharray - SVG: Scalable Vector Graphics
the stroke-dasharray attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the
shape; note: as a presentation attribute, stroke-dasharray can be used as a css property.
... candidate recommendation definition for
shapes and texts scalable vector graphics (svg) 1.1 (second edition)the definition of 'stroke-dasharray' in that specification.
... recommendation initial definition for
shapes and texts ...
stroke-linecap - SVG: Scalable Vector Graphics
the stroke-linecap attribute is a presentation attribute defining the
shape to be used at the end of open subpaths when they are stroked.
... candidate recommendation definition for
shapes and texts scalable vector graphics (svg) 1.1 (second edition)the definition of 'stroke-linecap' in that specification.
... recommendation initial definition for
shapes and texts ...
stroke - SVG: Scalable Vector Graphics
the stroke attribute is a presentation attribute defining the color (or any svg paint servers like gradients or patterns) used to paint the outline of the
shape; note: as a presentation attribute stroke can be used as a css property.
... candidate recommendation definition for
shapes and texts.
... recommendation initial definition for
shapes and texts browser compatibility the compatibility table on this page is generated from structured data.
<circle> - SVG: Scalable Vector Graphics
the <circle> svg element is an svg basic
shape, used to draw circles based on a center point and a radius.
...y: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events,
shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-d...
...y, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic
shape element, graphics element,
shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2the definition of '<circle>' in that specification.
<ellipse> - SVG: Scalable Vector Graphics
the <ellipse> element is an svg basic
shape, used to create ellipses based on a center coordinate, and both their x and y radius.
...y: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events,
shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-d...
...y, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic
shape element, graphics element,
shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2the definition of '<ellipse>' in that specification.
<line> - SVG: Scalable Vector Graphics
the <line> element is an svg basic
shape used to create a line connecting two points.
...y: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events,
shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-d...
...y, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic
shape element, graphics element,
shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2the definition of '<line>' in that specification.
<rect> - SVG: Scalable Vector Graphics
the <rect> element is a basic svg
shape that draws rectangles, defined by their position, width, and height.
...y: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events,
shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-d...
...y, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic
shape element, graphics element,
shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2the definition of '<rect>' in that specification.
<textPath> - SVG: Scalable Vector Graphics
to render text along the
shape of a <path>, enclose the text in a <textpath> element that has an href attribute with a reference to the <path> element.
... </textpath> </text> </svg> attributes href the url to the path or basic
shape on which to render the text.
...y: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events,
shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-d...
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
path commands to add path coordinate data to previous command implementation status unknown not render <path>, <polygon> and <polyline> with no data implementation status unknown svgpathseg*, svganimatedpathdata and related methods removed from svgpathelement implementation status unknown d attribute as css property implementation status unknown basic
shapes change notes pathlength attribute for all basic
shapes implementation status unknown svganimatedpoints.animatedpoints as alias of svganimatedpoints.points implementation status unknown auto behavior for rx and ry in <ellipse> implementation status unknown text change notes text-decoration-fill and text-decorati...
...on-stroke properties not implemented yet (bug 1303569) inline-size attribute for <text> implementation status unknown
shape-inside property inplementation status unknown
shape-subtract property inplementation status unknown white-space implementation status unknown deprecated xml:space attribute implementation status unknown kerning property removed implementation status unknown path attribute for <textpath> implemented (bug 1446617) reference basic
shapes to <textpath> implementation status unknown side attribute for <textpath> implemented (bug 1446650) render characters for one loop of a single closed path, effected by the startoffset attribute and text-anchor property im...
...79659) svgpaint removed implementation status unknown fill and stroke taking multiple paints implementation status unknown z-index not implemented (bug 360148 child(<integer>) paint value implementation status unknown display of zero-length subpaths depends on stroke-linecap attribute implementation status unknown markers on all
shapes implementation status unknown <marker> element display defined in ua style sheet implementation status unknown only single paints for fills and strokes implementation status unknown color change notes color managed images implementation status unknown rgba, hsl, lab, icc named colors and device colors implementation statu...
Fills and Strokes - SVG: Scalable Vector Graphics
« previousnext » there are several ways to color
shapes (including specifying attributes on the object) using inline css, an embedded css section, or an external css file.
...this controls the
shape of the ends of lines.
... there are additional stroke and fill properties available, including fill-rule, which specifies how to color in
shapes that overlap themselves; stroke-miterlimit, which determines if a stroke should draw miters; and stroke-dashoffset, which specifies where to start a dasharray on a line.
Introduction - SVG: Scalable Vector Graphics
it can be used to create an image either by specifying all the lines and
shapes necessary, by modifying already existing raster images, or by a combination of both.
...a simple svg document consists of nothing more than the <svg> root element and several basic
shapes that build a graphic together.
... in addition there is the <g> element, which is used to group several basic
shapes together.
XUL user interfaces - Archive of obsolete content
in this demonstration, you see the standard rectangular
shapes that are common to most user interfaces.
... mozilla also supports a specialized graphics language for creating
shapes, using css stylesheets to specify the style.
Index - Archive of obsolete content
394 making it into a dynamic overlay and packaging it up for distribution add-ons, extensions now that we have a static overlay we're in good
shape to create a xpi package that installs our extension as a dynamic overlay.
... 2132 -ms-wrap-margin css, css property, css:microsoft extensions, non-standard, reference, recipe:css-property the -ms-wrap-margin css property is a microsoft extension that specifies a margin that offsets the inner wrap
shape from other
shapes.
Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
bird's eye view <map id="loaddiagrammap" name="loaddiagrammap"><area alt="(13) docontent()" coords="534,239,715,300" href="#nsiexternalhelperappservice::docontent"> <area alt="(10) getcategoryentry()" coords="575,418,821,418,821,455,629,455,629,484,575,484" href="#categorymanager"
shape="poly"> <area alt="(12)" coords="539,133,583,163" href="#stream-converter"> <area alt="(11)" coords="485,133,537,163" href="#contenthandler"> <area alt="(9)" coords="445,132,484,165" href="#nsdocumentopeninfo::dispatchcontent"> <area alt="(8)" coords="405,133,439,162" href="#onstartrequest-innards"> <area alt="(7) onstartrequest()" coords="639,129,703,129,703,165,833,165,833,204,639,204" href="#o...
...nstartrequest"
shape="poly"> <area alt="(6) asyncopen()" coords="637,121,709,121,709,96,783,96,783,58,637,58" href="#asyncopen"
shape="poly"> <area alt="(5) open()" coords="311,306,432,371" href="#open"> <area alt="(4)" coords="90,384,127,417" href="#openuri-innards"> <area alt="(0) registercontentlistener()" coords="37,474,346,474,346,505,88,505,88,535,37,535" href="#registercontentlistener"
shape="poly"> <area alt="(3) openuri() (nsuriloader)" coords="5,207,312,269" href="#openuri"> <area alt="(2)" coords="102,114,139,148" href="#internalload"> <area alt="(1) loaduri/onlinkclick" coords="77,5,449,59" href="#loaduri"> <area alt="nsiexternalhelperappservice" coords="527,305,839,339" href="#nsiexternalhelperappservice"> <area alt="category manager" coords="683,467,807,527" href="#nscategorymanag...
3D collision detection - Game development
this body has properties such as velocity, position, rotation, torque, etc., and also a physical
shape.
... this
shape is the one that is considered in the collision detection calculations.
Explaining basic 3D theory - Game development
coordinate system 3d essentially is all about representations of
shapes in a 3d space, with a coordinate system used to calculate their position.
... you can build geometry using this information — here is an example of a cube: a face of the given
shape is a plane between vertices.
3D games on the Web - Game development
explaining the basic 3d theory the basics of 3d theory centers around
shapes represented in a 3d space, with a coordinate system being used to calculate their positions.
...they can be split into vertex shaders and fragment shaders (or pixel shaders) — the former transforms
shape positions to real 3d drawing coordinates, while the latter computes rendering colors and other attributes.
Create the Canvas and draw on it - Game development
instead of using fill() and filling the
shapes with colors, we can use stroke() to only colour the outer stroke.
... compare your code here's the full source code of the first lesson, running live in a jsfiddle: exercise: try changing the size and color of the given
shapes.
Index - MDN Web Docs Glossary: Definitions of Web-related terms
65 canvas codingscripting, glossary, graphics, html, javascript the canvas element is part of html5 and allows for dynamic, scriptable rendering of 2d and 3d
shapes and bitmap images.
... 250 ligature css, design, glossary a ligature is a joining of two characters into one
shape.
Index - Learn web development
105 advanced styling effects article, beginner, blend modes, boxes, css, codingscripting, filters, styling, box shadows, effects,
shapes we hope this article was fun — playing with shiny toys generally is, and it is always interesting to see what kinds of advanced styling tools are becoming available in modern browsers.
... 295 starting our svelte todo list app beginner, components, frameworks, javascript, learn, svelte, client-side, state with our markup and styling in place our todo list app is starting to take
shape, and we have everything ready so that we can start to focus on the features we have to implement.
nsACString (External)
class declaration <map id="classes" name="classes"><area alt="" coords="1005,6,1096,54" href="http://developer.mozilla.org/en/nsacstring_(external)"
shape="rect" title="nsacstring_(external)"> <area alt="" coords="980,102,1121,150" href="http://developer.mozilla.org/en/nscstringcontainer_(external)"
shape="rect" title="nscstringcontainer_(external)"> <area alt="" coords="571,198,707,246" href="http://developer.mozilla.org/en/nscstring_external"
shape="rect" title="nscstring_external"> <area alt="" coords="731,198,955,246" href="http://developer.mozilla.org/en/nsdependentcsubstring_external"
shape="rect" title="nsdependentcsubstring_external"> <area alt="" coords="979,198,1123,246" href="http://developer.mozilla.org/en/promiseflatcstring_(external)"
shape="rect" title="promiseflatcstring...
..._(external)"> <area alt="" coords="1147,198,1259,246" href="http://developer.mozilla.org/en/nscautostring_(external)"
shape="rect" title="nscautostring_(external)"> <area alt="" coords="5,294,208,342" href="http://developer.mozilla.org/en/nsdependentcstring_external"
shape="rect" title="nsdependentcstring_external"> <area alt="" coords="232,294,475,342" href="http://developer.mozilla.org/en/ns_convertutf16toutf8_external"
shape="rect" title="ns_convertutf16toutf8_external"> <area alt="" coords="499,294,779,342" href="http://developer.mozilla.org/en/ns_lossyconvertutf16toascii_external"
shape="rect" title="ns_lossyconvertutf16toascii_external"> <area alt="" coords="803,294,925,342" href="http://developer.mozilla.org/en/nsliteralcstring_(external)"
shape="rect" title="nsliteralcstring_(external)"...
CanvasRenderingContext2D.arc() - Web APIs
const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(100, 75, 50, 0, 2 * math.pi); ctx.stroke(); result different
shapes demonstrated this example draws various
shapes to show what is possible with arc().
... html <canvas width="150" height="200"></canvas> javascript const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); // draw
shapes for (let i = 0; i <= 3; i++) { for (let j = 0; j <= 2; j++) { ctx.beginpath(); let x = 25 + j * 50; // x coordinate let y = 25 + i * 50; // y coordinate let radius = 20; // arc radius let startangle = 0; // starting point on circle let endangle = math.pi + (math.pi * j) / 2; // end point on circle let anticlockwise = i % 2 == 1; // draw anticlockwise ctx.arc(x, y, radius, startangle, endangle, anticlockwise); if (i > 1) { ctx.fill(); } else { ...
CanvasRenderingContext2D.closePath() - Web APIs
if the
shape has already been closed or has only one point, this function does nothing.
...after that, the triangle's base is created with the closepath() method, which automatically connects the
shape's first and last points.
CanvasRenderingContext2D.fillStyle - Web APIs
the canvasrenderingcontext2d.fillstyle property of the canvas 2d api specifies the color, gradient, or pattern to use inside
shapes.
... examples changing the fill color of a
shape this example applies a blue fill color to a rectangle.
CanvasRenderingContext2D.lineCap - Web APIs
the canvasrenderingcontext2d.linecap property of the canvas 2d api determines the
shape used to draw the end points of lines.
... examples changing the
shape of line caps this example rounds the end caps of a straight line.
CanvasRenderingContext2D.resetTransform() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw a rotated rectangle ctx.rotate(45 * math.pi / 180); ctx.fillrect(60, 0, 100, 30); // reset transformation matrix to the identity matrix ctx.resettransform(); result continuing with a regular matrix whenever you're done drawing transformed
shapes, you should call resettransform() before rendering anything else.
... in this example, the first two
shapes are drawn with a skew transformation, and the last two are drawn with the identity (regular) transformation.
CanvasRenderingContext2D.strokeStyle - Web APIs
the canvasrenderingcontext2d.strokestyle property of the canvas 2d api specifies the color, gradient, or pattern to use for the strokes (outlines) around
shapes.
... examples changing the stroke color of a
shape this example applies a blue stroke color to a rectangle.
GlobalEventHandlers.oncontextmenu - Web APIs
is it disabled?<p> javascript window.oncontextmenu = (e) => { e.preventdefault(); } result pausing an animation this example pauses a spinning
shape whenever you open the context menu.
... html <div class="
shape">spinning</div> <p class="note" hidden>click to unpause.</p> css @keyframes spin { from { transform: rotate(0); } to { transform: rotate(1turn); } } .
shape { width: 8em; height: 8em; display: flex; align-items: center; justify-content: center; animation: spin 18s linear infinite; background: lightsalmon; border-radius: 42%; margin: 1em; } .paused { background-color: #ddd; } .paused .
shape { animation-play-state: paused; } javascript function pause(e) { body.classlist.add('paused'); note.removeattribute('hidden'); } function play(e) { body.classlist.remove('paused'); note.setattribute('hidden', ''); } const body = document.queryselector('body'); const note = document.queryselector('.note'); window.oncontextmenu = p...
HTMLAnchorElement - Web APIs
htmlanchorelement.
shape is a domstring representing the
shape of the active area.
... the following properties are now obsolete: charset, coords, name, rev, and
shape.
HTMLImageElement.alt - Web APIs
</p> </div> css the main feature of the css here is the use of clip-path and
shape-outside to wrap the text around the icon in an appealing way.
... .container { max-width: 500px; } .pageinfo-badge { width: 9em; padding-right: 1em; float: left; clip-path: polygon(100% 0, 100% 50%, 90% 70%, 80% 80%, 70% 90%, 50% 100%, 0 100%, 0 0);
shape-outside: polygon(100% 0, 100% 50%, 90% 70%, 80% 80%, 70% 90%, 50% 100%, 0 100%, 0 0); } .contents { margin-top: 1em; font: 16px arial,helvetica,verdana,sans-serif; } result other images images simply showing objects or scenes should have alt text describing what's seen in the image.
OscillatorNode.setPeriodicWave() - Web APIs
the setperiodicwave() method of the oscillatornode interface is used to point to a periodicwave defining a periodic waveform that can be used to
shape the oscillator's output, when type is custom.
... syntax oscillatornode.setperiodicwave(wave); parameters wave a periodicwave object representing the waveform to use as the
shape of the oscillator's output.
WebGLRenderingContext.enableVertexAttribArray() - Web APIs
this code sets the buffer of vertexes that will be used to draw the triangles of the
shape by calling bindbuffer().
... with the association in place between the vertex buffer for our
shape and the avertexposition attribute used to deliver vertexes one by one into the vertex shader, we're ready to draw the
shape by calling drawarrays().
WebGL tutorial - Web APIs
adding 2d content to a webgl context how to render simple flat
shapes using webgl.
... using shaders to apply color in webgl demonstrates how to add color to
shapes using shaders.
Using bounded reference spaces - Web APIs
as this suggests, the safe area is not required to be convex, but may have any number of indentations or extrusions, as long as it's a contiguous
shape, note that the coordinates of the origin here, (0, 0), are indicative of the fact that the boundaries are defined at floor level and are essentially a 2d
shape on the floor, like an invisible fence used to keep pets from getting away from home.
...by listing the points in clockwise order, the boundary is placed inside the defined
shape.
Using feature queries - CSS: Cascading Style Sheets
to do so, you can include a list of features to test for, separated by and keywords: @supports (property1: value) and (property2: value) { css rules to apply } for example, if the css you want to run requires that the browser supports css
shapes and css grid, you could create a rule which checks for both of these things.
... the following rule will only return true if both
shape-outside: circle() and display: grid are supported by the browser.
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
@media (min-width: 500px) { .wrapper { grid-template-columns: 1fr 3fr; grid-template-areas: "header header" "nav nav" "sidebar content" "ad footer"; } nav ul { display: flex; justify-content: space-between; } } you can see the layout taking
shape in the value of grid-template-areas.
...tent { grid-column: col-start 3 / span 8; grid-row: 2 / 4; } .side { grid-column: col-start 11 / span 2; grid-row: 2; } .ad { grid-column: col-start 11 / span 2; grid-row: 3; } .main-footer { grid-column: col-start / span 12; } nav ul { flex-direction: column; } } once again the grid inspector is useful to help us see how our layout has taken
shape.
CSS reference - CSS: Cascading Style Sheets
mation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-function@annotationannotation()attr()b::backdropbackdrop-filterbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-size<basic-
shape>::before (:before)bleed (@page)<blend-mode>block-sizeblur()borderborder-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom...
...artscroll-margin-leftscroll-margin-rightscroll-margin-topscroll-paddingscroll-padding-blockscroll-padding-block-endscroll-padding-block-startscroll-padding-bottomscroll-padding-inlinescroll-padding-inline-endscroll-padding-inline-startscroll-padding-leftscroll-padding-rightscroll-padding-topscroll-snap-alignscroll-snap-stopscroll-snap-typescrollbar-colorscrollbar-width::selectionselector()sepia()<
shape>
shape-image-threshold
shape-margin
shape-outsidesize (@page)skew()skewx()skewy()::slottedspeak-as (@counter-style)src (@font-face)steps()<string>@stylesetstyleset()@stylisticstylistic()suffix (@counter-style)@supports@swashswash()symbols (@counter-style)symbols()system (@counter-style)ttab-sizetable-layout:targettarget-counter()target-counters()target-text()text-aligntext-align-lasttext-combine-upr...
WebKit CSS extensions - CSS: Cascading Style Sheets
ustify-content -webkit-justify-items -webkit-justify-self -webkit-line-break m -webkit-mask -webkit-mask-clip -webkit-mask-composite -webkit-mask-image -webkit-mask-origin -webkit-mask-position -webkit-mask-repeat -webkit-mask-size o-r -webkit-opacity -webkit-order -webkit-perspective -webkit-perspective-origin -webkit-ruby-position s -webkit-scroll-snap-type -webkit-
shape-image-threshold -webkit-
shape-margin -webkit-
shape-outside t -epub-text-decoration -webkit-text-color-decoration -webkit-text-decoration-line -webkit-text-decoration-style -epub-text-emphasis -webkit-text-emphasis -epub-text-emphasis-color -webkit-text-emphasis-color -webkit-text-emphasis-position -epub-text-emphasis-style -webkit-text-emphasis-style -webkit-text-justify -webki...
...ction -webkit-flow-from -webkit-flow-into -webkit-grid-columns (see grid-column) -webkit-grid-rows (see grid-row) -webkit-hyphenate-charset -webkit-image-set (see image-set()) -webkit-mask-attachment -webkit-match-nearest-mail-blockquote-color -webkit-overflow-scrolling -webkit-region-break-after -webkit-region-break-before -webkit-region-break-inside -webkit-region-fragment -webkit-
shape-inside -webkit-touch-callout (see touch-action) background-origin-x (unprefixed!) background-origin-y (unprefixed!) * still supported in the safari technology preview, but not in a generally released browser.
font-optical-sizing - CSS: Cascading Style Sheets
syntax /* keyword values */ font-optical-sizing: none; font-optical-sizing: auto; /* default */ /* global values */ font-optical-sizing: inherit; font-optical-sizing: initial; font-optical-sizing: unset; values none the browser will not modify the
shape of glyphs for optimal viewing.
... auto the browser will modify the
shape of glyphs for optimal viewing.
paint-order - CSS: Cascading Style Sheets
the paint-order css property lets you control the order in which the fill and stroke (and painting markers) of text content and
shapes are drawn.
... note: in the case of this property, markers are only appropriate when drawing svg
shapes involving the use of the marker-* properties (e.g.
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
svg (scalable vector graphics) lets you draw images using commands that draw specific
shapes, patterns, and lines to produce an image.
...if, for example, you indicate success or failure of an operation by changing the color of a
shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly.
Expressions and operators - JavaScript
suppose you define the following variables: var myfun = new function('5 + 2'); var
shape = 'round'; var size = 1; var foo = ['apple', 'mango', 'orange']; var today = new date(); the typeof operator returns the following results for these variables: typeof myfun; // returns "function" typeof
shape; // returns "string" typeof size; // returns "number" typeof foo; // returns "object" typeof today; // returns "object" typeof doesntexist; // returns "un...
... type of value the property contains: typeof document.lastmodified; // returns "string" typeof window.length; // returns "number" typeof math.ln2; // returns "number" for methods and functions, the typeof operator returns results as follows: typeof blur; // returns "function" typeof eval; // returns "function" typeof parseint; // returns "function" typeof
shape.split; // returns "function" for predefined objects, the typeof operator returns results as follows: typeof date; // returns "function" typeof function; // returns "function" typeof math; // returns "object" typeof option; // returns "function" typeof string; // returns "function" void the void operator is used in either of the following ways: void (expression) void expression ...
Object.prototype.__proto__ - JavaScript
examples using __proto__ var circle = function () {}; var
shape = {}; var circle = new circle(); // set the object prototype.
...
shape.__proto__ = circle; // get the object prototype console.log(
shape.__proto__ === circle); // true var
shape = function () {}; var p = { a: function () { console.log('aaa'); } };
shape.prototype.__proto__ = p; var circle = new
shape(); circle.a(); // aaa console.log(
shape.prototype === circle.__proto__); // true // or var
shape = function () {}; var p = { a: function () { console.log('a'); } }; var circle = new
shape(); circle.__proto__ = p; circle.a(); // a console.log(
shape.prototype === circle.__proto__); // false // or function test() {}; test.prototype.myname = function () { console.log('myname'); }; var a = new test(); console.log(a.__proto__ === test.prototype); ...
Image file type and format guide - Web media technologies
svg (scalable vector graphics) svg is an xml-based vector graphics format that specifies the contents of an image as a set of drawing commands that create
shapes, lines, apply colors, filters, and so forth.
...if you do choose a lossy format, such as jpeg or lossy webp, carefully weigh the compression level to avoid causing text or other
shapes to become fuzzy or unclear.
Media - Progressive web apps (PWAs)
the cursor property specifies the
shape of the pointer: some of the common
shapes are as follows.
... place your mouse over the items in this list to see the actual pointer
shapes in your browser: selector selects pointer indicating a link wait indicating that the program cannot accept input progress indicating that the program is working, but can still accept input default the default (usually an arrow) an outline property creates an outline that is often used to indicate keyboard focus.
clip-rule - SVG: Scalable Vector Graphics
the following fragment of code will cause an evenodd clipping rule to be applied to the clipping path because clip-rule is specified on the <path> element that defines the clipping
shape: <g> <clippath id="myclip"> <path d="..." clip-rule="evenodd" /> </clippath> <rect clip-path="url(#myclip)" ...
... /> </g> whereas the following fragment of code will not cause an evenodd clipping rule to be applied because the clip-rule is specified on the referencing element, not on the object defining the clipping
shape: <g> <clippath id="myclip"> <path d="..." /> </clippath> <rect clip-path="url(#myclip)" clip-rule="evenodd" ...
cx - SVG: Scalable Vector Graphics
> <radialgradient cx="25%" id="mygradient"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cx="50" cy="50" r="45"/> <ellipse cx="150" cy="50" rx="45" ry="25" /> <rect x="205" y="5" width="90" height="90" fill="url(#mygradient)" /> </svg> circle for <circle>, cx defines the x-axis coordinate of the center of the
shape.
... ellipse for <ellipse>, cx defines the x-axis coordinate of the center of the
shape.
cy - SVG: Scalable Vector Graphics
<radialgradient cy="25%" id="mygradient"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cy="50" cx="50" r="45"/> <ellipse cy="150" cx="50" rx="45" ry="25" /> <rect x="5" y="205" width="90" height="90" fill="url(#mygradient)" /> </svg> circle for <circle>, cy defines the y-axis coordinate of the center of the
shape.
... ellipse for <ellipse>, cy defines the y-axis coordinate of the center of the
shape.
href - SVG: Scalable Vector Graphics
value <url> default value none animatable yes mpath for <mpath>, href defines a url referring to the <path> element or basic
shape which defines the motion path.
... value <url> default value none animatable no textpath for <textpath>, href defines a url referring to the <path> element or basic
shape onto which the text will be rendered if no path attribute is provided.
in - SVG: Scalable Vector Graphics
in many cases, the fillpaint is opaque everywhere, but that might not be the case if a
shape is painted with a gradient or pattern which itself includes transparent or semi-transparent parts.
...in many cases, the strokepaint is opaque everywhere, but that might not be the case if a
shape is painted with a gradient or pattern which itself includes transparent or semi-transparent parts.
marker-end - SVG: Scalable Vector Graphics
the marker-end attribute defines the arrowhead or polymarker that will be drawn at the final vertex of the given
shape.
... for all
shape elements, except <polyline> and <path>, the last vertex is the same as the first vertex.
marker-start - SVG: Scalable Vector Graphics
the marker-start attribute defines the arrowhead or polymarker that will be drawn at the first vertex of the given
shape.
... for all
shape elements, except <polyline> and <path>, the last vertex is the same as the first vertex.
pathLength - SVG: Scalable Vector Graphics
value <number> default value none animatable yes polygon for <polygon>, pathlength lets authors specify a total length for the
shape, in user units.
... value <number> default value none animatable yes polyline for <polyline>, pathlength lets authors specify a total length for the
shape, in user units.
stroke-dashoffset - SVG: Scalable Vector Graphics
candidate recommendation definition for
shapes and texts scalable vector graphics (svg) 1.1 (second edition)the definition of 'stroke-dashoffset' in that specification.
... recommendation initial definition for
shapes and texts ...
stroke-miterlimit - SVG: Scalable Vector Graphics
candidate recommendation definition for
shapes and texts scalable vector graphics (svg) 1.1 (second edition)the definition of 'stroke-miterlimit' in that specification.
... recommendation initial definition for
shapes and texts ...
vector-effect - SVG: Scalable Vector Graphics
the default rendering behaviour is used which is to first fill the geometry of a
shape with a specified paint, then stroke the outline with a specified paint.
...normally stroking involves calculating stroke outline of the
shapeĘĽs path in current user coordinate system and filling that outline with the stroke paint (color or gradient).
y1 - SVG: Scalable Vector Graphics
the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector start at the top left corner of the bounding box of the
shape it is applied to.
... --> <lineargradient y1="0%" id="g0"> <stop offset="5%" stop-color="black" /> <stop offset="50%" stop-color="red" /> <stop offset="95%" stop-color="black" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at the bottom left corner of the bounding box of the
shape it is applied to.
y2 - SVG: Scalable Vector Graphics
the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector end at the top right corner of the bounding box of the
shape it is applied to.
... --> <lineargradient y2="0%" id="g0"> <stop offset="5%" stop-color="black" /> <stop offset="50%" stop-color="red" /> <stop offset="95%" stop-color="black" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector end at the bottom right corner of the bounding box of the
shape it is applied to.
SVG Attribute reference - SVG: Scalable Vector Graphics
s p panose-1 paint-order path pathlength patterncontentunits patterntransform patternunits ping pointer-events points pointsatx pointsaty pointsatz preservealpha preserveaspectratio primitiveunits r r radius referrerpolicy refx refy rel rendering-intent repeatcount repeatdur requiredextensions requiredfeatures restart result rotate rx ry s scale seed
shape-rendering slope spacing specularconstant specularexponent speed spreadmethod startoffset stddeviation stemh stemv stitchtiles stop-color stop-opacity strikethrough-position strikethrough-thickness string stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width style surfacescale systemlanguage t tabindex...
...lay, dominant-baseline, enable-background, fill, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, image-rendering, kerning, letter-spacing, lighting-color, marker-end, marker-mid, marker-start, mask, opacity, overflow, pointer-events,
shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, text-decoration, text-rendering, transform, transform-origin, unicode-bidi, vector-effect, visibility, word-spacing, writing-mode filters attributes filter primitive attributes height, result, width, x, y transfer func...
<g> - SVG: Scalable Vector Graphics
y: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events,
shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-d...
... aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements
shape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<g>' in that specification.
<linearGradient> - SVG: Scalable Vector Graphics
value type: <url> ; default value: none; animatable: yes spreadmethod this attribute indicates how the gradient behaves if it starts or ends inside the bounds of the
shape containing the gradient.
...; default value: 0%; animatable: yes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events,
shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes xlink:href, xlink:title usage notes categoriesgradient elementpermitted contentany number of the following elements, in any order:descriptive elements<animate>, <animatetransform>, <set>, <stop> specif...
<mask> - SVG: Scalable Vector Graphics
ything under a white pixel will be visible --> <rect x="0" y="0" width="100" height="100" fill="white" /> <!-- everything under a black pixel will be invisible --> <path d="m10,35 a20,20,0,0,1,50,35 a20,20,0,0,1,90,35 q90,65,50,95 q10,65,10,35 z" fill="black" /> </mask> <polygon points="-10,110 110,110 110,-10" fill="orange" /> <!-- with this mask applied, we "punch" a heart
shape hole into the circle --> <circle cx="50" cy="50" r="50" mask="url(#mymask)" /> </svg> attributes height this attribute defines the height of the masking area.
... value type: <length> ; default value: 120%; animatable: yes global attributes core attributes most notably: id styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule, color, display, fill, fill-opacity, fill-rule, filter, mask, opacity,
shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements
shape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clipp...
<radialGradient> - SVG: Scalable Vector Graphics
value type: <length> ; default value: 50%; animatable: yes spreadmethod this attribute indicates how the gradient behaves if it starts or ends inside the bounds of the
shape containing the gradient.
...default value: none; animatable: yes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events,
shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes xlink:href, xlink:title usage notes categoriesgradient elementpermitted contentany number of the following elements, in any order:descriptive elements<animate>, <animatetransform>, <set>, <stop> specif...
<svg> - SVG: Scalable Vector Graphics
processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes, document event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events,
shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-d...
... aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements
shape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<svg>' in that specification.
<symbol> - SVG: Scalable Vector Graphics
ble: yes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events,
shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-d...
... aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements
shape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> note: a <symbol> element itself is not meant to be rendered.
SVG element reference - SVG: Scalable Vector Graphics
> <mpath> p <path> <pattern> <polygon> <polyline> r <radialgradient> <rect> s <script> <set> <solidcolor> <stop> <style> <svg> <switch> <symbol> t <text> <textpath> <title> <tspan> u <unknown> <use> v <view> svg elements by category animation elements <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <discard>, <mpath>, <set> basic
shapes <circle>, <ellipse>, <line>, <polygon>, <polyline>, <rect> container elements <a>, <defs>, <g>, <marker>, <mask>, <missing-glyph>, <pattern>, <svg>, <switch>, <symbol>, <unknown> descriptive elements <desc>, <metadata>, <title> filter primitive elements <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropsh...
...nt>, <metadata>, <pattern>, <radialgradient>, <script>, <style>, <symbol>, <title> paint server elements <hatch>, <lineargradient>, <meshgradient>, <pattern>, <radialgradient>, <solidcolor> renderable elements <a>, <circle>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <unknown>, <use>
shape elements <circle>, <ellipse>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect> structural elements <defs>, <g>, <svg>, <symbol>, <use> text content elements <altglyph>, <altglyphdef>, <altglyphitem>, <glyph>, <glyphref>, <textpath>, <text>, <tref>, <tspan> text content child elements <altglyph>, <textpath>, <tref>, <tspan> uncategorized elements <clippath>, <color-profile>, <cursor>...
Mozilla Application Framework in Detail - Archive of obsolete content
description framework (rdf) parser with support for creating rdf graphs programmatically or by parsing files, compositing multiple sources into a single rdf graph, querying and manipulating graphs, and populating xul widgets (trees, menus, etc.) with graph data; an xslt/xpath processor; scalable vector graphics (svg) rendering with support for a usable subset of the standard including all basic
shapes, beziers, stroking and filling with opacity, and much of the dom; mathml rendering; an ecma-262 edition 3-compliant javascript engine; java integration with a bridge to xpcom, a java dom api, the open jvm integration (oji) facility, a java webclient api, and java plug-ins; nspr, a runtime engine that provides platform-independence (across over a dozen platforms) for non-gui operating system ...
nsIAccessibleEvent
event_location_change 0x800b 0x000a 0x0007 an object has changed location,
shape, or size.
nsIWinTaskbar
these don't have to correspond to tabs within the application; they can vary in size,
shape, and location.
Reference Manual
an nscomptr is the exact same size and
shape as a raw xpcom interface pointer.
Creating a gloda message query
so if we had a "
shape" constraint such as query.
shape("square") and we combined it with the previous color constraint it would match a red square, a green square, or a blue square.
Zombie compartments
│ ├───7.83 mb (01.57%) -- js-compartment(https://www.google.de/) │ │ │ │ ├──3.56 mb (00.71%) -- objects │ │ │ │ │ ├──3.04 mb (00.61%) ++ gc-heap │ │ │ │ │ ├──0.51 mb (00.10%) ++ malloc-heap │ │ │ │ │ └──0.00 mb (00.00%) ── non-heap/code/asm.js │ │ │ │ ├──2.43 mb (00.49%) --
shapes │ │ │ │ │ ├──1.47 mb (00.29%) ++ gc-heap │ │ │ │ │ └──0.96 mb (00.19%) ++ malloc-heap │ │ │ │ ├──1.03 mb (00.21%) -- scripts │ │ │ │ │ ├──0.72 mb (00.14%) ── gc-heap [2] │ │ │ │ │ └──0.31 mb (00.06%) ── malloc-heap/data [2] │ │ │ │ ├──0.80 mb (00.16%) -- typ...
Index - Firefox Developer Tools
58 edit css filters css, devtools, filters, page inspector, tools css filter properties in the rules view have a circular gray and white swatch next to them: 59 edit
shape paths in css css, devtools, page inspector, rules view, tools, highlighter,
shapes the
shape path editor is a tool that helps you see and edit
shapes created using clip-path and also the css
shape-outside property and <basic-
shape> values.
Aggregate view - Firefox Developer Tools
type this is the default view, which looks something like this: it groups the things on the heap into types, including: javascript objects: such as function or array dom elements: such as htmlspanelement or window strings: listed as "strings" javascript sources: listed as "jsscript" internal objects: such as "js::
shape".
How to - Firefox Developer Tools
css flexbox inspector: examine flexbox layoutscss grid inspector: examine grid layoutsedit css filtersedit
shape paths in cssedit fontsexamine event listenersexamine and edit cssexamine and edit htmlexamine and edit the box modelinspect and select colorsopen the inspectorreposition elements in the pageselect an elementselect and highlight elementsuse the inspector apiuse the inspector from the web consoleview background imagesvisualize transformswork with animations ...
Page Inspector - Firefox Developer Tools
how to to find out what you can do with the inspector, see the following how to guides: open the inspector examine and edit html examine and edit the box model inspect and select colors reposition elements in the page edit fonts visualize transforms use the inspector api select an element examine and edit css examine event listeners work with animations edit css filters edit css
shapes view background images use the inspector from the web console examine css grid layouts examine css flexbox layouts reference keyboard shortcuts settings ...
AudioNode.channelCountMode - Web APIs
gainnode, delaynode, scriptprocessornode, channelmergernode, biquadfilternode, wave
shapernode clamped-max the number of channels is equal to the maximum number of channels of all connections, clamped to the value of channelcount.
AudioWorkletProcessor - Web APIs
their calculated values will be passed into the process() method of the processor for you to
shape the node output accordingly.
BaseAudioContext.createBiquadFilter() - Web APIs
var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwave
shaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.de...
BaseAudioContext.createConvolver() - Web APIs
the basic premise is that you create an audiobuffer containing a sound sample to be used as an ambience to
shape the convolution (called the impulse response,) and apply that to the convolver.
BaseAudioContext.createPeriodicWave() - Web APIs
the createperiodicwave() method of the baseaudiocontext interface is used to create a periodicwave, which is used to define a periodic waveform that can be used to
shape the output of an oscillatornode.
The 'X' property - Web APIs
its syntax is the same as that for <length> // rect draws a rectangle with upper left-hand corner at x,y, with width w, and height h, with optional style // standard reference: http://www.w3.org/tr/svg11/
shapes.html#rectelement func (svg *svg) rect(x float64, y float64, w float64, h float64, s ...string) { svg.printf(`<rect %s %s`, dim(x, y, w, h, svg.decimals), endstyle(s, emptyclose)) } ​ ...
SVGTransformList - Web APIs
ill="orange" stroke="black" stroke-width="5" points="100,225 100,115 130,115 70,15 70,15 10,115 40,115 40,225" onclick="transformme(evt)"/> <rect x="200" y="100" width="100" height="100" fill="yellow" stroke="black" stroke-width="5" onclick="transformme(evt)"/> <text x="40" y="250" font-family="verdana" font-size="16" fill="green" > click on a
shape to transform it </text> </svg> live preview: specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgtransformlist' in that specification.
Touch.radiusX - Web APIs
this value, in combination with touch.radiusy and touch.rotationangle constructs an ellipse that approximates the size and
shape of the area of contact between the user and the screen.
Touch.radiusY - Web APIs
this value, in combination with touch.radiusx and touch.rotationangle constructs an ellipse that approximates the size and
shape of the area of contact between the user and the screen.
Touch.rotationAngle - Web APIs
together, these three values describe an ellipse that approximates the size and
shape of the area of contact between the user and the screen.
TouchEvent - Web APIs
touches are represented by the touch object; each touch is described by a position, size and
shape, amount of pressure, and target element.
Web Video Text Tracks Format (WebVTT) - Web APIs
vertical, horizontal, line, linealign, position, positionalign, text, size and align can be used to alter the cue and its formation, just like we can alter the objects form,
shape and visibility in html using css.
Fundamentals of WebXR - Web APIs
if you look carefully, you'll see that each eye sees the die slightly differently, and the combined view blends the two into a 3d
shape.
Lighting a WebXR setting - Web APIs
in essence, lighting estimation collects this information about the light sources and the
shape and orientation of the objects in the scene, along with information about the materials they're made of, then returns data you can use to create virtual light source objects that approximately match the real world's lighting.
Using the Web Audio API - Web APIs
since our scripts are playing audio in response to a user input event (a click on a play button, for instance), we're in good
shape and should have no problems from autoplay blocking.
XRBoundedReferenceSpace - Web APIs
the specified bounds may, in fact, describe the
shape and size of the room the user is located in, in order to let the webxr site or application prevent the user from colliding with the walls or other obstacles in the real world.
<alpha-value> - CSS: Cascading Style Sheets
examples setting text color opacity here an alpha value is used to set partially transparent text: /* <rgba()> */ color: rgba(34, 12, 64, 0.6); color: rgba(34.0 12 64 / 60%); setting
shape image threshold here an alpha value is used to determine which parts of an image are considered part of a
shape: /*
shape-image-threshold */
shape-image-threshold: 70%;
shape-image-threshold: 0.7; specifications specification status comment css color module level 4the definition of '<alpha-value>' in that specification.
env() - CSS: Cascading Style Sheets
-area-inset-bottom, 0.5vh); env(safe-area-inset-left, 1.4rem); values safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left the safe-area-inset-* variables are four environment variables that define a rectangle by its top, right, bottom, and left insets from the edge of the viewport, which is safe to put content into without risking it being cut off by the
shape of a non‑rectangular display.
drop-shadow() - CSS: Cascading Style Sheets
the box-shadow property creates a rectangular shadow behind an element's entire box, while the drop-shadow() filter function creates a shadow that conforms to the
shape (alpha channel) of the image itself.
list-style - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: list-style-image list-style-position list-style-type syntax /* type */ list-style: square; /* image */ list-style: url('../img/
shape.png'); /* position */ list-style: inside; /* type | position */ list-style: georgian inside; /* type | image | position */ list-style: lower-roman url('../img/
shape.png') outside; /* keyword value */ list-style: none; /* global values */ list-style: inherit; list-style: initial; list-style: unset; the list-style property is specified as one, two, or three keywords in any order.
mask-clip - CSS: Cascading Style Sheets
formal definition initial valueborder-boxapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ <geometry-box> | no-clip ]#where <geometry-box> = <
shape-box> | fill-box | stroke-box | view-boxwhere <
shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples clipping a mask to the border box css #masked { width: 100px; height: 100px; background-color: #8cffa0; margin: 20px; border: 20px solid #8ca0ff; padding: 20px; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-size: 10...
mask-origin - CSS: Cascading Style Sheets
formal definition initial valueborder-boxapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <geometry-box>#where <geometry-box> = <
shape-box> | fill-box | stroke-box | view-boxwhere <
shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples setting mask origin to border-box css #masked { width: 100px; height: 100px; margin: 10px; border: 10px solid blue; background-color: #8cffa0; padding: 10px; mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-origin: b...
offset-rotate - CSS: Cascading Style Sheets
formal definition initial valueautoapplies totransformable elementsinheritednocomputed valueas specifiedanimation typeas <angle>, <basic-
shape> or <path()> formal syntax [ auto | reverse ] | <angle> examples setting element orientation along its offset path html <div></div> <div></div> <div></div> css div { width: 40px; height: 40px; background: #2bc4a2; margin: 20px; clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%); animation: move 5000ms infinite alternate ease-in-out; offset-path: path('m...
offset - CSS: Cascading Style Sheets
of the shorthand:offset-position: for <length> the absolute value, otherwise a percentageoffset-path: as specifiedoffset-distance: for <length> the absolute value, otherwise a percentageoffset-anchor: for <length> the absolute value, otherwise a percentageoffset-rotate: as specifiedanimation typeas each of the properties of the shorthand:offset-position: a positionoffset-path: as <angle>, <basic-
shape> or <path()>offset-distance: a length, percentage or calc();offset-anchor: a positionoffset-rotate: as <angle>, <basic-
shape> or <path()>creates stacking contextyes formal syntax [ <'offset-position'>?
url() - CSS: Cascading Style Sheets
the following are all valid and equivalent: <css_property>: url("https://example.com/image.png") <css_property>: url('https://example.com/image.png') <css_property>: url(https://example.com/image.png) path references the id of an svg
shape -- circle, ellipse, line, path, polygon, polyline, or rect -- using the
shape's geometry as the path.
Printing - Developer guides
there are a number of possible scenarios: you wish to adjust layout to take advantage of the size and
shape of the paper.
<map> - HTML: Hypertext Markup Language
examples <map name="primary"> <area
shape="circle" coords="75,75,75" href="left.html"> <area
shape="circle" coords="275,75,75" href="right.html"> </map> <img usemap="#primary" src="https://udn.realityripple.com/samples/6a/7e559101b3.png" alt="350 x 150 pic"> result expected live example output the live example above should appear similar to the following images (when using your keyboard tab key): for the left.html link: for t...
direction - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it only has effect on
shapes and text context elements, including: <altglyph>, <textpath>, <text>, <tref>, and <tspan>.
mask - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <mask id="mymask" maskcontentunits="objectboundingbox"> <rect fill="white" x="0" y="0" width="100%" height="100%" /> <polygon fill="black" points="0.5,0.2 0.68,0.74 0.21,0.41 0.79,0.41 0.32,0.74" /> </mask> <!-- punch a hole in a
shape of a star inside the red circle, revealing the yellow circle underneath --> <circle cx="50" cy="50" r="20" fill="yellow" /> <circle cx="50" cy="50" r="45" fill="red" mask="url(#mymask)"/> </svg> since svg2, the mask attribute is defined as a css property and is a shorthand for many other properties: mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, m...
rx - SVG: Scalable Vector Graphics
ipse cx="50" cy="50" rx="0" ry="25" /> <ellipse cx="150" cy="50" rx="25" ry="25" /> <ellipse cx="250" cy="50" rx="50" ry="25" /> <rect x="20" y="120" width="60" height="60" rx="0" ry="15"/> <rect x="120" y="120" width="60" height="60" rx="15" ry="15"/> <rect x="220" y="120" width="60" height="60" rx="150" ry="15"/> </svg> ellipse for <ellipse>, rx defines the x-radius of the
shape.
ry - SVG: Scalable Vector Graphics
ipse cx="50" cy="50" ry="0" rx="25" /> <ellipse cx="150" cy="50" ry="25" rx="25" /> <ellipse cx="250" cy="50" ry="50" rx="25" /> <rect x="20" y="120" width="60" height="60" ry="0" rx="15"/> <rect x="120" y="120" width="60" height="60" ry="15" rx="15"/> <rect x="220" y="120" width="60" height="60" ry="150" rx="15"/> </svg> ellipse for <ellipse>, ry defines the y-radius of the
shape.
x1 - SVG: Scalable Vector Graphics
the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector start at the left bounding limit of the
shape it is applied to --> <lineargradient x1="0%" id="g0"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at 80% of the left bounding limit of the
shape it is applied to --> <lineargradient x1="80%" id="g1"> <stop offset="0...
x2 - SVG: Scalable Vector Graphics
the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 100% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector end at the right bounding limit of the
shape it is applied to --> <lineargradient x2="100%" id="g0"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at 20% of the left bounding limit of the
shape it is applied to --> <lineargradient x2="20%" id="g1"> <stop offset=...
<altGlyph> - SVG: Scalable Vector Graphics
ditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, document element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, dominant-baseline, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events,
shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, transform, vector-effect, visibility xlink attributes xlink:href, xlink:type, xlink:role, xlink:arcrole, xlink:title, xlink:show, xlink:actuate dom interface this element implements the svgaltglyphelement interface.
<animateColor> - SVG: Scalable Vector Graphics
usage context categoriesbasic
shape element, graphics element,
shape elementpermitted contentany number of the following elements, in any order:descriptive elements attributes global attributes conditional processing attributes core attributes animation event attributes xlink attributes animation attribute target attributes animation timing attributes animation value attributes animation addition attributes externalresourcesrequired specific attributes by from ...
<clipPath> - SVG: Scalable Vector Graphics
lue type: userspaceonuse|objectboundingbox ; default value: userspaceonuse; animatable: yes global attributes core attributes most notably: id styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule, color, display, fill, fill-opacity, fill-rule, filter, mask, opacity,
shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility usage notes categoriesnonepermitted contentany number of the following elements, in any order:animation elementsdescriptive elements
shape elements<text>, <use> specifications specification status comment ...
<defs> - SVG: Scalable Vector Graphics
utes global attributes core attributes most notably: id lang styling attributes class, style event attributes global event attributes, document element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events,
shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements
shape elementsstructural elementsgradient elements<a>, <...
<feComposite> - SVG: Scalable Vector Graphics
525,25)" xlink:href="#twobluetriangles"/> <use transform="translate(650,25)" xlink:href="#twobluetriangles"/> <use transform="translate(775,25)" xlink:href="#twobluetriangles"/> <use transform="translate(900,25)" xlink:href="#twobluetriangles"/> </g> </defs> <rect fill="none" stroke="blue" x="1" y="1" width="1098" height="648"/> <g font-family="verdana" font-size="40"
shape-rendering="crispedges"> <desc>render the examples using the filters that draw on top of an opaque white surface, thus obliterating the background.</desc> <g enable-background="new"> <text x="15" y="75">opacity 1.0</text> <text x="15" y="115" font-size="27">(with feflood)</text> <text x="15" y="200">opacity 0.5</text> <text x="15" y="240" font-size="27">(w...
<foreignObject> - SVG: Scalable Vector Graphics
processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes, document event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events,
shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-d...
<glyph> - SVG: Scalable Vector Graphics
usage context categoriestext content elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements
shape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> attributes global attributes core attributes presentation attributes class style specific attributes d horiz-adv-x vert-origin-x vert-origin-y vert-adv-y unicode glyph-name orientation arabic-form lang dom interface this element implements the svgglyphelement interface.
<missing-glyph> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentany number of the following elements, in any order:animation elementsdescriptive elements
shape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> attributes global attributes core attributes presentation attributes class style specific attributes d horiz-adv-x vert-origin-x vert-origin-y vert-adv-y dom interface this element implements the svgmissingglyphelement interface.
<pattern> - SVG: Scalable Vector Graphics
0; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events,
shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes most notably: xlink:title usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements
shape elementsstructural elemen...
<switch> - SVG: Scalable Vector Graphics
usage context categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements
shape elements<a>, <foreignobject>, <g>, <image>, <svg>, <switch>, <text>, <use> attributes global attributes conditional processing attributes core attributes graphical event attributes presentation attributes class style externalresourcesrequired transform dom interface this element implements the svgswitchelement interface.
<text> - SVG: Scalable Vector Graphics
yle, font-variant, font-weight conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, dominant-baseline, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events,
shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-dis...
<tspan> - SVG: Scalable Vector Graphics
yling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, dominant-baseline, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events,
shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-dis...
<use> - SVG: Scalable Vector Graphics
y: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events,
shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-d...