Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
CSS Sign Functions (abs() andsign()) handle absolute values and sign detection. The abs() function returns the absolute value (always positive), while sign()returns -1, 0, or +1 based on whether a number is negative, zero, or positive!
width: abs(-200px); /* Returns 200px */Returns the absolute value (magnitude without sign). Always positive or zero.
transform: scale(sign(width)); /* -1, 0, or 1 */Returns -1 for negative numbers, 0 for zero, and +1 for positive numbers.
abs()sign()<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Functions - Absolute Values</title>
</head>
<body>
<div class="container">
<h1>➕ Sign Functions</h1>
<p class="subtitle">Absolute values and sign detection</p>
<div class="demo-area">
<div class="example-row">
<div class="label">-100px</div>
<div class="arrow">→</div>
<div class="bar abs-100">abs() = 100px</div>
</div>
<div class="example-row">
<div class="label">-150px</div>
<div class="arrow">→</div>
<div class="bar abs-150">abs() = 150px</div>
</div>
<div class="example-row">
<div class="label">200px</div>
<div class="arrow">→</div>
<div class="bar abs-200">abs() = 200px</div>
</div>
<div class="example-row">
<div class="label">250px</div>
<div class="arrow">→</div>
<div class="bar abs-250">abs() = 250px</div>
</div>
</div>
<div class="info-box">
<div class="info-title">🔢 Absolute Value Function</div>
<p class="info-text">
CSS supports <code>abs()</code> and <code>sign()</code> functions for absolute values and sign detection.
These functions have <strong>limited browser support</strong>. The <code>abs()</code> function returns
the absolute value (always positive), while <code>sign()</code> returns -1, 0, or 1 based on the
number's sign. Perfect for calculations that need positive values!
</p>
</div>
</div>
</body>
</html>Loading preview...