You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: curriculum/challenges/english/blocks/lecture-working-with-css-transforms-overflow-and-filters/672bcc8ccc976fd791610f43.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -148,7 +148,7 @@ If you are using `transform` to hide or reveal content, make sure the content is
148
148
149
149
When applying `transform` to interactive elements like buttons or links, ensure that the clickable area remains intuitive and easily targetable. A drastically transformed button might be visually confusing or difficult to click especially for users with motor impairments.
150
150
151
-
In conclusion, while the CSS `transform` property is a powerful for creating visually dynamic web designs, it's essential to use it responsibly with accessibility in mind. Always test your transformed elements with various assisted technologies and consider providing alternative ways to access information or functionality that might be affected by transforms.
151
+
In conclusion, while the CSS `transform` property is a powerful tool for creating visually dynamic web designs, it's essential to use it responsibly with accessibility in mind. Always test your transformed elements with various assisted technologies and consider providing alternative ways to access information or functionality that might be affected by transforms.
Copy file name to clipboardExpand all lines: curriculum/challenges/english/blocks/lecture-working-with-css-transforms-overflow-and-filters/672bcc9c4a6dd6d7dd3e6357.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -21,23 +21,23 @@ This is an example with the `padding` shorthand property, where we set the top p
21
21
padding: 15px 5px 2px 8px;
22
22
```
23
23
24
-
The border is the outer edge or outline of an element in the CSS box model. It's the visual boundary of the element. You can customize the border style, width, color and other properties using the `border` property. Here's an example where we set the border to a width of five pixels, a solid state and a color of blue:
24
+
The border is the outer edge or outline of an element in the CSS box model. It's the visual boundary of the element. You can customize the border style, width, color and other properties using the `border` property. Here's an example where we set the border to a width of five pixels, the style to solid and a color of blue:
25
25
26
26
```css
27
27
border: 5px solid blue;
28
28
```
29
29
30
30
If you omit a value the default property of that value will be used. That's `medium` for the width, `none` for the style and the current color for the color.
31
31
32
-
You can setthis three properties directly in the shorthand `border` property if you want all sides to be exactly the same. But if you want to assign a different style to each side you can use the `border-width`, `border-style` and `border-color` properties.
32
+
You can setthese three properties directly in the shorthand `border` property if you want all sides to be exactly the same. But if you want to assign a different style to each side you can use the `border-width`, `border-style` and `border-color` properties.
33
33
34
34
```css
35
35
border-width: 2px 4px 7px 12px;
36
36
border-style: dashed solid solid dashed;
37
37
border-color: blue red green black;
38
38
```
39
39
40
-
You can write up the four values for each one of these properties. They will be applied in a clockwise sequence starting from the top. If you only write one value it will be applied to all four sides.
40
+
You can write up to four values for each one of these properties. They will be applied in a clockwise sequence starting from the top. If you only write one value it will be applied to all four sides.
41
41
42
42
Finally, the margin is the space outside the border of an element. It determines the distance between an element and other elements around it. You can set different margin values for the top, right, bottom and left sides of the element using the `margin` property.
43
43
@@ -51,7 +51,7 @@ These four components are essential for calculating the total width and height o
51
51
52
52
In the next few lessons, you will learn more about how this is handled by the browser and how you can customize it. The CSS box model is a fundamental concept for web development.
53
53
54
-
Understanding how this component interact and contribute to an element's dimensions is essential for implementing web designs.
54
+
Understanding how these components interact and contribute to an element's dimensions is essential for implementing web designs.
0 commit comments