diff --git a/snippets/border-with-top-triangle.md b/snippets/border-with-top-triangle.md index 3b7519b3c..42121c05a 100644 --- a/snippets/border-with-top-triangle.md +++ b/snippets/border-with-top-triangle.md @@ -3,18 +3,15 @@ title: Border with top triangle tags: visual,beginner --- -Creates a text container with a triangle at the top. +Creates a content container with a triangle at the top. - Use the `:before` and `:after` pseudo-elements to create two triangles. -- The color of the `:before` triangle should be the same as the container's border color. -- The color of the `:after` triangle should be the same as the container's background color. -- The border width of the `:before` triangle should be `1px` wider than the `:after` triangle, in order to act as the border. -- The `:after` triangle should be `1px` to the right of the `:before` triangle to allow for its left border to be shown. +- The colors of the two triangles should be the same as the container's `border-color` and the container's `background-color` respectively. +- The `border-width` of the one triangle (`:before`) should be `1px` wider than the other one (`:after`), in order to act as the border. +- The smalle triangle (`:after`) should be `1px` to the right of the larger triangle (`:before`) to allow for its left border to be shown. ```html -
- Border with top triangle -
+
Border with top triangle
``` ```css @@ -26,7 +23,8 @@ Creates a text container with a triangle at the top. margin-top: 20px; } -.container:before, .container:after { +.container:before, +.container:after { content: ''; position: absolute; bottom: 100%; diff --git a/snippets/bouncing-loader.md b/snippets/bouncing-loader.md index acafb7f43..4a9d0f55b 100644 --- a/snippets/bouncing-loader.md +++ b/snippets/bouncing-loader.md @@ -5,14 +5,10 @@ tags: animation,intermediate Creates a bouncing loader animation. -- `@keyframes` defines an animation that has two states, where the element changes `opacity` and is translated up on the 2D plane using `transform: translate3d()`. Using a single axis translation on `transform: translate3d()` improves the performance of the animation. -- `.bouncing-loader` is the parent container of the bouncing circles and uses `display: flex` and `justify-content: center` to position them in the center. -- `.bouncing-loader > div`, targets the three child `div`s of the parent to be styled. The `div`s are given a width and height of `1rem`, using `border-radius: 50%` to turn them from squares to circles. -- `margin: 3rem 0.2rem` specifies that each circle has a top/bottom margin of `3rem` and left/right margin of `0.2rem` so that they do not directly touch each other, giving them some breathing room. -- `animation` is a shorthand property for the various animation properties: `animation-name`, `animation-duration`, `animation-iteration-count`, `animation-direction` are used. -- `nth-child(n)` targets the element which is the nth child of its parent. -- `animation-delay` is used on the second and third `div` respectively, so that each element does not start the animation at the same time. -- Note that `1rem` is usually `16px`. +- Use `@keyframes` to define an animation with two states, where the element changes `opacity` and is translated up on the 2D plane using `transform: translate3d()`. Use a single axis translation on `transform: translate3d()` to achieve better animation performance. +- Create a parent container, `.bouncing-loader`, for the bouncing circles and use `display: flex` and `justify-content: center` to position them in the center. +- Give the three bouncing circle `
` elements a `width` and `height` of `16px` and use `border-radius: 50%` to make them circular. +- Apply the `bouncing-loader` animation to each of the three bouncing circles, using a different `animation-delay` for each one and `animation-direction: alternate` to create the appropriate effect. ```html
@@ -26,7 +22,7 @@ Creates a bouncing loader animation. @keyframes bouncing-loader { to { opacity: 0.1; - transform: translate3d(0, -1rem, 0); + transform: translate3d(0, -16px, 0); } } @@ -36,8 +32,8 @@ Creates a bouncing loader animation. } .bouncing-loader > div { - width: 1rem; - height: 1rem; + width: 16px; + height: 16px; margin: 3rem 0.2rem; background: #8385aa; border-radius: 50%; diff --git a/snippets/box-sizing-reset.md b/snippets/box-sizing-reset.md index 3ab783d45..b3c022619 100644 --- a/snippets/box-sizing-reset.md +++ b/snippets/box-sizing-reset.md @@ -5,8 +5,8 @@ tags: layout,beginner Resets the box-model so that `width` and `height` are not affected by `border` or `padding`. -- `box-sizing: border-box` makes the addition of `padding` or `border`s not affect an element's `width` or `height`. -- `box-sizing: inherit` makes an element respect its parent's `box-sizing` rule. +- Use `box-sizing: border-box` to include the width and height of `padding` and `border` when calculating the element's `width` and `height`. +- Use `box-sizing: inherit` to pass down the `box-sizing` property from parent to child elements. ```html
border-box
@@ -29,6 +29,7 @@ div { width: 120px; height: 120px; padding: 8px; + margin: 8px; background: #F24333; color: white; border: 1px solid #BA1B1D; diff --git a/snippets/button-border-animation.md b/snippets/button-border-animation.md index 1ea1a762b..fdab4a95d 100644 --- a/snippets/button-border-animation.md +++ b/snippets/button-border-animation.md @@ -5,7 +5,8 @@ tags: animation,intermediate Creates a border animation on hover. -- Use the `:before` and `:after` pseudo-elements as borders that animate on hover. +- Use the `:before` and `:after` pseudo-elements to create two boxes `24px` wide opposite each other above and below the box. +- Use the `:hover` pseudo-class to extend the `width` of those elements to `100%` on hover and animate the change using `transition`. ```html diff --git a/snippets/circle.md b/snippets/circle.md index be31a1a34..d790f2ce6 100644 --- a/snippets/circle.md +++ b/snippets/circle.md @@ -3,9 +3,9 @@ title: Circle tags: visual,beginner --- -Creates a circle shape with pure CSS. +Creates a circular shape with pure CSS. -- `border-radius: 50%` curves the borders of an element to create a circle. +- Use `border-radius: 50%` to curve the borders of the element to create a circle. - Since a circle has the same radius at any given point, the `width` and `height` must be the same. Differing values will create an ellipse. ```html @@ -15,8 +15,8 @@ Creates a circle shape with pure CSS. ```css .circle { border-radius: 50%; - width: 2rem; - height: 2rem; - background: #333; + width: 32px; + height: 32px; + background: #9C27B0; } ``` diff --git a/snippets/clearfix.md b/snippets/clearfix.md index 5be030e91..fab464576 100644 --- a/snippets/clearfix.md +++ b/snippets/clearfix.md @@ -5,10 +5,10 @@ tags: layout,beginner Ensures that an element self-clears its children. -- `.clearfix:after` defines a pseudo-element. -- `content: ''` allows the pseudo-element to affect layout. -- `clear: both` indicates that the left, right or both sides of the element cannot be adjacent to earlier floated elements within the same block formatting context. -- This is only useful if you are still using `float` to build layouts. Please consider using a modern approach with flexbox layout or grid layout. For this snippet to work properly you need to ensure that there are no non-floating children in the container and that there are no tall floats before the clearfixed container but in the same formatting context (e.g. floated columns). +- Use the `:after` pseudo-element and apply `content: ''` to allow it to affect layout. +- Use `clear: both` to make the element clear past both left and right floats. +- For this technique to work properly, make sure there are no non-floating children in the container and that there are no tall floats before the clearfixed container but in the same formatting context (e.g. floated columns). +- **Note:** This is only useful if you are using `float` to build layouts. Consider using a more modern approach, such as the flexbox or grid layout. ```html
@@ -27,5 +27,6 @@ Ensures that an element self-clears its children. .floated { float: left; + padding: 4px; } ``` diff --git a/snippets/constant-width-to-height-ratio.md b/snippets/constant-width-to-height-ratio.md index 6ae799b72..4d523521c 100644 --- a/snippets/constant-width-to-height-ratio.md +++ b/snippets/constant-width-to-height-ratio.md @@ -3,10 +3,10 @@ title: Constant width to height ratio tags: layout,beginner --- -Given an element of variable width, it will ensure its `height` remains proportionate in a responsive fashion (i.e. its `width` to `height` ratio remains constant). +Ensures that an element with variable `width` will retain a proportionate `height` value. -- `padding-top` on the `:before` pseudo-element causes the height of the element to equal a percentage of its width. `100%` therefore means the element's height will always be `100%` of the width, creating a responsive square. -- This method also allows content to be placed inside the element normally. +- Apply `padding-top` on the `:before` pseudo-element, making the `height` of the element equal to a percentage of its `width`. +- The proportion of `height` to `width` can be altered as necessary. For example a `padding-top` of `100%` will create a responsive square (1:1 ratio). ```html
@@ -14,7 +14,7 @@ Given an element of variable width, it will ensure its `height` remains proporti ```css .constant-width-to-height-ratio { - background: #333; + background: #9C27B0; width: 50%; } diff --git a/snippets/counter.md b/snippets/counter.md index 07c72e68d..4e0f31fdf 100644 --- a/snippets/counter.md +++ b/snippets/counter.md @@ -3,14 +3,11 @@ title: Counter tags: visual,advanced --- -Counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used. +Creates a custom list counter that accounts for nested list elements. -- `counter-reset` is used to initialize a counter, the name of which is the value of the attribute. By default, the counter starts at `0`. This property can also be used to change its value to any specific number. -- `counter-increment` is used for an element that will be countable. Once `counter-reset` is initialized, a counter's value can be increased or decreased. -- `counter(name, style)` displays the value of a section counter. Generally used with the `content` property. This function can receive two parameters, the first being the name of the counter and the second one either `decimal` or `upper-roman` (`decimal` by default). -- `counters(counter, string, style)` displays the value of a section counter. Generally used with the `content` property. This function can receive three parameters, the first as the name of the counter, the second one you can include a string which comes after the counter and the third one can be `decimal` or `upper-roman` (`decimal` by default). -- A CSS counter can be especially useful for making outlined lists, because a new instance of the counter is automatically created in child elements. Using the `counters()` function, separating text can be inserted between different levels of nested counters. -- Note that you can create an ordered list using any type of HTML. +- Use `counter-reset` to initialize a variable counter (default `0`), the name of which is the value of the attribute (i.e. `counter`). +- Use `counter-increment` on the variable counter for each countable element (i.e. each `
  • `). +- Use `counters()` to display the value of each variable counter as part of the `content` of the `:before` pseudo-element for each countable element (i.e. each `
  • `). The second value passed to it (`'.'`) acts as the delimiter for nested counters. ```html