log()
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The log()
CSS function is an exponential function that returns the logarithm of a number.
The logarithm, or log, is the inverse of exponentiation
; it is the number that a fixed base has to be raised to in order to yield the number passed as the first parameter.
In CSS, when a single parameter is passed, the natural logarithm e
, or approximately 2.7182818
, is used, though the base can be set to any value with an optional second parameter.
Syntax
/* A <number> value */
width: calc(100px * log(7.389)); /* 200px */
width: calc(100px * log(8, 2)); /* 300px */
width: calc(100px * log(625, 5)); /* 400px */
Parameters
The log(value [, base]?)
function accepts two comma-separated values as its parameters.
value
-
A calculation which resolves to a
<number>
greater than or equal to 0. Representing the value to be logarithmed. base
-
Optional. A calculation which resolves to a
<number>
greater than or equal to 0. Representing the base of the logarithm. If not defined, the default logarithmic basee
is used.
Return value
The logarithm of value
, when base
is defined.
The natural logarithm (base e
) of value
, when base
is not defined.
Formal syntax
<log()> =
log( <calc-sum> , <calc-sum>? )
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-constant> |
( <calc-sum> )
<calc-constant> =
e |
pi |
infinity |
-infinity |
NaN
Specifications
Specification |
---|
CSS Values and Units Module Level 4 # exponent-funcs |
Browser compatibility
BCD tables only load in the browser