[TIL] 20201121 Other Assorted Useful CSS Properties

Opacity & The Alpha Channel

Alpha Channel

• rgba (r, g, b, a)
  • r, g, b : value from 0 to 255
  • a : value from 0 to 1 (0 is transparent, 1 is opique)
• Hex color
  • #rrggbbaa
  • a : value from 00 to ff (0 is transparent, ff is opique)
• Affects only the background-color, when applied.

opacity

• value from 0 to 1
• Applys to the entire element, including text and button.

 

 

 

The Position Property

• Sets how an element is positioned in a document.
• The top, right, bottom, left properties determine the final location of positioned elements.

Values

• static : default (normal flow of the document)
• 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. 
• 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, if any; otherwise, it's placed relative to the initial containing block. Its final position is determined by the value of top, right, bottom, and left.
• 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. Even when the user scrolls down, the element stays at the same place. (Used when a nav bar stays at one place)
• sticky : The element starts out not fixed, but becomes fixed when the user scrolls down.

 

 

Transitions

• Allow us to animate the transition of one property value to another property value.
• Syntax : transition: {property name} {duration} {timing function} {delay};
• Can use all for {property name}, but not recommended. Use specific property name for future code editing.

/* Only background-color changes throughout 3s. Other properties change immediately. */

transition: background-color 3s; 


/* Set timing-function separately as ease in. */

transition-timing-function: ease-in;

 

 

 

Transform

• Multiple properties can be used together. 

transform: translateX(-40px) rotate(180deg) scaleY(1.4);

• If applied to the parent element, everything gets applied to its contents as well.

transform: rotate( )

• Rotate the element.
• Accepts angle as value.
• Value unit : deg(degree), turn...

transform-origin

• Transform the element from here.
• Value : top, right, bottom, left, center, bottom left...

transform: scale( )

• Value: number (1 is the original size)
• 1 value : The element scales up or down both on the X and Y axis.
• 2 values : The element scales up or down according to the 2 numbers. First value is applied to the X axis and second value is applied to the Y axis. (scaleX(), scaleY() can be used as well.)

transform: translate(X,Y)

• Moves an element on the 2D plane.

transform: skew( )

• Accepts angle as value.

 

 

 

Background

background-image

• background-image: url("  ")
• URL can be an imaage file in a folder, or can be hosted online.

background-size

• contain : Scales the image a slarge as possible without cropping or stretching the image. Repeats the image by default.
• cover : Scales the image as large as possible without stretching the image.
• auto : Scales the background image in the corresponding direction such that its intrinsic proportions are maintained.

background-position

• Sets the initial position for each background image.
• Value : top, right, left, bottom, center...

background

• Order generally doesn't matter, except <bg-size> value.
• The background-size value may only be included immediately after position, separated with the '/' character.
  • ex) center/cover

Having multiple background

• If there's an empty space in the background, another background can be assigned, i.e. color, image.

 

 

Google Fonts 

• Include a font as a part of the document in <link> element.
• fonts.google.com : select a font and click 'embed' at the sidebar.
• Don't have to worry about the user not having certain font.

 

 

 

 

Random Things from Photo Blog CodeAlong

• How to calculate in CSS
  • calc( )

img {
    width: 30%
    margin: calc(10%/6)
}

• Annoying thing about HTML
  • If there is a white space between inline elements, HTML recognizes it as text, hence actually displaying the white space on the webpage.

 

 

 

 

 

* This post is a summary of Udemy Course "The Web Developer Bootcamp" by Colt Steele.