Blog

Email spoofer

Image-rendering: pixelated

Experimental: Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browserkompatibilität beachtet werden. Es ist auch möglich, dass die Syntax in einer späteren Spezifikation noch geändert wird.

Das image-rendering CSS Property schlägt dem user agent vor, wie er eingebundene Bilder darstellen sollte. Dieses Property gilt für alle Bilder welche einem HTML untergeordnet sind, betrifft allerdings nur skalierte Bilder.  Wenn ein Bild zum Beispiel 100x1000px groß ist, es aber mit einer Größe von 200x200px eingebunden wird, so Rechnet der Browser nach dem durch das Property festgelegten Algorythmus um.

Initialwert auto
Anwendbar auf alle Elemente
Vererbt Ja
Berechneter Wert wie angegeben
Animationstyp diskret
auto
Default value, the image should be scaled with an algorithm that maximizes the appearance of the image. In particular, scaling algorithms that “smooth” colors are acceptable, such as bilinear interpolation. This is intended for images such as photos. Since version 1.9 (Firefox 3.0), Gecko uses bilinear resampling (high quality).
crisp-edges
The image must be scaled with an algorithm that preserves contrast and edges in the image, and which does not smooth colors or introduce blur to the image in the process. This is intended for images such as pixel art.
pixelated
When scaling the image up, the “nearest neighbor” or similar algorithm must be used, so that the image appears to be composed of large pixels. When scaling down, this is the same as ‘auto’.
The values optimizeQuality and optimizeSpeed present in early draft (and coming from its SVG counterpart) are defined as synonyms for the auto value.

image-rendering: auto;

78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)

78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

image-rendering: crisp-edges; (-webkit-optimize-contrast)

78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

Specification Status Comment
CSS Images Module Level 3
Die Definition von ‘image-rendering’ in dieser Spezifikation.
Anwärter Empfehlung

Though initially close from the SVG image-rendering property, the values are quite different now.

 

Source: https://developer.mozilla.org/de/docs/Web/CSS/image-rendering

The Heider-Simmer Illusion

The Heider-Simmel Illusion (1944)
see also entry on CSS3 easing (movement of objects on the web)

Helton, G.. (2018). Visually perceiving the intentions of others. Philosophical Quarterly

Plain numerical DOI: 10.1093/pq/pqx051
DOI URL
directSciHub download

Rasmussen, C. E., & Jiang, Y. V.. (2019). Judging social interaction in the Heider and Simmel movie. Quarterly Journal of Experimental Psychology

Plain numerical DOI: 10.1177/1747021819838764
DOI URL
directSciHub download

Schafroth, J. L., Basile, B. M., Martin, A., & Murray, E. A.. (2021). No evidence that monkeys attribute mental states to animated shapes in the Heider–Simmel videos. Scientific Reports

Plain numerical DOI: 10.1038/s41598-021-82702-6
DOI URL
directSciHub download

Ratajska, A., Brown, M. I., & Chabris, C. F.. (2020). Attributing Social Meaning to Animated Shapes: A New Experimental Study of Apparent Behavior. American Journal of Psychology

Plain numerical DOI: 10.5406/amerjpsyc.133.3.0295
DOI URL
directSciHub download

Ross, L. A., & Olson, I. R.. (2010). Social cognition and the anterior temporal lobes. NeuroImage

Plain numerical DOI: 10.1016/j.neuroimage.2009.11.012
DOI URL
directSciHub download

Scholl, B. J., & Tremoulet, P. D.. (2000). Perceptual causality and animacy. Trends in Cognitive Sciences

Plain numerical DOI: 10.1016/S1364-6613(00)01506-0
DOI URL
directSciHub download

Shu, T., Peng, Y., Fan, L., Lu, H., & Zhu, S. C.. (2018). Perception of Human Interaction Based on Motion Trajectories: From Aerial Videos to Decontextualized Animations. Topics in Cognitive Science

Plain numerical DOI: 10.1111/tops.12313
DOI URL
directSciHub download

Shu, T., Peng, Y., Zhu, S. C., & Lu, H.. (2021). A unified psychological space for human perception of physical and social events. Cognitive Psychology

Plain numerical DOI: 10.1016/j.cogpsych.2021.101398
DOI URL
directSciHub download

Brown, M. I., Ratajska, A., Hughes, S. L., Fishman, J. B., Huerta, E., & Chabris, C. F.. (2019). The social shapes test: A new measure of social intelligence, mentalizing, and theory of mind. Personality and Individual Differences

Plain numerical DOI: 10.1016/j.paid.2019.01.035
DOI URL
directSciHub download

Lück, H. E.. (2006). Die heider-simmel-studie (1944) in neueren replikationen. Gruppendynamik Und Organisationsberatung

Plain numerical DOI: 10.1007/s11612-006-0021-0
DOI URL
directSciHub download

Schuster, B. A., Fraser, D. S., van den Bosch, J. J. F., Sowden, S., Gordon, A. S., Huh, D., & Cook, J. L.. (2021). Kinematics and observer-animator kinematic similarity predict mental state attribution from Heider–Simmel style animations. Scientific Reports

Plain numerical DOI: 10.1038/s41598-021-97660-2
DOI URL
directSciHub download

Roemmele, M., Morgens, S. M., Gordon, A. S., & Morency, L. P.. (2016). Recognizing human actions in the motion trajectories of shapes. In International Conference on Intelligent User Interfaces, Proceedings IUI

Plain numerical DOI: 10.1145/2856767.2856793
DOI URL
directSciHub download

Wick, F. A., Soce, A. A., Garg, S., Grace, R. C., & Wolfe, J. M.. (2019). Perception in dynamic scenes: What is your Heider capacity?. Journal of Experimental Psychology: General

Plain numerical DOI: 10.1037/xge0000557
DOI URL
directSciHub download

Jack, A., & Pelphrey, K. A.. (2015). Neural correlates of animacy attribution include neocerebellum in healthy adults. Cerebral Cortex

Plain numerical DOI: 10.1093/cercor/bhu146
DOI URL
directSciHub download

Pavlova, M., Guerreschi, M., Lutzenberger, W., & Krägeloh-Mann, I.. (2010). Social interaction revealed by motion: Dynamics of neuromagnetic gamma activity. Cerebral Cortex

Plain numerical DOI: 10.1093/cercor/bhp304
DOI URL
directSciHub download

CSS3 easing

With CSS3 easing and tweening object can be animated and given the impression of “aliveness”). For a psychological perspective on movement perception in animations see the entry on the Heider-Simmer Illusion.

<easing-function>

The <easing-function> CSS data type denotes a mathematical function that describes the rate at which a numerical value changes.

This transition between two values may be applied in different situations. It may be used to describe how fast values change during animations. This lets you vary the animation’s speed over the course of its duration. It may also be used to interpolate between two colors in a color gradient.

The easing functions in the cubic-bezier subset of easing functions are often called “smooth” easing functions, because they can be used to smooth down the start and end of the interpolation. They correlate an input ratio to an output ratio, both expressed as <number>s. For these values, 0.0 represents the initial state, and 1.0 represents the final state.

Depending on the specific function used, the calculated output can sometimes grow to be greater than 1.0 or smaller than 0.0 during the course of an animation. This causes the value to go farther than the final state, and then return. In animations, for some properties, such as left or right, this creates a kind of “bouncing” effect.

However, certain properties will restrict the output if it goes outside an allowable range. For example, a color component greater than 255 or smaller than 0 will be clipped to the closest allowed value (255 and 0, respectively). Some cubic-bezier() curves exhibit this property.

Syntax

There are three types of easing function: linear, cubic Bézier curves, and staircase functions. The value of an <easing-function> type describes the easing function using one of those three types.

Easing functions

CSS supports three kinds of easing functions: linear, the subset of the cubic Bézier curves that are functions, and staircase functions. The most useful of these functions are given a keyword that allows them to be easily referenced.

The linear class of easing functions

linear

A graph with X and Y ranges from 0 to 1, with the X axis labeled 'Time ratio' and the Y axis labeled 'Output ratio.' A straight diagonal line extends from the origin to the X 1 Y 1 position.

The interpolation is done at a constant rate from beginning to end. This keyword represents the easing function cubic-bezier(0.0, 0.0, 1.0, 1.0).

The cubic-bezier() class of easing functions

A graph with X and Y ranges from 0 to 1, with the X axis labeled 'Time ratio' and the Y axis labeled 'Output ratio.' A curved line extends from the origin to the X 1 Y 1 position. The X 0 Y 0 point of the line is labeled  'P₀ = (0, 0)'. Extending from the X 0 Y 0 point is a Bezier handle labeled 'P₁ = (0.075, 0.75)'. The X 1 Y 1 point of the line is labeled 'P₃ = (1, 1)'. Extending from the X 1 Y 1 point is a Bezier handle labeled 'P₂ = (0.0875, 0.36)'.

The cubic-bezier() functional notation defines a cubic Bézier curve. As these curves are continuous, they are often used to smooth down the start and end of the interpolation and are therefore sometimes called easing functions.

A cubic Bézier curve is defined by four points P0, P1, P2, and P3. P0 and P3 are the start and the end of the curve and, in CSS these points are fixed as the coordinates are ratios (the abscissa the ratio of time, the ordinate the ratio of the output range). P0 is (0, 0) and represents the initial time or position and the initial state, P3 is (1, 1) and represents the final time or position and the final state.

Not all cubic Bézier curves are suitable as easing functions as not all are mathematical functions; i.e., curves that for a given abscissa have zero or one value. With P0 and P3 fixed as defined by CSS, a cubic Bézier curve is a function, and is therefore valid, if and only if the abscissas of P1 and P2 are both in the [0, 1] range.

Cubic Bézier curves with the P1 or P2 ordinate outside the [0, 1] range may generate bouncing effects.

When you specify an invalid cubic-bezier curve, CSS ignores the whole property.

Syntax

where:

x1, y1, x2, y2
Are <number> values representing the abscissas, and ordinates of the P1 and P2 points defining the cubic Bézier curve. x1 and x2 must be in the range [0, 1] or the value is invalid.

Keywords for common cubic-bezier easing functions

ease

A graph with X and Y ranges from 0 to 1, with the X axis labeled 'Time ratio' and the Y axis labeled 'Output ratio.' A curving line extends from the origin to the X 1 Y 1 position, quickly rising and arcing.

The interpolation starts slowly, accelerates sharply, and then slows gradually towards the end. This keyword represents the easing function cubic-bezier(0.25, 0.1, 0.25, 1.0). It is similar to ease-in-out, though it accelerates more sharply at the beginning.

ease-in

A graph with X and Y ranges from 0 to 1, with the X axis labeled 'Time ratio' and the Y axis labeled 'Output ratio.' A slightly curving line extends from the origin to the X 1 Y 1 position, with most of the curve close to the origin, straightening out as it approaches X 1 Y 1.

The interpolation starts slowly, and then progressively speeds up until the end, at which point it stops abruptly. This keyword represents the easing function cubic-bezier(0.42, 0.0, 1.0, 1.0).

ease-in-out

A graph with X and Y ranges from 0 to 1, with the X axis labeled 'Time ratio' and the Y axis labeled 'Output ratio.' A slightly curving line extends from the origin to the X 1 Y 1 position. The curve is symmetrical, resembling a stretched out letter S.

The interpolation starts slowly, speeds up, and then slows down towards the end. This keyword represents the easing function cubic-bezier(0.42, 0.0, 0.58, 1.0). At the beginning, it behaves like the ease-in function; at the end, it is like the ease-out function.

ease-out

A graph with X and Y ranges from 0 to 1, with the X axis labeled 'Time ratio' and the Y axis labeled 'Output ratio.' A slightly curving line extends from the origin to the X 1 Y 1 position, starting as an almost straight diagonal line and curving as it gets close to X 1 Y 1.

The interpolation starts abruptly, and then progressively slows down towards the end. This keyword represents the easing function cubic-bezier(0.0, 0.0, 0.58, 1.0).

The steps() class of easing functions

The steps() functional notation defines a step function dividing the domain of output values in equidistant steps.This subclass of step functions are sometimes also called staircase functions.

Syntax

where:

number_of_steps
Is a strictly positive <integer>, representing the amount of equidistant treads composing the stepping function.
direction
Is a keyword indicating if it the function is left- or right-continuous:

  • jump-start denotes a left-continuous function, so that the first step or jump happens when the interpolation begins;
  • jump-end denotes a right-continuous function, so that the last step or jump happens when the interpolation ends;
  • jump-both denotes a right and left continuous function, includes pauses at both the 0% and 100% marks, effectively adding a step during the interpolation iteration;
  • jump-none There is no jump on either end. Instead, holding at both the 0% mark and the 100% mark, each for 1/n of the duration
  • start is the equivalent of jump-start
  • end is the equivalent of jump-end

end is the default.

steps( n, <direction> )
  • steps(2, jump-start) steps(2, start) A graph with X and Y ranges from 0 to 1, with the X axis labeled 'Time ratio' and the Y axis labeled 'Output ratio.' Three dots are present, the first at the X 0 Y 0 position, the second at the X 0.5 Y 0.5 position, and the third at the X 1 Y 1 position. The second and third dots have horizontal lines extending 0.5 units backwards towards the Y axis.
  • steps(4, jump-end) steps(4, end) Four steps, with a jump from the fourth step to the final value at the 100% mark.
  • steps(5, jump-none) Five steps, with no jumps, so 20% of the time is at the beginning state or 0% mark and the last 20% is at the final state, or 100% mark.
  • steps(3, jump-both) A graph with X and Y ranges from 0 to 1, with the X axis labeled 'Time ratio' and the Y axis labeled 'Output ratio.' Five dots are present, the first at the X 0 Y 0 position, the second at the X 0 Y 0.25 position, the third at the X 0.5 Y 0.5 position, the fourth at the X 0.75 Y 0.75 position, and the fifth at the X 1 Y 1 position. The second, third, and fourth dots have horizontal lines extending 0.25 units forwards away from the Y axis.
step-start

A graph with X and Y ranges from 0 to 1, with the X axis labeled 'Time ratio' and the Y axis labeled 'Output ratio.' Two dots are present, the first at the X 0 Y 0 position, and the second at the X 1 Y 1 position. The second dot has a horizontal lines extending 1 units back towards the Y axis. The interpolation jumps immediately to its final state, where it stays until the end. This keyword represents the easing function steps(1, jump-start) or steps(1, start).

step-end

A graph with X and Y ranges from 0 to 1, with the X axis labeled 'Time ratio' and the Y axis labeled 'Output ratio.' Two dots are present, the first at the X 0 Y 0 position, and the second at the X 1 Y 1 position. The first dot has a horizontal lines extending 1 unit forwards away from the Y axis. The interpolation stays in its initial state until the end, at which point it jumps directly to its final state. This keyword represents the easing function steps(1, jump-end) or steps(1, end).

Examples

Easing function comparison

This example creates an animation that can be started and stopped again using the provided button, and a select menu that can be used to switch its easing function between the available keywords, plus a couple of cubic-bezier() and steps() options. The idea is to provide an easy comparison between different easing functions.

HTML

CSS

JavaScript

Result

cubic-bezier() function examples

These cubic Bézier curves are valid for use in CSS:

These cubic Bézier curves definitions are invalid:

steps() function examples

These easing functions are valid:

Note: If the animation contains multiple stops, then the steps specified in the steps() function will apply to each section. Therefore an animation with three segments and steps(2) will contain 6 steps in total, 2 per segment.

These easing function are invalid:

Specifications

Specification Status Comment
CSS Easing Functions Level 1
The definition of ‘<easing-function>’ in that specification.
Candidate Recommendation Initial definition.

Browser compatibility

Report problems with this compatibility data on GitHub

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
<easing-function>
cubic-bezier() with ordinate ∉ [0,1]
steps() with start, end or no direction
jump- keywords for steps()

Legend

Full supportFull support
No supportNo support

See also

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function

JAB code

Jab code

JAB Code is a color two-dimensional matrix symbology whose basic symbols are made of colorful square modules arranged in either square or rectangle grids. JAB Code has two types of basic symbols, named as primary symbol and secondary symbol. A JAB Code contains one primary symbol and optionally multiple secondary symbols. Primary symbols contain four finder patterns located at the corners of the symbol, while secondary symbols contain no finder pattern. A secondary symbol can be docked to a primary symbol or another docked secondary symbol in either horizontal or vertical direction. JAB Code can encode from small to large amount of data correlated to user-specified percentages of error correction.

https://jabcode.org/create