Quiz Weeks 5/6 Flashcards
Gradient Definition/Basics
Is a transition from one color to another, sometimes through multiple colors.
A gradient is considered an image created on the fly and can be applied to any element an image can be applied to.
A gradient image has no intrinsic size or proportions; the size matches the element it gets applied to.
Advantages of Gradients
They do not require an extra call to the server and require fewer bytes to download than images.
Disadvantages of Gradients
On the other hand, all that rendering on the fly requires time and processing power that can hurt performance.
Two types of gradients
- Linear gradients change colors along a line, from one edge of the element to the other.
- Radial gradients start at a point and spread outward in a circular or elliptical shape.
Linear-gradient() notation
Provides the angle of the gradient line and one or more points along that line where the pure color is positioned.
Can use degrees or keywords to describe angle of linear
With degrees, 0deg points upward, and positive angles go around clockwise so that 90deg points to the right.
The keywords describe direction in increments of 90° (to top, to right, to bottom, to left).
Color length
You can use percentages or any length measurement to set color lengths in a gradient.
If no positions are specified, the colors are spaced evenly across the length of the gradient line.
Radial gradients
Radiate out from a point in a circle along a gradient ray (like a gradient line, but it always points outward from the center).
At minimum, a radial gradient requires two color stops.
Radial-gradient() notation
Allows you to specify the shape, size, and center position of the gradient.
In most cases, the shape of the radial gradient will result from the shape of the element or an explicit size you apply to it, but you can also specify the shape by using the circle or ellipse keywords.
The size of the radial gradient can be specified in length units or percentages, which apply to the gradient ray, or with keywords. If you supply just one length, it is used for both width and height, resulting in a circle. When you provide two lengths, the first one is the horizontal measurement and the second is vertical.
Radial-gradient position notation
Closest-side, closest-corner, farthest-side, and farthest-corner—that set the length of the gradient ray relative to points on the containing element.
By default, the center of the gradient is positioned at center center, but you can change that by using the positioning syntax we covered for the background-position property.
Radial-gradient repeating notation
Use the repeating-linear-gradient() or repeating-radial-gradient() notation.
The box model definition/basics
According to the box model, every element in a document generates a box to which properties such as width, height, padding, borders, and margins can be applied.
Every element in a document, both block-level and inline, generates a rectangular element box.
Parts of an element box: Content area
At the core of the element box is the content itself. The edges of the content area are referred to as the inner edges of the element box.
In real pages, the edge of the content area is invisible.
Parts of an element box: Padding
The padding is the area between the content area and an optional border. Padding is optional.
Parts of an element box: Border
The border is a line (or stylized line) that surrounds the element and its padding. Borders are also optional.
Parts of an element box: Margin
The margin is an optional amount of space added on the outside of the border.
In reality, margins are always transparent, allowing the background of the parent element to show through.
Parts of an element box: Outer edge
The outside edges of the margin area make up the outer edges of the element box. This is the total area the element takes up on the page, and it includes the width of the content area plus the total amount of padding, border, and margins applied to the element.
In real web pages, the edge of the margin is invisible.
Specifying box dimensions: width/height (properties)
Values: length | percentage | auto
Default: auto
Applies to: block-level elements and replaced inline elements (such as images)
Inherits: no
Specifying box dimensions: box-sizing (properties)
Values: content-box | border-box
Default: content-box
Applies to: all elements
Inherits: no
Auto value in width/height of block element/box
By default, the width and height of a block element are calculated automatically by the browser. However, you can use the width and height properties to make the content area of an element a specific width or height.
There are two ways to specify the size of an element
- The default method: Applies the width and height values to the content box. That means that the resulting size of the element will be the dimensions you specify plus the amount of padding and borders that have been added to the element.
- Using box-sizing property: applies the width and height values to the border box, which includes the content, padding, and border. With this method, the resulting visible element box, including padding and borders, will be exactly the dimensions you specify.
Width and height for block-level vs. inline
Regardless of the method you choose, you can specify the width and height only for block-level elements and non-text inline elements such as images.
The width and height properties do not apply to inline text (non-replaced) elements and are ignored by the browser.
Box-sizing: content-box
By default, the width and height properties are applied to the content box. But, you can explicitly specify this behavior by setting box-sizing: content-box.
Box-sizing: border-box
The other way to specify the size of an element is to apply width and height dimensions to the entire visible box, including the padding and border. Not the default browser behavior, and needs to be set to box-sizing: border-box in the style sheet. Many developers simply set everything in the document to use the border-box model by setting it on the root (html) element, then setting all other elements to inherit, like this:
html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
Border-box warning
Avoid using max- and min- widths and heights with the border-box model. They are known to cause browser problems.
Height property in relation to width
Works just the same as width. In general practice, it is less common to specify the height of elements. Not including allows the height to be calculated automatically, allowing the element box to change based on the font size, user settings, or other factors.
Overflow property
When an element is sized too small for its contents, you can specify what to do with the content that doesn’t fit by using the overflow property.
Overflow property (properties)
Values: visible | hidden | scroll | auto
Default: visible
Applies to: block-level elements and replaced inline elements (such as images)
Inherits: no
Values of overflow property: visible
The default value is visible, which allows the content to hang out over the element box so that it all can be seen.
Values of overflow property: hidden
When overflow is set to hidden, the content that does not fit gets clipped off and does not appear beyond the edges of the element’s content area.
Values of overflow property: scroll
When scroll is specified, scrollbars are added to the element box to let users scroll through the content. Be aware that they may become visible only when you click the element to scroll it. Is a simpler alternative to overflow:scroll for mobile.
Values of overflow property: auto
The auto value allows the browser to decide how to handle overflow. In most cases, scrollbars are added only when the content doesn’t fit and they are needed.
Box-shadow property
Applies a drop shadow around the entire visible element box (excluding the margin).
Box-shadow property (properties)
Values: ‘horizontal offset’ ‘vertical offset’ ‘blur distance’ ‘spread distance’ color inset | none
Default: none
Applies to: all elements
Inherits: no
Box-shadow values ‘horizontal offset’ ‘vertical offset’ ‘blur distance’ ‘spread distance’
You can specify the horizontal and vertical offset distances, the amount the shadow should blur, and a color. Same as foreground color unless overridden. You can also specify a spread amount, which increases (or decreases with negative values) the size of the shadow.
Box-shadow value inset
You can make the shadow render inside the edges of the visible element box by adding the inset keyword to the rule.
Transparent or translucent background on box-shadow
If the element has a transparent or translucent background, you will not see the box shadow in the area behind the element. Example: box-shadow: 6px 6px 5px 10px gray; /* 5px blur, 10px spread */
There are two main ways to specify colors in style sheets
With a predefined color name and more commonly, with a numeric value that describes a particular RGB color.
Color name
It has to be one of the color keywords predefined, not just any color name. CSS3 adds support for the extended set of 140 (rather fanciful) color names. CSS3 also added the transparent keyword, which can be used with any property that has a color value. Helpful, but limited.
RGB color
Computers create the colors you see on a monitor by combining three colors
of light: red, green, and blue. Known as the RGB color model. The amount of light in each color “channel” is typically described on a scale from 0 (none) to 255 (full blast), although it can also be provided as a percent. The closer the three values get to 255 (100%), the closer the resulting color gets to white.
Why 255?
In true RGB color, 8 bits of information are devoted to each color channel. Because 8 bits can describe 256 shades (2^8 = 256), colors are measured on a scale from 0 to 255.
Truecolor
Taken together, 255 colors in each channel can define around 16.7 million
color combinations. This color space of millions of colors is known as Truecolor.
sRGB
There are different ways to encode truecolor (that is, convert them to bytes for computers), and the web uses an encoding called sRGB.
Writing color values in CSS (3 types)
CSS allows RGB color values to be specified in a number of formats.
Scale from 0-255= color: rgb(200, 178, 230);
Percentage= color: rgb(78%, 70%, 90%);
Or, you can provide the six-digit hexadecimal (or hex for short) version= color: #C8B2E6;
Hexadecimal shorten
If your value happens to be made up of three pairs of double digits or letters, such as color: #FFCC00; or color: #993366;
You can condense each pair down to one digit or letter, like #FC0 and #936. Reduces size of file.
Structure of hexadecimal notation
The hexadecimal numbering system uses 16 digits: 0–9 and A–F (for representing the quantities 10–15).
RGBa color
RGBa color allows you to specify a color and make it as transparent or as
opaque as you like. The “a” in “RGBa” stands for alpha, which is an additional channel that controls the level of transparency on a scale from 0 (fully transparent) to 1 (fully opaque).
Example: color: rgba(0, 0, 0, .5);
The first three values in the parentheses are regular old RGB values, in this case creating the color black. The fourth value, .5, is the transparency level.
HSL color
Hue (color), Saturation, and Lightness (or Luminosity). Saturation is a percentage value from 0% (gray) to 100% (color at full blast). Lightness (or brightness) is also a percentage value from 0% (darkest) to 100% (lightest). In CSS, HSL values are provided as the hue value and two percentages. Example: color: hsl(265, 51%, 80%);
HSLa color
As with RGB, you can add an alpha channel to set the transparency of HSL colors, resulting in the HSLa color model. As for RGBa, the fourth value is the degree of transparency on a scale from 0 (fully transparent) to 1 (fully opaque).
Example: color: hsla(70, 60%, 58%, .65);
Foreground color
The foreground of an element consists of its text and border (if one is specified). You specify a foreground color with the color property.
Foreground color (properties)
Values: color value (name or numeric).
Default: depends on the browser and user’s preferences.
Applies to: all elements.
Inherits: yes.
Background color
Use background-color to apply a background color to any element. A background color fills the canvas behind the element that includes the content area, and any padding (extra space) added around the content, extending behind the border out to its outer edge. By default, if your border has gaps, the background will show through. Use the dfn element and class to create highlighted backgrounds for inline text.
Background color (properties)
Values: color value (name or numeric) | transparent
Default: transparent
Applies to: all elements
Inherits: no
Transparent value in background-color property
Background colors do not inherit, but because the default background setting for all elements is transparent, the parent’s background color shows through its descendant elements.
Background painting area
The area on which fill colors are applied. The background painting area of an element extends all the way out to the outer edge of the border. Use background-clip property to give designers more control over where the painting area begins and ends.
Background-clip (properties)
Values: border-box | padding-box | content-box
Default: border-box
Applies to: all elements
Inherits: no
Border-box value in background-clip property
The default border-box value draws the painting area to the outside edge of the border.
Padding-box value in background-clip property
Starts the painting area on the outside edge of the padding area for the element (and to the inside edge of the border).
Content-box value in background-clip property
Allows the background to fill only the content area for the element.
Opacity property
There is another way to make an entire element slightly see-through: the opacity property.
The value for opacity is a number between 0 (completely transparent) and 1 (completely opaque). A value of .5 gives the element an opacity of 50%.
Opacity property (properties)
Values: number (0 to 1)
Default: 1
Applies to: all elements
Inherits: no
Opacity vs RGBa color
The opacity setting applies to the entire element—both the foreground and the background. Use an RGBa color value instead to mark one but not the other.
Background-image property
Adds a background image to any element. Its primary job is to provide the location of the image file.
Background-image property (properties)
Values: url(location of image) | none
Default: none
Applies to: all elements
Inherits: no
Value of background-image property
The value of background-image is a sort of URL holder that contains the location of the image. Use root site relative or relative URLs. For site root relative URLs, you won’t be able to test it locally (from your own computer) unless you have it set up as a server.
3 Best practices for background images
Use a simple image that won’t interfere with the legibility of the text over it.
Always provide a background color value that matches the primary color of the background image. If the background image fails to display, at least the overall design of the page will be similar. This is particularly important if the text color would be illegible against the browser’s default white background.
As usual for the web, keep the file size of background images as small as possible.
Background-image default (not a value)
The image starts in the top-left corner and tiles horizontally and vertically until the entire element is filled. Like background colors, tiling background images fill the area behind the content area, fill the extra padding space around the content, and extend to the outer edge of the border. Change area with background-clip.
All background properties
background-color
background-image
background-repeat
background-position
background-attachment
background-clip
background-size
background.
Background-repeat (properties)
Values: repeat | no-repeat | repeat-x | repeat-y | space | round
Default: repeat
Applies to: all elements
Inherits: no
Space and round values in background-repeat properties
Attempt to fill the available background painting area an even number of times.
Space value in background-repeat properties
The browser calculates how many background images can fit across the width and height of the background area, then adds equal amounts of space between each image.
Round value in background-repeat properties
Makes the browser squish the background image horizontally and vertically (not necessarily proportionally) to fit in the background area an even number of times.
Background-position property
Specifies the position of the origin image in the background.
Background-position property (properties)
Values: length measurement | percentage | left | center | right | top | bottom
Default: 0% 0% (same as left top)
Applies to: all elements
Inherits: no
Left, right, top, bottom, and center values in background-position property
Position the origin image relative to the outer edges of the element’s padding. For example, left positions the image all the way to the left edge of the background area. The default origin position corresponds to left top. When there is only one value, it assumes the other one is center. Keywords may appear in any order.
Length measurements value for background-position property
Specifying position using length measurements indicates an amount of offset from the top-left corner of the element to the top-left corner of the background origin image. Horizontal first. Specifying negative values is allowed and causes the image to hang outside the visible background area.
Percentage values: Are provided in horizontal/vertical pairs, with 0% 0% corresponding to the top-left corner and 100% 100% corresponding to the bottom-right corner. Horizontal first. It is important to note that the percentage value applies to both the canvas area and the image itself.
Background-origin
This property defines the boundaries of the background positioning area.
Background-origin (properties)
Values: border-box | padding-box | content-box
Default: padding-box
Applies to: all elements
Inherits: no
Box values for background-origin property
The border-box (so the origin image is placed under the outer edge of the border, padding-box (outer edge of the padding, just inside the border), or content-box (the actual content area of the element).
Background-attachment
With the background-attachment property, you have the choice of whether the background image scrolls with the content or stays in a fixed position.
Background-attachment (properties)
Values: scroll | fixed | local
Default: scroll
Applies to: all elements
Inherits: no
Local value in background-attachment property
Makes the background image fixed to the content of the scrolling element. This keyword is not supported in IE8 and earlier and may also be problematic on mobile browsers.
Background-size (properties)
Values: length | percentage | auto | cover | contain
Default: auto
Applies to: all elements
Inherits: no
There are several ways to specify the length of the background image (2)
Most straightforward way is to specify the dimensions in length units such as pixels or ems as a horizontal and then vertical value.
Percentage values are calculated based on the background positioning area, which by default runs to the inside edge of the border, but may have been altered with background-origin. So a horizontal value of 50% does not make the image half its width; rather, it sizes it to 50% of the width of the positioning area.
Okay to mix percentage and length values.
Auto value on background-size property
Resizes the image in whatever direction is necessary to maintain its proportions. Some images, such as SVG and CSS gradients, don’t have intrinsic proportions.
Cover value on background-size property
The browser resizes a background image large enough to reach all the sides of the background positioning area. There will be only one image because it fills the whole element, and it is likely that portions of the image will fall outside the positioning area if the proportions of the image and the positioning area do not match.
Contain value on background-size property
Sizes the image just large enough to fill either the width or the height of the positioning area (depending on the proportions of the image). The whole image will be visible and “contained” within the background area. If there is leftover space, the background image repeats unless background-repeat is set to no-repeat.
