The background property is a shorthand for eight properties:

1. background-image: Specifies an image from a file or a generated color gradient.
2. background-position: Sets the initial position of the background image.
3. background-size: Specifies how large to render the background image within the element.
4. background-repeat: Determines whether to tile the image if necessary to fill the entire element.
5. background-origin: Determines whether background positioning is relative to the element's border-box, padding-box (initial value), or content-box.
6. background-clip: Specifies whether the background should fill the element's border-box (initial value), padding-box, or content-box.
7. background-attachment: Specifies whether the background image will scroll up and down along with the element (the initial value), or if the image will be fixed in place in the viewport.
8. background-color: Specifies a solid background color.

The linear-gradient function

The linear-gradient function has three parameters defining its behavior: angle, starting color, and ending color.
The angle of the gradient can be specified in several ways.

• Using words like: to right, to left, to top or to bottom. You can even specify a corner such as to bottom right
• You can use more specific units, such as degrees. The value 0deg points straight up (equivalent to to top); higher values move clockwise around the circle, so 90deg points to the right, 180deg points down, 360deg points up again.
• rad: indicates radians. One full circle is 2 π, or roughly 6.2832 radians.
• turn: indicates the number of full turns around the circle. For example, 0.25turn, is equal to 90deg.
• grad: indicates gradians. One full circle is 400 gradians (400grad) and 100grad equals 90deg.

Color stops

You can define a gradient with multiple colors, which are each called a color stop (see third row in the example below).
The linear-gradient function can accept any number of color stops, each separated by a comma.
You can adjust the position of the color stops however you want. They also do not need to be measured in percentages. Pixels, ems, and other length units are perfectly valid.

Stripes

If you place two color stops at the same position, the gradient's color will instantly switch from one to the other, rather than a smooth transition (see forth row in the example below).
In the example above, the color #000000 and #c71231 have the same color stop which is 33%. In this case the transition will be instant, creating a stripe effect.

Repeating gradients

We can use the repeating-linear-gradient function to create a gradient that repeats itself.
We use either color stops or stripes to create a pattern first then it will be repeated.
It can be used to create a progress bar, for example. (This effect requires a bit of JavaScript, which we will cover in detai in Lab 5. If you to take a look at it now, go to Lab 5 JS code.)

Result

Radial gradients start at a single point and proceed outward in all directions.
By default, the gradient is centered in the element, transitioning evenly to its corners. It's elliptical in shape, matching the proportions of the element (that is, wider for wide elements, taller for tall elements).
Radial gradients support color stops, the same as linear gradients.
You can also make the radial gradient a circle rather than an ellipse, or you can specify where the gradient should be centered.
A repeating-radialgradient() function repeats the pattern in concentric rings.

Result

Two properties that create shadows are box-shadow, which creates a shadow of an element's box shape, and text-shadow, which creates a shadow of rendered text.
Shadows rules have the following syntax:

box-shadow: offset-x offset-y blur-radius spread-radius color;

• offset-x offset-y: how far the shadow will be shifted from the element's position (horizontal, then vertical). If these have a value of 0, then the shadow will be directly behind the element.
• blur-radius: controls how much the edges of the shadow are to be blurred. This will give it a softer, slightly transparent edge.
• spread-radius: The spread radius controls the size of the shadow. A positive spread radius makes the shadow larger in all directions; a negative value makes the shadow smaller.
• color: any color format.
• inset: makes the shadow appear inside the border of the element, rather than outside.

Result

Hover or click to effect.

We have already seen Typography in the previous lecture here.

In this section, we will see how to use external fonts like Google fonts.

Result

لقد أصبح الذكاء الاصطناعي مصطلحًا شاملًا للتطبيقات التي تؤدي مهام مُعقدة كانت تتطلب في الماضي إدخالات بشرية مثل التواصل مع العملاء عبر الإنترنت أو ممارسة لعبة الشطرنج. يُستخدم غالبًا هذا المصطلح بالتبادل مع مجالاته الفرعية، والتي تشمل التعلم الآلي (ML) والتعلم العميق.