CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-06-13 21:02:08 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix(curriculum): add to layout and effects review page (#58519)

Browse Source
This commit is contained in:
Tom 2025-02-03 13:48:36 -06:00 committed by GitHub
parent a6529e9cd2
commit 1948c3ef73
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
curriculum/challenges/english/25-front-end-development/review-css-layout-and-effects/671a9311a289ae7fff25d88e.md
View File

@ -11,23 +11,26 @@ Review the concepts below to prepare for the upcoming quiz.
## CSS Overflow Property
- **Definition**: Overflow refers to the way elements handle content that exceeds, or "overflows", the size of the containing element. Overflow is two-dimensional.
- **Definition**: Overflow refers to the way elements handle content that exceeds, or "overflows", the size of the containing element. Overflow is two-dimensional.
- **`overflow-x`**: The x-axis determines horizontal overflow.
- **`overflow-y`**: the y-axis determines vertical overflow.
- **`overflow`**: Shorthand property for `overflow-x` and `overflow-y`. If given one value, both overflows will use it. If given two values, the `overflow-x` will use the first, and the `overflow-y` will use the second.
## CSS Transform Property
- **Definition**: This property enables you to apply various transformations to elements, such as rotating, scaling, skewing, or translating (moving) them in 2D or 3D space.
- **`translate()` Function**: This function is used to move an element from its current position.
- **`scale()` function**: This function allows you to change the size of an element.
- **`translate()` Function**: This function is used to move an element from its current position.
- **`scale()` Function**: This function allows you to change the size of an element.
- **`rotate()` Function**: This function allows you to rotate an element.
- **`skew()` Function**: This function allows you to skew an element.
- **Transforms and Accessibility**: If you're using transform to hide or reveal content, make sure that the content is still accessible to screen readers and keyboard navigation. Hidden content should be truly hidden, such as by using `display: none` or `visibility: hidden`, rather than simply being visually moved off-screen.
## The Box Model
- **Definition**: In the CSS box model, every element is surrounded by a box. This box consists of four components: the content area, `padding`, `border`, `margin`.
- **Content Area**: The content area is the innermost part of the box. It's the space that contains the actual content of an element, like text or images.
- **`padding`**: The padding is the area immediately after the content area. It's the space between the content area and the border of an element.
- **`border`**: The border is the outer edge or outline of an element in the CSS box model. It's the visual boundary of the element.
- **`padding`**: The padding is the area immediately after the content area. It's the space between the content area and the border of an element.
- **`border`**: The border is the outer edge or outline of an element in the CSS box model. It's the visual boundary of the element.
- **`margin`**: The margin is the space outside the border of an element. It determines the distance between an element and other elements around it.
## Margin Collapse
@ -49,6 +52,7 @@ Review the concepts below to prepare for the upcoming quiz.
- **Definition**: This property can be used to create various effects such as blurring, color shifting, and contrast adjustment.
- **`blur()` Function**: This function applies a Gaussian blur to the element. The amount is defined in pixels and represents the radius of the blur.
- **`brightness()` Function**: This function adjusts the brightness of the element. A value of 0% will make the element completely black, while values over 100% will increase the brightness.
- **`contrast()` Function**: This function adjusts the contrast of the element. A value of 0% will make the element completely grey, 100% will make the element appear normally, and values greater than 100% will increase the contrast.
- **`grayscale()` Function**: This function converts the element to grayscale. The amount is defined as a percentage, where 100% is completely grayscale and 0% leaves the image unchanged.
- **`sepia()` Function**: This function applies a sepia tone to the element. Like grayscale, it uses a percentage value.
- **`hue-rotate()` Function**: This function applies a hue rotation to the element. The value is defined in degrees and represents a rotation around the color circle.