CSS Advanced #2

 

CSS The object-fit Property:

The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container.

Example : 

img {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

All Values of The CSS object-fit Property

The object-fit property can have the following values:

• fill - This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit
• contain - The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box
• cover - The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit
• none - The replaced content is not resized
• scale-down - The content is sized as if none or contain were specified (would result in a smaller concrete object size)

CSS Buttons:

Learn how to style buttons using CSS.

Example:

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;

}

Use the border property to add a colored border to a button:

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50; /* Green */
}

Hoverable Buttons:

Example :

.button {
  transition-duration: 0.4s;
}

.button:hover {
  background-color: #4CAF50; /* Green */
  color: white;
}

Disabled Buttons:

Example :

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

Button Groups:

Example :

Remove margins and add float:left to each button to create a button group:

.btn-group .button {

  background-color: #4CAF50; /* Green */

  border: none;

  color: white;

  padding: 15px 32px;

  text-align: center;

  text-decoration: none;

  display: inline-block;

  font-size: 16px;

  cursor: pointer;

  float: left;

}

CSS Flexbox Layout Module:

Before the Flexbox Layout module, there were four layout modes:

• Block, for sections in a webpage
• Inline, for text
• Table, for two-dimensional table data
• Positioned, for explicit position of an element

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

Example :

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

The flex-direction Property:

The flex-direction property defines in which direction the container wants to stack the flex items.

Example :

.flex-container {
  display: flex;
  flex-direction: column;
}

The flex-wrap Property:

The flex-wrap property specifies whether the flex items should wrap or not.

Example:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

The flex-flow Property:

The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.

Example :

.flex-container {
  display: flex;
  flex-flow: row wrap;
}