CSS - opacity_alpha channel&position properties&transition&transform&flexbox&responsive design

Contents

• Opacity & Alpha Channel
• position properties
• transition
• transform
• flexbox
• Responsive design

1.Opacity & Alpha Channel

• Opacity The opacity CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden. It applies to the element as a whole, including its contents. Value from 0 to 1.

  div {
    opacity: 0.33;
  }

• Alpha Channel The alpha channel is a color component that represents the degree of opacity of a color. Value from 0 to 1.

  div {
    background-color: rgba(0, 209, 112, 0.33);
  }

2.position properties

• position: static; The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value. (Normal document flow is the natural flow of elements on a page before we apply any positional properties to them.)
• position: relative; The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left.
• position: absolute; The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor(no matter what kind of position its ancestor has, only if its ancestor is positioned, then position: absolute will work fine), if any; otherwise, it is placed relative to the initial contianing block. Its final position is determined by the values of top, right, bottom, and left.
• position: fixed; The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport. It always stays in the same place even if the page is scrolled.
• position: sticky; It basically acts like position: relative until an element is scrolled beyond a specific offset, in which case it turns into position: fixed, causing the element to "stick" to its position instead of being scrolled out of view.

3.transition

The transition property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.

• transition-property - It sets the CSS properties to which a transition effect should be applied. e.g. margin-right, color, all, none.etc.

• transition-duration - It sets the length of time a transition animation should take to complete. By default, the value is 0s. We have s and ms units.

• transition-timing-function - It sets how intermediate values are calculated for CSS properties being affected by a transition effect. e.g. linear, ease-in, ease-out.etc.

• transition-delay - It specifies the duration to wait before starting a property's transition effect when its value changes. We have s and ms units.

transition - MDN

4.transform

The transform property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model. e.g. transform: rotate(45deg), transform: scale(2), transform: translate(x-axis, y-axis), transform: skew(10deg, 5deg).

transform - MDN

5.flexbox

Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex to fill additional space or shrink to fit into smaller spaces.

• The flex model
  When elements are laid out as flex items, they are laid out along two axes:
  

  • main axis: It is the axis running in the direction the flex items are laid out in. The start and end of this axis are called the main start and main end.
  • cross axis: It is the axis running perpendicular to the direction the flex items are laid out in. The start and end of this axis are called the cross start and cross end.
  • flex container: The parent element that has display: flex set on it.
  • flex items: The items laid out as flexible boxes inside the flex container.

• flex-direction
  It specifies which direction the main axis runs. By default this is set to row.

  • row-reverse - The main-start and main-end points are opposite to the content direction.
  • column-reverse - The main-start and main-end are opposite to the content direction.

• flex-wrap
  One issue that arises when you have a fixed width or height in your layout is that eventually your flexbox children will overflow their container, breaking the layout. Here, to solve this, we use flex-wrap property. It defines if flexbox items appear on a single line or on multiple lines within a flexbox container.

  • flex-wrap: nowrap; The flexbox items will remain on a single line, no matter what, and will eventually overflow if needed. This is also the default value.
  • flex-wrap: wrap; The flexbox items will be distributed among multiple lines if needed.
  • flex-wrap: wrap-reverse; Behaves the same as wrap but cross-start and cross-end are permuted.

• flex-flow
  
  Shorthand property for flex-direction and flex-wrap. Format: flex-flow: flex-direction flex-wrap;

• flex-grow
  Defines how much a flexbox item should grow if there's space available.

  • flex-grow: 0; The element will not grow if there's space available. It will only use the space it needs.
  • flex-grow: 1; The element will grow by a factor of 1. It will fill up the remaining space if no other flexbox item has a flex-grow value.
  • flex-grow: 2; Because the flex-grow value is relative, its behavior depends on the value of the flexbox item siblings.

• flex-shrink
  Defines how much a flexbox item should shrink if there's not enough space available.

  • flex-shrink: 1; If there's not enough space available in the container's main axis, the element will shrink by a factor of 1, and will wrap its content.
  • flex-shrink: 0; The element will not shrink: it will retain the width it needs, and not wrap its content. Its siblings will shrink to give space to the target element.
  • flex-shrink: 2; Because the flex-shrink value is relative, its behavior depends on the value of the flexbox item siblings.

• flex-basis
  Defines the initial size of a flexbox item.

  • flex-basis: auto; The element will be automatically sized based on its content, or on any height or width value if they are defined. This is the default value.
  • flex-basis: 80px; You can define pixle or (r)em values. The element will wrap its content to avoid any overflow.

• flex - This property is a shorthand for flex-grow, flex-shrink and flex-basis. Format as below:

  • flex: flex-grow flex-shrink flex-basis;
  • flex: flex-grow flex-shrink; flex: flex-grow flex-basis;
  • flex: flex-grow;

• Horizontal and vertical alignment
  You can also use flexbox features to align flex items along the main or cross axis.

  • align-items Defines how flexbox items are aligned according to the cross axis, within a line of a flexbox container.
  • align-items: flex-start; - The flexbox items are aligned at the start of the cross axis.
  • align-items: flex-end; - The flexbox items are aligned at the end of the cross axis.
  • align-items: center; - The flexbox items are aligned at the center of the cross axis.
  • align-items: baseline; - The flexbox items are aligned at the baseline of the cross axis. The baseline value will align flex items along their content's baseline.
  • align-items: stretch; - The flexbox items will stretch across the whole cross axis.
  • align-self Works like align-items, but applies only to a single flexbox item, instead of all of them.
  • align-self: auto; - The target will use the value of align-items.
  • justify-content Defines how flexbox items are aligned according to the main axis, within a flexbox container.
  • justify-content: flex-start; - The flexbox items are pushed towards the start of the container's main axis. This is the default value.
  • justify-content: flex-end; - The flexbox items are pushed towards the end of the container's main axis.
  • justify-content: center; - The flexbox items are centered along the container's main axis.
  • justify-content: space-between; - The remaining space is distributed between the flexbox items.
  • justify-content: space-around; - The remaining space is distributed around the flexbox items: this adds space before the first item and after the last one.
  • align-content Defines how each line is aligned within a flexbox container. It only applies if flex-wrap: wrap is present, and if there are multiple lines of flexbox items.
  • align-content: stretch; - Each line will stretch to fill the remaining space. This is the default value.
  • align-content: flex-start; - Each line will only fill the space it needs. They will all move towards the start of the flexbox conainer's cross axis.
  • align-content: flex-end; - Each line will only fill the space it needs. They will all move towards the end of the flexbox container's cross axis.
  • align-content: center; - Each line will only fill the space it needs. They will all move towards the center of the flexbox container's cross axis.
  • align-content: space-between; - Each line will only fill the space it needs. The remaining space will appear between the lines.
  • align-content: space-around; - Each line will only fill the space it needs. The remaining space will be distributed equally around the lines: before the first line, between the two, and after the last one.

• order
  Defines the order of a flexbox item without changing the HTML code. Flexbox items will be distributed according to the size of order's value.

  • order: 0; - The order of the flexbox items is the one defined in the HTML code. This is the default value.

flexbox - MDN
flexbox - CSS Reference

6.Responsive design

Because more diverse screen sizes became available, the concept of responsive web design(RWD) appeared, a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc.

• Media Queries Media queries are a key component of responsive design. And they allow us to run a series of tests and apply CSS selectively to style the page appropriately for the user's needs. For example, the following media query tests to see if the current web page is being displayed as screen media and the viewport is at least 800 pixels wide. The CSS for the .container selector will only be applied if these two things are true.

@media screen and (min-width: 800px) {
  .container {
    margin: 1em 2em;
  }
}

Responsive design - MDN