Update formatting

snippets/gradient-text.md

@@ -7,7 +7,7 @@ lastUpdated: 2020-12-30T15:37:37+02:00
 
 Gives text a gradient color.
 
-- Use `background` with a `linear-gradient` value to give the text element a gradient background.
+- Use `background` with a `linear-gradient()` value to give the text element a gradient background.
 - Use `webkit-text-fill-color: transparent` to fill the text with a transparent color.
 - Use `webkit-background-clip: text` to clip the background with the text, filling the text with the gradient background as the color.
 

snippets/image-hover-rotate.md

@@ -7,7 +7,7 @@ lastUpdated: 2021-10-11T18:44:51+03:00
 
 Creates a rotate effect for the image on hover.
 
-- Use the `scale`, `rotate` and `transition` properties when hovering over the parent element (a `<figure>`) to animate the image.
+- Use the `scale()`, `rotate()` and `transition` properties when hovering over the parent element (a `<figure>`) to animate the image.
 - Use `overflow: hidden` on the parent element to hide the excess from the image transformation.
 
 ```html

snippets/mouse-cursor-gradient-tracking.md

@@ -9,7 +9,7 @@ A hover effect where the gradient follows the mouse cursor.
 
 - Declare two CSS variables, `--x` and `--y`, used to track the position of the mouse on the button.
 - Declare a CSS variable, `--size`, used to modify the gradient's dimensions.
-- Use `background: radial-gradient(circle closest-side, pink, transparent);` to create the gradient at the correct position.
+- Use `background: radial-gradient(circle closest-side, pink, transparent)` to create the gradient at the correct position.
 - Use `Document.querySelector()` and `EventTarget.addEventListener()` to register a handler for the `'mousemove'` event.
 - Use `Element.getBoundingClientRect()` and `CSSStyleDeclaration.setProperty()` to update the values of the `--x` and `--y` CSS variables.
 

snippets/overflow-scroll-gradient.md

@@ -7,7 +7,7 @@ lastUpdated: 2021-10-13T19:29:39+02:00
 
 Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled.
 
-- Use the `:after` pseudo-element to create a `linear-gradient` that fades from `transparent` to `white` (top to bottom).
+- Use the `:after` pseudo-element to create a `linear-gradient()` that fades from `transparent` to `white` (top to bottom).
 - Use `position: absolute`, `width` and `height` to place and size the pseudo-element in its parent.
 - Use `pointer-events: none` to exclude the pseudo-element from mouse events, allowing text behind it to still be selectable/interactive.
 

snippets/rotating-card.md

@@ -8,8 +8,8 @@ lastUpdated: 2021-03-30T15:24:01+03:00
 Creates a two sided card which rotates on hover.
 
 - Set the `backface-visibility` of the cards to none.
-- Initially, set `rotateY` for the back side of the card to `-180deg` and the front side to `0deg`.
-- Upon hover, set `rotateY` for the front side to `180deg` and backside to `0deg`.
+- Initially, set `rotateY()` for the back side of the card to `-180deg` and the front side to `0deg`.
+- Upon hover, set `rotateY()` for the front side to `180deg` and backside to `0deg`.
 - Set the appropriate `perspective` value to create the rotate effect.
 
 ```html

snippets/tile-layout-using-inline-block.md

@@ -10,7 +10,7 @@ Aligns items horizontally using `display: inline-block` to create a 3-tile layou
 - Use `display: inline-block` to create a tiled layout, without using `float`, `flex` or `grid`.
 - Use `width` in combination with `calc` to divide the width of the container evenly into 3 columns.
 - Set `font-size` for `.tiles` to `0` to avoid whitespace and to `20px` for `<h2>` elements to display the text.
-- **Note:** If you use relative units (e.g. `em`), using `font-size: 0;` to fight whitespace between blocks might cause side effects.
+- **Note:** If you use relative units (e.g. `em`), using `font-size: 0` to fight whitespace between blocks might cause side effects.
 
 ```html
 <div class="tiles">