Introduction to Cascading Style Sheets (CSS): Part 2مقدمة في أوراق الأنماط المتتالية (CSS): الجزء الثاني
مقدمة الفصل
ماذا ستتعلم في هذا الفصل
- Add text shadows and text-stroke effects.
- Create rounded corners.
- Add shadows to elements.
- Create linear and radial gradients, and reflections.
- Create animations, transitions and transformations.
- Use multiple background images and image borders.
- Create a multicolumn layout.
- Use vendor prefixes.
أقسام الفصل
- 1Text shadowsظل النص
- 2Rounded corners and box shadowsالزوايا المستديرة وظل الصندوق
- 3Linear gradients and vendor prefixesالتدرجات الخطية والبادئات
- 4Radial gradients, text stroke and reflectionsالتدرج الشعاعي وحدود النص والانعكاس
- 5Multiple background images and image bordersعدة صور خلفية وحدود الصور
- 6Animation and @keyframesالحركة و @keyframes
- 7Transitions and transformationsالانتقالات والتحويلات
- 8Multicolumn layoutالتخطيط متعدد الأعمدة
تلميح: استخدم أسهم لوحة المفاتيح للتنقل بين الشرائح.
Text shadowsظل النص
The CSS3 text-shadow property adds a shadow effect to any text. It has four values:
- Horizontal offset
Pixels to the left or right of the text. Negative → left, positive → right.
- Vertical offset
Pixels up or down. Negative → up, positive → down.
- Blur radius
0px = sharp edge (no blur); the greater the value, the more blurred the edges.
- Color
The color of the text-shadow.
سؤال سريع
Text shadows
Rounded corners and box shadowsالزوايا المستديرة وظل الصندوق
Adds rounded corners to an element. Any value greater than half of the shortest side length produces a completely round end. Each corner can be set separately (border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius).
Shadows any block-level element: horizontal offset (positive → right), vertical offset (positive → down), blur radius (0px = sharp edge), color.
سؤال سريع
Rounded corners and box shadows
Linear gradients and vendor prefixesالتدرج الخطي والبادئات
A type of image that gradually transitions from one color to the next horizontally, vertically or diagonally. The points where colors change are color-stops (pixels or percentages along the gradient line). Gradients can be used in any property that accepts an image.
Used for properties that are still being finalized in the CSS specification but have already been implemented in various browsers.
سؤال سريع
Linear gradients and vendor prefixes
Radial gradientsالتدرج الشعاعي
Similar to a linear gradient, but the color changes gradually from an inner point (the start) to an outer circle (the end).
The three values in Fig. 5.6القيم الثلاث في المثال
- 1
Position of the start — center (other values: top, bottom, left, right).
- 2
Start color — yellow.
- 3
End color — red.
سؤال سريع
Radial gradients, text stroke and reflections
(Optional, WebKit only) Text stroke and reflectionsحد النص والانعكاس
Radial gradients, text stroke and reflections
A nonstandard WebKit property that adds an outline (text stroke) around text: outline thickness (e.g., 2px) and stroke color.
Adds a reflection of an image: first value direction (above, below, left, right), second value offset (space between image and reflection), optionally a gradient.
Multiple backgrounds and image bordersالخلفيات المتعددة وحدود الصور
Multiple background images and image borders
- CSS3 allows multiple background images; the comma-separated background-position values match the order of the images in background-image.
- background-origin places each image using the box model (e.g., border-box, content-box).
Uses images to place a border around any block-level element. border-image-slice divides the image into nine regions: four corners, four sides and a middle.
Stretched border
- Sides stretched (distorted) to fit
- Corners unchanged
Repeated border
- border-image-repeat: repeat
- Tiles repeated, partial tiles fill the excess space
The animation propertyخاصية animation
Animation and @keyframes
Shorthand orderترتيب القيم
- animation-name
The name of the animation.
- animation-timing-function
How the animation progresses in one cycle.
- animation-duration
Time (s or ms) for one iteration.
- animation-delay
Time after the page loads before it begins.
- animation-iteration-count
Number of runs; infinite repeats continuously.
- animation-direction
alternate = alternating directions; default normal.
Timing functions and @keyframesدوال التوقيت و keyframes
Animation and @keyframes
| animation-timing-functionدالة التوقيت | Behaviour (slide 43)السلوك |
|---|---|
| linear | Same speed from start to finish |
| ease (default) | Starts slowly, increases speed, then ends slowly |
| ease-in | Starts slowly, then speeds up |
| ease-out | Starts faster, then slows down |
| ease-in-out | Starts and ends slowly |
| cubic-bezier | Custom timing with four values between 0 and 1, e.g. cubic-bezier(1,0,0,1) |
Defines the properties that change during the animation, the values they change to, and when they change. It is followed by the animation's name; its selectors (e.g., 0%, 25%, 50%, 75%, 100%) are points in time.
سؤال سريع
Animation and @keyframes
Transitions and transformationsالانتقالات والتحويلات
Transitionالانتقال
- Changes an element's style over a specified duration
- Specifies only the starting and ending values
Animation (keyframes)الحركة
- Keyframes control intermediate states throughout the duration
For each changing property, its duration, e.g. transition: transform 4s, opacity 2s;
Receives degrees; negative values rotate left.
1 = original size; > 1 increases, < 1 decreases.
Slant block-level elements horizontally / vertically.
- :hover formerly worked only for anchor elements but now works with any element.
سؤال سريع
Transitions and transformations
Multicolumn layoutالأعمدة المتعددة
Number of columns (Fig. 5.17 uses 3).
The spacing between columns (30px in the example).
Adds a line between each column.
- Resizing the browser window changes the width of the columns to fit the layout.
سؤال سريع
Multicolumn layout
الخلاصة
أنهيت الدرس
الخطوة التالية: ثبّت المعلومات بالبطاقات، ثم اختبر نفسك بالأسئلة.
ما راجعته في هذا الدرس
- Text shadowsظل النص
- Rounded corners and box shadowsالزوايا المستديرة وظل الصندوق
- Linear gradients and vendor prefixesالتدرجات الخطية والبادئات
- Radial gradients, text stroke and reflectionsالتدرج الشعاعي وحدود النص والانعكاس
- Multiple background images and image bordersعدة صور خلفية وحدود الصور
- Animation and @keyframesالحركة و @keyframes
- Transitions and transformationsالانتقالات والتحويلات
- Multicolumn layoutالتخطيط متعدد الأعمدة