liveBookmanning.com

What you will learn in Math for Web Design

Precision layout and animation

by Paul McFedries

Read it on liveBook Get the book at manning.com

Chapter by chapter

Concepts explained in this book

• font-size propertyThe CSS font-size property specifies the nominal size of rendered text glyphs.
• coordinateA numerical value or set of values that specifies a point's position relative to a coordinate system's origin.
• Math.atan2Math.atan2 is a JavaScript function that returns the angle in radians corresponding to the direction from the origin to a point while preserving the signs of both coordinates.
• velocityVelocity is the rate of change of an object's position together with its direction of motion.
• proportionA proportion is a mathematical relationship expressing the relative sizes of quantities or parts.
• viewport unitThe vw unit is a CSS viewport unit equal to one hundredth of the viewport's width.
• Bézier curveA Bézier curve is a parametric curve defined by control points and polynomial interpolation, commonly used to represent smooth paths or progression.
• clippingClamping is the technique of restricting a value to a specified lower and upper limit.
• brightnessPerceived brightness is the visual intensity or lightness of a color or visual stimulus as experienced by human vision.
• getBoundingClientRectgetBoundingClientRect() is a DOM method that returns an element's size and position relative to the viewport.
• angleAn angle is the geometric measure of the separation between two intersecting rays or sides.
• line-height propertyThe CSS line-height property specifies the height of a line box or the spacing allocated to each line of text.
• hueHue is the perceptual attribute that identifies a color by its position among color families such as red, green, or blue.
• viewportThe viewport is the visible area of a browser window in which a web page is rendered.
• coordinate systemA two-dimensional coordinate system formed by perpendicular axes for locating points with ordered pairs.
• number roundingA rounding strategy specifies how a numerical value is selected when rounding it to an interval.
• vectorA vector is a quantity representing magnitude and direction, often visualized as an arrow between points.
• fraction unitThe fr unit is a CSS Grid flexible length unit representing a share of available space after fixed track sizes and other deductions.
• Pythagorean theoremThe Pythagorean theorem states that the square of the hypotenuse of a right triangle equals the sum of the squares of its other two sides.
• maximummax() is a CSS function that returns the largest value from its arguments.
• calc()calc() is a CSS mathematical function that evaluates an arithmetic expression, including compatible units, to produce a computed style value.
• ratioA ratio is a mathematical comparison between quantities that expresses their relative sizes or how many times one contains another.
• animationA web animation is the programmed or styled change of visual properties over time in a web interface.
• radianA radian is an angular measurement unit defined by an arc whose length equals the radius of its circle.
• control pointA control point is a point that determines the shape and local behavior of a Bézier curve without necessarily lying on the curve.
• minimum valueA minimum is the smallest value in a set or collection of values.
• modulus operationmod() is a CSS mathematical function that returns a division remainder having the sign of the divisor.
• easingAn easing function maps animation progress or elapsed time to a non-linear value progression that controls perceived acceleration and deceleration.
• line lengthLine length is the horizontal measure of a line of written text, typically measured from the start to the end of the line.
• sqrtMath.sqrt is the JavaScript Math method that returns the principal square root of a numeric argument.
• max-width propertymax-width is a CSS constraint that limits the maximum width of an element or container.
• degreesA degree is an angular measurement unit equal to one 360th of a full rotation.
• accelerationAcceleration is the rate at which velocity or animation progress changes over time.
• flex-growA flex grow factor is the numeric value that determines an item’s proportional share of positive free space in a Flexbox container.
• cosine functioncos() is a CSS mathematical function that returns the cosine of an angle.
• HSL methodThe HSL color model represents colors using hue, saturation, and lightness components in a cylindrical coordinate system.
• JavaScriptA standardized programming language commonly used to add computation and interactive behavior to web pages and applications.
• responsive web designA responsive layout adapts the arrangement and sizing of interface elements to changing viewport or device conditions.
• CSS GridA layout framework that organizes content with consistent columns, gutters, and spacing units.
• shrinkThe flex shrinking algorithm is the Flexbox procedure for distributing negative free space among shrinkable flex items according to their flex-shrink factors and size constraints.
• progressProgress is a normalized measure of how far an animation or interaction has advanced from its starting value to its final value.
• mathematicsMathematics is the discipline concerned with quantities, structures, relationships, and patterns expressed through logical and symbolic reasoning.
• CSS math functionA CSS math function is a built-in CSS function that evaluates mathematical values or expressions in style declarations.
• distanceDistance is a numerical measure of the separation between two points or geometric objects.
• grid lineA grid line is a CSS Grid line that defines a row or column boundary and provides a position for placing grid items.
• minmax()minmax() is a CSS Grid sizing function that defines a track size within a specified minimum and maximum range.
• trigonometryTrigonometry is the branch of mathematics concerned with relationships among the sides and angles of triangles.
• sine functionsin() is a CSS mathematical function that returns the sine of an angle.
• chromaChroma is a color attribute representing the perceived intensity or saturation relative to a similarly illuminated gray.
• saturationSaturation is the perceived intensity or purity of a color relative to a neutral gray of similar lightness.
• modular scaleA modular scale is a sequence of related sizes generated by applying a consistent ratio to establish typographic hierarchy.
• explicit track creationAn explicit track is a CSS Grid row or column directly defined by grid-template-columns or grid-template-rows.
• contrast ratioA contrast ratio is a numerical comparison of the relative luminances of two colors, calculated with the higher luminance as the numerator.
• tangentTangent is the trigonometric function equal to the length of the side opposite an angle divided by the length of the adjacent side.
• bounding boxA bounding box is a rectangular region described by an element's position and dimensions that encloses the element.
• grid trackA grid track is a single row or column in a CSS Grid layout whose size is determined by track-sizing rules.
• OKLCHOKLCH is a perceptually uniform color space that represents color using lightness, chroma, and hue.
• power functionExponentiation is the arithmetic operation of raising a base to a specified exponent.
• rem()rem() is a CSS mathematical function that computes a remainder while preserving the sign of the dividend.
• Math.randomMath.random is a JavaScript function that returns a pseudorandom floating-point number from zero inclusive to one exclusive.
• pointA point is a location in space represented without length, width, or height, commonly by coordinates.
• arbitrary-precision integerBigInt is a JavaScript primitive numeric type for representing integers of arbitrary magnitude.
• gravityGravity is the attractive interaction between masses that produces weight and affects motion.
• CSS variableA CSS variable, also called a custom property, is a CSS property defined with a double-hyphen name whose value can be reused through var().
• dampingDamping is the reduction of motion or oscillation through energy dissipation or velocity attenuation, often described as friction in an animation context.
• exp functionMath.exp() is a JavaScript function that returns e raised to a specified power.
• hypot()hypot() is a CSS mathematical function that returns the square root of the sum of the squares of its arguments.
• logarithmA logarithm is the exponent to which a base must be raised to produce a specified number.
• Math.cosMath.cos is the JavaScript Math API method that returns the cosine of an angle expressed in radians.
• math.sinMath.sin is the JavaScript Math API method that returns the sine of an angle expressed in radians.
• coefficientScaling is a geometric transformation that changes an object's size by multiplying its coordinates by scale factors.
• line segmentA line segment is the finite portion of a line between two endpoints.
• dynamic viewport unitThe dvh unit is a CSS viewport-height unit equal to one percent of the dynamically changing viewport height as browser interface elements appear or disappear.
• remThe rem unit is a CSS relative length unit equal to the computed font size of the root element.
• responsive typographyResponsive typography is the adjustment of text sizing and related typographic properties to suit varying display conditions.
• hit testingHit testing is the technique of determining whether a point or pointer location lies within a graphical object's boundaries.
• CSSCSS is the stylesheet language used to describe the presentation and layout of documents written in markup languages.
• originThe origin is the point where the reference axes of a coordinate system intersect.
• rotationA rotate transform is a CSS transformation operation that rotates an element around its transform origin.
• relative luminanceRelative luminance is a normalized measure of the perceived lightness of a color, computed from linearized red, green, and blue components and ranging from black at 0 to white at 1.
• alpha channelAlpha is a graphics channel value from zero to one that represents a color's opacity or coverage during compositing.
• min-contentMinimum content width is the smallest width required by an item's content under CSS intrinsic sizing rules.
• radiusA radius is the distance from the center of a circle to any point on its circumference.
• remainder operationThe remainder operator is the JavaScript operator (%) that returns the remainder after division, with behavior that depends on the signs of its operands.
• circleA circle is the set of points in a plane at a fixed distance from a central point.
• implicit gridAn implicit grid track is a CSS Grid row or column track generated automatically outside the explicitly defined grid to place grid items.
• small viewport unitA small viewport unit is a CSS viewport-relative unit based on the corresponding dimension of the small viewport.
• mathematical expressionAn expression is a collection of values and symbols that performs a calculation and produces a result.
• clientXclientX is a MouseEvent or Touch property giving a contact's horizontal position relative to the browser viewport.
• interpolationInterpolation is the calculation of intermediate values between specified endpoints.
• flex base sizeA flex base size is the initial main-axis size assigned to a flex item before Flexbox distributes free space by growing or shrinking items.
• auto-fillauto-fill is a CSS Grid repeat() keyword that creates as many tracks as can fit the available grid space, retaining empty tracks.
• auto-fitauto-fit is a CSS Grid repeat() keyword that creates fitting tracks and collapses empty tracks so available space can be redistributed.
• dimensionAn axis is a reference direction in a coordinate system along which a component or position is measured.
• number typeThe number type is the JavaScript primitive type for numeric values, including integers and floating-point numbers.
• amplitudeAmplitude is the maximum magnitude of a periodic function's displacement from its central or equilibrium value.
• operator precedenceOperator precedence is the set of rules that determines the order in which operators in an expression are evaluated.
• grid-columngrid-column is a CSS property that specifies the grid-column lines between which a grid item is placed or spanned.
• data conversionType conversion is the transformation of a value from one data type into another.
• slopeRate of change is the amount by which one variable changes relative to a change in another variable.
• directionDirection is the orientation of a vector, commonly expressed as an angle relative to a reference axis.
• rgb() functionrgb() is a CSS color function that specifies a color using red, green, and blue component values.
• blending modeA blend mode is a rule that mathematically combines source and backdrop color channels to produce a composited color.
• repeat()repeat() is a CSS Grid function that expands a track-size pattern into a specified number of repeated tracks or an automatically determined repetition.
• WCAGThe Web Content Accessibility Guidelines (WCAG) are an international standard for making web content accessible to people with disabilities.
• fluid layoutA fluid layout is a web layout whose dimensions and spacing adjust continuously as the available viewport size changes.
• parallax effectA parallax effect is a visual effect in which elements appear to move at different rates as the viewing position changes.
• floating-point arithmeticA floating-point number is a finite-precision numerical value represented with a significand and an exponent, allowing fractional quantities and a wide range of magnitudes.
• preferred valueA preferred value is a candidate value selected when it lies within the permitted lower and upper bounds.
• grid-rowgrid-row is a CSS property that specifies the grid-row lines between which a grid item is placed or spanned.
• emem is a CSS relative length unit whose value is based on the computed font size of the relevant element.
• IntersectionObserverIntersectionObserver is a browser API that asynchronously observes changes in the intersection between target elements and a root viewport or ancestor.
• intersectionRatiointersectionRatio is an IntersectionObserver entry property representing the proportion of a target element's area that is visible within the intersection root.
• flex-basisflex-basis is a CSS Flexbox property that specifies an item's initial size along the flex container's main axis before flexible growth or shrinkage.
• easeease is a CSS timing-function keyword that produces a transition with slower motion near the beginning and end.
• ease-inease-in is a CSS timing-function keyword that starts an animation slowly and accelerates toward the end.
• ease-outease-out is a CSS timing-function keyword that starts an animation quickly and decelerates toward the end.
• arithmetic operatorA CSS arithmetic operator is a symbol that performs addition, subtraction, multiplication, or division within a CSS mathematical expression.
• overshootAn overshoot effect is animation motion that passes beyond its target before settling toward it.
• weighted averageA weighted average is an average in which each value contributes according to an assigned numerical weight.
• lineA line is a straight one-dimensional figure extending infinitely in both directions.
• triangleA triangle is a polygon with three sides and three vertices.
• complementary color relationshipA complementary color scheme is a color arrangement based on a hue and the hue positioned opposite it on the color wheel.
• paddingThe CSS padding property specifies the space between an element's content and its border.
• code readabilityReadability is the ease with which written content can be visually perceived and understood, including against its background.
• physics simulationA physics simulation is a computational model that approximates motion and other behavior according to physical rules.
• parent widthParent width is the horizontal size of a CSS element's containing parent used as the reference dimension for percentage-based padding and margins.
• safe integerThe JavaScript safe integer range is the range of integers that the Number type can represent exactly without loss of precision.
• LAB color spaceCIELAB (Lab) is a perceptually uniform color space that represents colors with lightness and opponent green-red and blue-yellow dimensions.
• weighted shrink factorA weighted shrink factor is a flex item's flex-shrink value multiplied by its base size for proportional shrink calculations.
• cubic-bezier()cubic-bezier() is a CSS timing-function that defines an animation progression with a cubic Bézier curve.
• revised flex-grow algorithmThe revised flex-grow algorithm allocates each flex-grow value below one directly as a fraction of a flex container's free space when their total is below one.
• decelerationDeceleration is a reduction in speed or acceleration opposite to the direction of motion.
• fixed-width layoutA layout pattern in which a page or container uses a fixed horizontal dimension rather than adapting its width to the available viewport.
• CSS box modelThe CSS box model describes each element as a rectangular box composed of content, padding, border, and margin areas.
• Number.isSafeIntegerNumber.isSafeInteger is a JavaScript method that tests whether a value is a number representing an integer exactly within JavaScript's safe integer range.
• hexadecimal color notationAn RGB hex code is a three- or six-digit hexadecimal color notation encoding red, green, and blue component values.
• typographyTypography is the design and arrangement of text, including its size, spacing, alignment, and visual appearance.
• autoauto is a CSS sizing keyword that lets the layout algorithm determine a value from available space and content constraints.
• screen blend modeThe screen blend mode combines color channels using the complement of multiplying their complements, producing a result no darker than either input.
• unitless numberA unitless value is a CSS numeric value without a length or other measurement unit whose interpretation depends on the property.
• comparisonA comparison operator is an operator that specifies the relationship to test between two values.
• grayscale colorA grayscale value is a numerical intensity representing a color’s apparent brightness on a scale from black to white.
• fixed repetitionFixed repetition is a CSS Grid repetition mode in which a pattern is expanded a predetermined number of times.
• floor()floor() is a CSS math function that rounds a numeric value down to the nearest integer.
• clientYclientY is a MouseEvent or Touch property giving a contact's vertical position relative to the browser viewport.
• horizontal axisThe x-axis is the horizontal reference axis in a two-dimensional coordinate system.
• requestAnimationFramerequestAnimationFrame is a browser API method that schedules a callback to run before the next repaint.
• transparencyTransparency is the visual property that allows underlying colors or content to show through a foreground element.
• hypotenuseThe hypotenuse is the side opposite the right angle in a right triangle.
• timing functionA function that maps elapsed animation time to progression through an animation.
• gridA regular system of intersecting rows and columns used to organize visual elements in a layout.
• radial menuA radial menu is a user interface menu whose items are arranged around a central point.

These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.