際際滷

際際滷Share a Scribd company logo

CSS3: Border And Colors

Download as PPTX, PDF
R
Reema

CSS3 introduces new properties for styling borders and adding rounded corners without images. It also provides new ways to specify colors using RGBA, HSL, and HSLA formats. RGBA allows setting opacity, while HSL and HSLA define colors using hue, saturation, and lightness, with optional opacity. Border images and rounded corners add visual effects without images.

Convert to study guideBETA

Transform any presentation into a summarized study guide, highlighting the most important points and key insights.

1 of 9
Download to read offline
CSS3: Border And Colors 7
CSS3: Border And Colors: The CSS3 provides two new properties for styling the borders of an element in a more elegant way the border- image property for adding the images to borders, and the border-radius property for making the rounded corners without using any images. In addition to borders, the CSS3 adds some new functional notations for setting color values for the elements which are rgba(), hsl() and hsla().
Creating CSS3 Rounded Corners The border-radius property can be used to create rounded corners. This property typically defines the shape of the corner of the outer border edge. Prior to CSS3, sliced images are used for creating the rounded corners that was rather bothersome.
Adding CSS3 Border Images: The border-image property allows you to specify an image to act as an element's border. The design of the border is created from the sides and corners of the image specified in border-image source URL. The border image may be sliced, repeated, scaled and stretched in various ways to fit the size of the border image area.
CSS3: Border And Colors
RGBA Color Values: Colors can be defined in the RGBA model (red-green-blue- alpha) using the rgba() functional notation. RGBA color model are an extension of RGB color model with an alpha channel which specifies the opacity of a color. The alpha parameter accepts a value from 0.0 (fully transparent) to 1.0 (fully opaque).
HSL Color Values: Colors also can be defined the HSL model (hue-saturation- lightness) using the hsl() functional notation. Hue is represented as an angle (from 0 to 360) of the color wheel or circle (i.e. the rainbow represented in a circle). This angle is given as a unit less number because the angle is so typically measured in degrees that the unit is implicit in CSS. Saturation and lightness are represented as percentages. 100% saturation means full color, and 0% is a shade of gray. Whereas, 100% lightness is white, 0% lightness is black, and 50% lightness is normal. Check Out Next 際際滷 For An Example:
CSS3: Border And Colors
HSLA Color Values: Colors can be defined in the HSLA model (hue-saturation- lightness-alpha) using the hsla() functional notation. HSLA color model are an extension of HSL color model with an alpha channel which specifies the opacity of a color. The alpha parameter accepts a value from 0.0 (fully transparent) to 1.0 (fully opaque).

More Related Content

CSS3: Border And Colors

  • 1. CSS3: Border And Colors 7
  • 2. CSS3: Border And Colors: The CSS3 provides two new properties for styling the borders of an element in a more elegant way the border- image property for adding the images to borders, and the border-radius property for making the rounded corners without using any images. In addition to borders, the CSS3 adds some new functional notations for setting color values for the elements which are rgba(), hsl() and hsla().
  • 3. Creating CSS3 Rounded Corners The border-radius property can be used to create rounded corners. This property typically defines the shape of the corner of the outer border edge. Prior to CSS3, sliced images are used for creating the rounded corners that was rather bothersome.
  • 4. Adding CSS3 Border Images: The border-image property allows you to specify an image to act as an element's border. The design of the border is created from the sides and corners of the image specified in border-image source URL. The border image may be sliced, repeated, scaled and stretched in various ways to fit the size of the border image area.
  • 6. RGBA Color Values: Colors can be defined in the RGBA model (red-green-blue- alpha) using the rgba() functional notation. RGBA color model are an extension of RGB color model with an alpha channel which specifies the opacity of a color. The alpha parameter accepts a value from 0.0 (fully transparent) to 1.0 (fully opaque).
  • 7. HSL Color Values: Colors also can be defined the HSL model (hue-saturation- lightness) using the hsl() functional notation. Hue is represented as an angle (from 0 to 360) of the color wheel or circle (i.e. the rainbow represented in a circle). This angle is given as a unit less number because the angle is so typically measured in degrees that the unit is implicit in CSS. Saturation and lightness are represented as percentages. 100% saturation means full color, and 0% is a shade of gray. Whereas, 100% lightness is white, 0% lightness is black, and 50% lightness is normal. Check Out Next 際際滷 For An Example:
  • 9. HSLA Color Values: Colors can be defined in the HSLA model (hue-saturation- lightness-alpha) using the hsla() functional notation. HSLA color model are an extension of HSL color model with an alpha channel which specifies the opacity of a color. The alpha parameter accepts a value from 0.0 (fully transparent) to 1.0 (fully opaque).